:root{--navy:#172f59;--teal:#12aaa1;--ink:#26384f;--muted:#6f7d91;--line:#dce4ec;--danger:#ca5359}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--ink);font-family:Arial,Helvetica,sans-serif}
button,input,select,textarea{font:inherit}
.certificate-designer{max-width:1500px;margin:0 auto;padding:18px}
.designer-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
.designer-head h1{margin:0;color:var(--navy);font-size:30px}.designer-head p{margin:5px 0 0;color:var(--muted)}
.draft-status{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:7px 10px;color:var(--muted)}
.designer-grid{display:grid;grid-template-columns:minmax(620px,1fr) 390px;gap:18px;align-items:start}
.preview-panel,.controls{background:#fff;border:1px solid var(--line);border-radius:18px}
.preview-panel{padding:16px}.preview-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:12px}.preview-head strong{color:var(--navy)}.preview-head span,.stage-tip{font-size:12px;color:var(--muted)}
.paper-shell{padding:18px;background:#fff;overflow:auto}
#paper{position:relative;width:620px;max-width:100%;aspect-ratio:210/297;margin:auto;background:#fff;overflow:hidden;box-shadow:0 14px 40px rgba(23,47,89,.12);isolation:isolate;--tpl-bg:#fffdf7;--tpl-border:#c9a64b;--tpl-accent:#9f7b22;--tpl-secondary:#efe2b7;background:var(--tpl-bg)}
.frame-outer,.frame-inner{position:absolute;pointer-events:none;z-index:1}
.frame-outer{inset:3.2%;border:5px double var(--tpl-border)}
.frame-inner{inset:5.2%;border:1px solid var(--tpl-border);opacity:.7}
.corner-deco{position:absolute;z-index:2;color:var(--tpl-accent);font-size:28px;line-height:1}.corner-a{left:5.2%;top:4.6%}.corner-b{right:5.2%;bottom:4.6%;transform:rotate(180deg)}
#paper[data-style="modern"] .frame-outer{inset:0;border:0;border-left:18px solid var(--tpl-border);border-top:10px solid var(--tpl-secondary)}
#paper[data-style="modern"] .frame-inner{inset:2.5%;border:0;border-right:3px solid var(--tpl-accent);border-bottom:3px solid var(--tpl-accent)}
#paper[data-style="executive"] .frame-outer{inset:3%;border:2px solid var(--tpl-border)}#paper[data-style="executive"] .frame-inner{inset:4.2%;border:7px solid var(--tpl-secondary)}
#paper[data-style="minimal"] .frame-outer{inset:4%;border:1px solid var(--tpl-border)}#paper[data-style="minimal"] .frame-inner{inset:6%;border:0;border-top:6px solid var(--tpl-accent)}
#paper[data-style="geometric"] .frame-outer{inset:0;border:0;border-top:26px solid var(--tpl-border);border-right:18px solid var(--tpl-accent)}#paper[data-style="geometric"] .frame-inner{inset:5%;border:1px solid var(--tpl-secondary)}
#paper[data-style^="kids"] .frame-outer{inset:3%;border:7px solid var(--tpl-secondary);border-radius:28px}#paper[data-style^="kids"] .frame-inner{inset:4.8%;border:3px dashed var(--tpl-border);border-radius:22px}
.canvas-element,.asset-layer{position:absolute;z-index:4;cursor:move;touch-action:none;user-select:none;white-space:pre-wrap}
.text-element{width:78%;left:11%;text-align:center;color:var(--navy);line-height:1.25}
#titleText{top:15%;font-size:50px;font-family:Georgia,serif;font-weight:800;letter-spacing:.08em;color:var(--tpl-accent)}
#introText{top:27%;font-size:20px}
#nameText{top:34%;font-size:38px;font-family:Georgia,serif;font-weight:800;color:var(--tpl-border)}
#bodyText{top:45%;font-size:22px;line-height:1.5}
#dateText{left:12%;top:81%;width:30%;font-size:17px;border-top:1px solid var(--tpl-border);padding-top:7px}
#signText{left:58%;top:81%;width:30%;font-size:17px;border-top:1px solid var(--tpl-border);padding-top:7px}
.asset-layer{width:20%;height:14%;left:40%;top:65%;z-index:3}.asset-layer img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.sticker-element{width:auto;min-width:42px;font-size:44px;text-align:center}
#selectionBox{position:absolute;z-index:10;display:none;border:2px dashed var(--teal);pointer-events:none}#selectionBox.visible{display:block}
.handle{position:absolute;width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid var(--teal);pointer-events:auto}.handle.nw{left:0;top:0;transform:translate(-50%,-50%);cursor:nwse-resize}.handle.ne{right:0;top:0;transform:translate(50%,-50%);cursor:nesw-resize}.handle.sw{left:0;bottom:0;transform:translate(-50%,50%);cursor:nesw-resize}.handle.se{right:0;bottom:0;transform:translate(50%,50%);cursor:nwse-resize}
.controls{position:sticky;top:12px;overflow:hidden}.tabs{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}.tab{border:0;background:#fff;color:var(--muted);padding:13px 5px;font-weight:800;cursor:pointer}.tab:hover{color:var(--navy);background:#f8fbfc}.tab.active{color:var(--navy);box-shadow:inset 0 -3px var(--teal)}
.pane{display:none;padding:17px}.pane.active{display:block}.pane h2{margin:0 0 13px;color:var(--navy);font-size:20px}
label{display:block;margin:10px 0 5px;color:var(--navy);font-size:13px;font-weight:800}
input[type=text],input[type=number],select,textarea{width:100%;border:1px solid #cad4df;border-radius:9px;padding:9px 10px;background:#fff;color:var(--ink)}textarea{min-height:105px;resize:vertical}input[type=color]{width:100%;height:39px;border:1px solid #cad4df;border-radius:9px;background:#fff;padding:4px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.template-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.template-card{position:relative;height:112px;border:2px solid transparent;border-radius:11px;background:#f8fafb;cursor:pointer;padding:8px;overflow:hidden}.template-card.active{border-color:var(--teal)}.template-preview{height:78px;background:var(--pbg);border:5px double var(--pborder);position:relative}.template-preview:after{content:"";position:absolute;inset:9px;border:1px solid var(--paccent)}.template-card b{display:block;margin-top:4px;font-size:11px;color:var(--navy)}
.element-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.element-btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 4px;font-size:24px;cursor:pointer;color:var(--navy)}.element-btn span{display:block;font-size:10px;margin-top:4px}.element-btn:hover{background:#f4fbfa}
.upload-card{margin-top:14px;border:1px dashed #aeb8c7;border-radius:11px;padding:11px;background:#fafcfd;cursor:pointer}.upload-card strong,.upload-card span{display:block}.upload-card span{font-size:11px;color:var(--muted);font-weight:400;margin:3px 0 9px}
.context-tools{margin-top:14px;border:1px solid var(--line);border-radius:11px;padding:10px;background:#f9fbfc}.context-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.hidden{display:none!important}
.mini-btn,.btn{border:0;border-radius:9px;padding:9px 10px;font-weight:800;cursor:pointer}.mini-btn{border:1px solid var(--line);background:#fff;color:var(--navy);font-size:12px}.danger{color:var(--danger)}.wide-btn{width:100%;margin-top:10px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.btn.primary{background:var(--teal);color:#fff}.btn.secondary{background:#edf2f6;color:var(--navy)}.wide{grid-column:1/-1}.save-status{min-height:18px;margin-top:9px;font-size:12px;color:var(--muted)}
.is-editing{user-select:text!important;cursor:text!important;outline:2px solid var(--teal);background:rgba(255,255,255,.75)}
.drag-over{outline:3px dashed var(--teal);outline-offset:-12px}
@media(max-width:1050px){.designer-grid{grid-template-columns:1fr}.controls{position:static}}
@media(max-width:650px){.certificate-designer{padding:8px}.designer-head{align-items:flex-start}.designer-head h1{font-size:24px}.draft-status{display:none}.paper-shell{padding:4px}.tabs{grid-template-columns:repeat(2,1fr)}.row{grid-template-columns:1fr}.template-grid{grid-template-columns:1fr 1fr}}
@media print{body{background:#fff}.designer-head,.controls,.preview-head,.stage-tip{display:none!important}.certificate-designer,.preview-panel,.paper-shell{padding:0;border:0}.designer-grid{display:block}#paper{width:100%;box-shadow:none}}


/* ===== V2: Kinder-Vorlagen deutlich verspielter + Icon-Bibliothek ===== */
.icon-library-card{
  margin:0 0 14px;
  padding:11px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fbfdff;
}
.icon-library-head{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-bottom:9px;
}
.icon-library-head strong{color:var(--navy);font-size:14px}
.icon-library-head span{color:var(--muted);font-size:11px}
.icon-library{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:6px;
}
.icon-choice{
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  min-height:44px;
  font-size:22px;
  cursor:pointer;
}
.icon-choice:hover{
  background:#f1faf9;
  border-color:var(--teal);
}

/* Kinder-Vorlagen: lebendigere Rahmen und dekorative Flächen */
#paper[data-style="kids-rainbow"]{
  background:
    radial-gradient(circle at 12% 10%, rgba(255,214,102,.28) 0 5%, transparent 5.5%),
    radial-gradient(circle at 88% 14%, rgba(116,190,255,.22) 0 5%, transparent 5.5%),
    linear-gradient(180deg,#fffef9,#fff);
}
#paper[data-style="kids-rainbow"] .frame-outer{
  border:0;
  background:
    linear-gradient(90deg,#ef6b6b,#f3b54a,#70b85a,#5ea7db,#8c6bc2,#ef83b5) top/100% 12px no-repeat,
    linear-gradient(90deg,#ef6b6b,#f3b54a,#70b85a,#5ea7db,#8c6bc2,#ef83b5) bottom/100% 12px no-repeat;
  inset:2.5%;
  border-radius:28px;
}
#paper[data-style="kids-rainbow"] .frame-inner{border:3px dashed #7db7dc}

#paper[data-style="kids-stars"]{
  background:
    radial-gradient(circle at 12% 12%, #f8d762 0 3px, transparent 4px),
    radial-gradient(circle at 85% 18%, #f8d762 0 2px, transparent 3px),
    radial-gradient(circle at 18% 80%, #7868b8 0 2px, transparent 3px),
    radial-gradient(circle at 88% 76%, #7868b8 0 3px, transparent 4px),
    #fffdf7;
}
#paper[data-style="kids-stars"] .frame-outer{border:7px solid #f2c650;border-radius:24px}
#paper[data-style="kids-stars"] .frame-inner{border:3px dashed #7a67b8;border-radius:18px}

#paper[data-style="kids-space"]{
  background:
    radial-gradient(circle at 14% 10%, rgba(255,255,255,.95) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 16%, rgba(255,255,255,.9) 0 2px, transparent 3px),
    linear-gradient(180deg,#eef4ff 0%,#ffffff 38%);
}
#paper[data-style="kids-space"] .frame-outer{border:8px solid #40578a;border-radius:26px}
#paper[data-style="kids-space"] .frame-inner{border:3px dashed #7b61b8;border-radius:18px}

#paper[data-style="kids-football"]{
  background:
    linear-gradient(180deg,#ffffff 0 84%,#e9f7ea 84% 100%);
}
#paper[data-style="kids-football"] .frame-outer{border:8px solid #4b925a;border-radius:24px}
#paper[data-style="kids-football"] .frame-inner{border:3px dashed #2d753d;border-radius:18px}

#paper[data-style="kids-jungle"],
#paper[data-style="kids-dino"]{
  background:
    radial-gradient(ellipse at 8% 8%, rgba(90,156,95,.15) 0 7%, transparent 8%),
    radial-gradient(ellipse at 92% 10%, rgba(90,156,95,.14) 0 7%, transparent 8%),
    #fcfffa;
}
#paper[data-style="kids-jungle"] .frame-outer,
#paper[data-style="kids-dino"] .frame-outer{
  border:8px solid #6ea66c;
  border-radius:26px;
}
#paper[data-style="kids-jungle"] .frame-inner,
#paper[data-style="kids-dino"] .frame-inner{
  border:3px dashed #3f7d4b;
  border-radius:18px;
}

#paper[data-style="kids-unicorn"]{
  background:
    radial-gradient(circle at 12% 12%, rgba(255,185,232,.25) 0 8%, transparent 9%),
    radial-gradient(circle at 88% 15%, rgba(180,218,255,.25) 0 8%, transparent 9%),
    #fffaff;
}
#paper[data-style="kids-unicorn"] .frame-outer{
  border:8px solid #d19bd7;
  border-radius:28px;
}
#paper[data-style="kids-unicorn"] .frame-inner{
  border:3px dashed #8f6bbb;
  border-radius:20px;
}

#paper[data-style="kids-confetti"]{
  background:
    radial-gradient(circle at 9% 9%, #ef7b73 0 3px, transparent 4px),
    radial-gradient(circle at 90% 12%, #5da6c7 0 3px, transparent 4px),
    radial-gradient(circle at 12% 86%, #f2bf4d 0 3px, transparent 4px),
    radial-gradient(circle at 88% 84%, #8d73bd 0 3px, transparent 4px),
    #fff;
}
#paper[data-style="kids-confetti"] .frame-outer{border:8px solid #5da6c7;border-radius:24px}
#paper[data-style="kids-confetti"] .frame-inner{border:3px dashed #ef7b73;border-radius:18px}

/* Kleine dekorative Themen-Icons in den vier Ecken */
#paper::before,
#paper::after{
  position:absolute;
  z-index:2;
  pointer-events:none;
  font-size:34px;
  line-height:1;
}
#paper[data-style="kids-rainbow"]::before{content:"🌈";left:7%;top:6%}
#paper[data-style="kids-rainbow"]::after{content:"☁️";right:7%;top:7%}
#paper[data-style="kids-stars"]::before{content:"★";left:8%;top:7%;color:#f2c650}
#paper[data-style="kids-stars"]::after{content:"✦";right:8%;top:7%;color:#7868b8}
#paper[data-style="kids-space"]::before{content:"🚀";left:7%;top:6%}
#paper[data-style="kids-space"]::after{content:"🪐";right:7%;top:6%}
#paper[data-style="kids-football"]::before{content:"⚽";left:7%;top:6%}
#paper[data-style="kids-football"]::after{content:"🏆";right:7%;top:6%}
#paper[data-style="kids-jungle"]::before{content:"🌿";left:7%;top:6%}
#paper[data-style="kids-jungle"]::after{content:"🦁";right:7%;top:6%}
#paper[data-style="kids-dino"]::before{content:"🦕";left:7%;top:6%}
#paper[data-style="kids-dino"]::after{content:"🌿";right:7%;top:6%}
#paper[data-style="kids-unicorn"]::before{content:"🦄";left:7%;top:6%}
#paper[data-style="kids-unicorn"]::after{content:"🌈";right:7%;top:6%}
#paper[data-style="kids-confetti"]::before{content:"🎈";left:7%;top:6%}
#paper[data-style="kids-confetti"]::after{content:"🎉";right:7%;top:6%}


/* ===== V3: modernere Business-Vorlagen ===== */
#paper[data-style="business-wave"] .frame-outer,
#paper[data-style="business-corner"] .frame-outer,
#paper[data-style="business-executive"] .frame-outer,
#paper[data-style="business-minimal"] .frame-outer,
#paper[data-style="business-diagonal"] .frame-outer,
#paper[data-style="business-curve"] .frame-outer{
  border:0;
}

/* Blau / Türkis: moderne, ruhige Flächen oben links + unten rechts */
#paper[data-style="business-wave"]{
  background:
    radial-gradient(ellipse at -5% -3%, var(--tpl-secondary) 0 19%, transparent 19.5%),
    radial-gradient(ellipse at 105% 103%, color-mix(in srgb,var(--tpl-border) 18%, transparent) 0 22%, transparent 22.5%),
    var(--tpl-bg);
}
#paper[data-style="business-wave"] .frame-inner{
  inset:4%;
  border:1px solid color-mix(in srgb,var(--tpl-border) 45%, white);
  border-radius:18px;
}
#paper[data-style="business-wave"] .corner-a,
#paper[data-style="business-wave"] .corner-b{display:none}

/* Grün / Violett: geometrische Eckakzente */
#paper[data-style="business-corner"]{
  background:
    linear-gradient(135deg,var(--tpl-secondary) 0 12%, transparent 12.2%) top left/48% 23% no-repeat,
    linear-gradient(315deg,color-mix(in srgb,var(--tpl-border) 16%, white) 0 11%, transparent 11.2%) bottom right/46% 22% no-repeat,
    var(--tpl-bg);
}
#paper[data-style="business-corner"] .frame-inner{
  inset:4.5%;
  border:0;
  border-left:5px solid var(--tpl-border);
  border-bottom:1px solid var(--tpl-secondary);
}
#paper[data-style="business-corner"] .corner-a,
#paper[data-style="business-corner"] .corner-b{display:none}

/* Executive: Anthrazit mit klarer Top-Bar */
#paper[data-style="business-executive"]{
  background:
    linear-gradient(180deg,var(--tpl-border) 0 7%, transparent 7.1%),
    linear-gradient(90deg,var(--tpl-secondary) 0 1.6%, transparent 1.7%),
    var(--tpl-bg);
}
#paper[data-style="business-executive"] .frame-inner{
  inset:4%;
  border:1px solid #d6dce2;
}
#paper[data-style="business-executive"] .corner-a,
#paper[data-style="business-executive"] .corner-b{display:none}

/* Minimal Gold: sehr feine Premium-Linien */
#paper[data-style="business-minimal"]{
  background:
    linear-gradient(90deg,transparent 0 10%,var(--tpl-secondary) 10% 90%,transparent 90%) top 7% left/100% 1px no-repeat,
    var(--tpl-bg);
}
#paper[data-style="business-minimal"] .frame-inner{
  inset:4%;
  border:1px solid color-mix(in srgb,var(--tpl-border) 48%, white);
}
#paper[data-style="business-minimal"] .corner-a,
#paper[data-style="business-minimal"] .corner-b{display:none}

/* Navy/Türkis: starke diagonale Corporate-Ecken */
#paper[data-style="business-diagonal"]{
  background:
    linear-gradient(135deg,var(--tpl-border) 0 11%,transparent 11.2%) top left/55% 25% no-repeat,
    linear-gradient(315deg,var(--tpl-accent) 0 9%,transparent 9.2%) bottom right/48% 23% no-repeat,
    var(--tpl-bg);
}
#paper[data-style="business-diagonal"] .frame-inner{
  inset:4.2%;
  border:1px solid #d8e2ec;
}
#paper[data-style="business-diagonal"] .corner-a,
#paper[data-style="business-diagonal"] .corner-b{display:none}

/* Coral: weichere moderne Kurven */
#paper[data-style="business-curve"]{
  background:
    radial-gradient(ellipse at 105% -5%,var(--tpl-secondary) 0 19%,transparent 19.5%),
    radial-gradient(ellipse at -7% 105%,color-mix(in srgb,var(--tpl-border) 13%, white) 0 20%,transparent 20.5%),
    var(--tpl-bg);
}
#paper[data-style="business-curve"] .frame-inner{
  inset:4.2%;
  border:1px solid color-mix(in srgb,var(--tpl-border) 36%, white);
  border-radius:22px;
}
#paper[data-style="business-curve"] .corner-a,
#paper[data-style="business-curve"] .corner-b{display:none}

/* Spiegelbuttons etwas klarer */
#flipHBtn,#flipVBtn{
  min-width:96px;
}


/* ===== V3.2: Spiegeln stabil halten ===== */
#paper .canvas-element,
#paper .asset-layer{
  transform-origin:50% 50% !important;
}


/* ===== V4: Kinder & Schule komplett neu gestaltet =====
   Keine festen Emojis mehr in den Vorlagen.
   Die Mitte bleibt bewusst ruhig für Urkundentext.
*/
#paper[data-style^="kids"]::before,
#paper[data-style^="kids"]::after{
  content:"" !important;
  display:block !important;
  position:absolute;
  pointer-events:none;
  z-index:2;
  font-size:0 !important;
}

#paper[data-style^="kids"] .corner-deco{
  display:none !important;
}

#paper[data-style^="kids"] .frame-outer,
#paper[data-style^="kids"] .frame-inner{
  pointer-events:none;
}

/* 1. REGENBOGEN – farbige Bögen + Wolkenformen */
#paper[data-style="kids-rainbow"]{
  background:
    radial-gradient(circle at 10% 9%, rgba(255,255,255,.98) 0 23px, transparent 24px),
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.98) 0 31px, transparent 32px),
    radial-gradient(circle at 90% 91%, rgba(255,255,255,.98) 0 23px, transparent 24px),
    radial-gradient(circle at 85% 90%, rgba(255,255,255,.98) 0 31px, transparent 32px),
    #fffefb;
}
#paper[data-style="kids-rainbow"] .frame-outer{
  inset:2.5%;
  border:0;
  border-radius:30px;
  background:
    linear-gradient(90deg,#ef7474 0 16%,#f1ae4d 16% 32%,#f2d85d 32% 48%,#74b96d 48% 64%,#67a9df 64% 80%,#a57bc4 80% 100%) top/100% 12px no-repeat,
    linear-gradient(90deg,#a57bc4 0 16%,#67a9df 16% 32%,#74b96d 32% 48%,#f2d85d 48% 64%,#f1ae4d 64% 80%,#ef7474 80% 100%) bottom/100% 12px no-repeat;
}
#paper[data-style="kids-rainbow"] .frame-inner{
  inset:5%;
  border:2px dashed #8fc5e4;
  border-radius:24px;
}

/* 2. STERNE – Sternenrand über CSS-Polygoneffekt */
#paper[data-style="kids-stars"]{
  background:
    radial-gradient(circle at 8% 10%, #f4c94e 0 4px, transparent 5px),
    radial-gradient(circle at 16% 6%, #7968b6 0 3px, transparent 4px),
    radial-gradient(circle at 92% 13%, #f4c94e 0 4px, transparent 5px),
    radial-gradient(circle at 84% 7%, #7968b6 0 3px, transparent 4px),
    radial-gradient(circle at 10% 88%, #7968b6 0 4px, transparent 5px),
    radial-gradient(circle at 90% 86%, #f4c94e 0 4px, transparent 5px),
    #fffdf7;
}
#paper[data-style="kids-stars"] .frame-outer{
  inset:3%;
  border:7px solid #f0c64f;
  border-radius:28px;
}
#paper[data-style="kids-stars"] .frame-inner{
  inset:5%;
  border:2px dotted #816dbb;
  border-radius:22px;
}

/* 3. WELTRAUM – dunkler Rand, Sterne und Planetenkreise */
#paper[data-style="kids-space"]{
  background:
    radial-gradient(circle at 8% 8%, rgba(66,91,145,.20) 0 22px, transparent 23px),
    radial-gradient(circle at 92% 12%, rgba(117,92,177,.20) 0 30px, transparent 31px),
    radial-gradient(circle at 10% 88%, rgba(66,91,145,.14) 0 16px, transparent 17px),
    #fbfcff;
}
#paper[data-style="kids-space"] .frame-outer{
  inset:2.5%;
  border:10px solid #344f86;
  border-radius:30px;
  box-shadow:inset 0 0 0 4px #dfe7f7;
}
#paper[data-style="kids-space"] .frame-inner{
  inset:5%;
  border:0;
  background:
    radial-gradient(circle,#765db4 0 2px,transparent 3px) 0 0/42px 42px;
  opacity:.35;
  clip-path:polygon(0 0,100% 0,100% 12%,0 12%,0 88%,100% 88%,100% 100%,0 100%);
}

/* 4. FUSSBALL – Spielfeldlinien dezent in den Rändern */
#paper[data-style="kids-football"]{
  background:
    linear-gradient(180deg,#fff 0 83%,#edf8ef 83% 100%);
}
#paper[data-style="kids-football"] .frame-outer{
  inset:2.8%;
  border:8px solid #4b925a;
  border-radius:24px;
}
#paper[data-style="kids-football"] .frame-inner{
  inset:5%;
  border:2px solid #8fc59a;
  border-radius:18px;
}
#paper[data-style="kids-football"]::before{
  width:120px;height:120px;left:50%;bottom:3.5%;
  transform:translateX(-50%);
  border:3px solid rgba(43,108,59,.38);
  border-radius:50%;
  box-shadow:0 0 0 999px rgba(255,255,255,0);
}
#paper[data-style="kids-football"]::after{
  width:44%;height:42px;left:28%;bottom:3.2%;
  border:3px solid rgba(43,108,59,.33);
  border-bottom:0;
}

/* 5. DSCHUNGEL – Blattartige Formen an den Außenrändern */
#paper[data-style="kids-jungle"]{
  background:
    radial-gradient(ellipse at 2% 6%,rgba(72,135,77,.24) 0 6%,transparent 6.4%),
    radial-gradient(ellipse at 8% 13%,rgba(88,155,92,.18) 0 5%,transparent 5.5%),
    radial-gradient(ellipse at 98% 8%,rgba(72,135,77,.24) 0 6%,transparent 6.4%),
    radial-gradient(ellipse at 92% 15%,rgba(88,155,92,.18) 0 5%,transparent 5.5%),
    radial-gradient(ellipse at 4% 90%,rgba(72,135,77,.20) 0 7%,transparent 7.4%),
    radial-gradient(ellipse at 96% 90%,rgba(72,135,77,.20) 0 7%,transparent 7.4%),
    #fcfffa;
}
#paper[data-style="kids-jungle"] .frame-outer{
  inset:2.8%;
  border:8px solid #5a9d62;
  border-radius:30px;
}
#paper[data-style="kids-jungle"] .frame-inner{
  inset:5.2%;
  border:2px dashed #91bd91;
  border-radius:22px;
}

/* 6. DINOSAURIER – Fußspuren + erdige Akzente */
#paper[data-style="kids-dino"]{
  background:
    radial-gradient(ellipse at 9% 10%,rgba(127,166,87,.17) 0 5%,transparent 5.5%),
    radial-gradient(ellipse at 91% 12%,rgba(210,122,62,.14) 0 5%,transparent 5.5%),
    #fffdf7;
}
#paper[data-style="kids-dino"] .frame-outer{
  inset:2.8%;
  border:8px solid #7fa657;
  border-radius:28px;
}
#paper[data-style="kids-dino"] .frame-inner{
  inset:5%;
  border:3px dotted #d89b67;
  border-radius:20px;
}
#paper[data-style="kids-dino"]::before,
#paper[data-style="kids-dino"]::after{
  width:24px;height:32px;
  border-radius:55% 55% 45% 45%;
  background:rgba(210,122,62,.30);
  box-shadow:
    -11px -9px 0 -5px rgba(210,122,62,.30),
    0 -14px 0 -6px rgba(210,122,62,.30),
    11px -9px 0 -5px rgba(210,122,62,.30);
}
#paper[data-style="kids-dino"]::before{left:8%;bottom:8%;transform:rotate(-22deg)}
#paper[data-style="kids-dino"]::after{right:8%;top:8%;transform:rotate(158deg)}

/* 7. EINHORN – Pastellbögen und Glitzerpunkte, ohne Emoji */
#paper[data-style="kids-unicorn"]{
  background:
    radial-gradient(circle at 10% 10%,rgba(240,173,221,.22) 0 7%,transparent 7.5%),
    radial-gradient(circle at 90% 12%,rgba(169,204,244,.23) 0 7%,transparent 7.5%),
    linear-gradient(180deg,#fffaff,#fff);
}
#paper[data-style="kids-unicorn"] .frame-outer{
  inset:2.6%;
  border:0;
  border-radius:32px;
  box-shadow:
    inset 0 0 0 8px #d4a3dc,
    inset 0 0 0 15px #f0c5df,
    inset 0 0 0 22px #b9d7f2;
}
#paper[data-style="kids-unicorn"] .frame-inner{
  inset:6%;
  border:2px dashed #9a78bb;
  border-radius:22px;
}

/* 8. KONFETTI – echte Konfetti-Punkte/Striche in den Außenbereichen */
#paper[data-style="kids-confetti"]{
  background:
    radial-gradient(circle at 8% 8%,#ef7871 0 4px,transparent 5px),
    radial-gradient(circle at 15% 5%,#5ea8c8 0 3px,transparent 4px),
    radial-gradient(circle at 91% 8%,#f0bf4c 0 4px,transparent 5px),
    radial-gradient(circle at 85% 13%,#8c72ba 0 3px,transparent 4px),
    radial-gradient(circle at 8% 91%,#65ae74 0 4px,transparent 5px),
    radial-gradient(circle at 92% 90%,#ef7871 0 4px,transparent 5px),
    #fff;
}
#paper[data-style="kids-confetti"] .frame-outer{
  inset:2.8%;
  border:8px solid #5ea8c8;
  border-radius:26px;
}
#paper[data-style="kids-confetti"] .frame-inner{
  inset:5%;
  border:2px dashed #ef7871;
  border-radius:20px;
}

/* ----- Vorschaubilder spiegeln die Kinderstile jetzt wirklich wider ----- */
.template-preview[data-style^="kids"]{
  border-radius:10px;
  overflow:hidden;
}
.template-preview[data-style="kids-rainbow"]{
  border:0;
  background:
    linear-gradient(90deg,#ef7474,#f1ae4d,#f2d85d,#74b96d,#67a9df,#a57bc4) top/100% 8px no-repeat,
    var(--pbg);
  box-shadow:inset 0 0 0 4px #8fc5e4;
}
.template-preview[data-style="kids-stars"]{
  background:
    radial-gradient(circle at 12% 14%,#f4c94e 0 3px,transparent 4px),
    radial-gradient(circle at 86% 18%,#7968b6 0 3px,transparent 4px),
    var(--pbg);
  border:5px solid #f0c64f;
}
.template-preview[data-style="kids-space"]{
  background:
    radial-gradient(circle at 18% 18%,#765db4 0 3px,transparent 4px),
    radial-gradient(circle at 82% 22%,#344f86 0 3px,transparent 4px),
    linear-gradient(180deg,#eef3ff,var(--pbg));
  border:6px solid #344f86;
}
.template-preview[data-style="kids-football"]{
  background:linear-gradient(180deg,#fff 0 70%,#eaf7ec 70% 100%);
  border:6px solid #4b925a;
}
.template-preview[data-style="kids-jungle"]{
  background:
    radial-gradient(ellipse at 6% 8%,rgba(72,135,77,.30) 0 12%,transparent 13%),
    radial-gradient(ellipse at 94% 12%,rgba(72,135,77,.30) 0 12%,transparent 13%),
    var(--pbg);
  border:6px solid #5a9d62;
}
.template-preview[data-style="kids-dino"]{
  background:
    radial-gradient(ellipse at 12% 15%,rgba(210,122,62,.25) 0 9%,transparent 10%),
    var(--pbg);
  border:6px solid #7fa657;
}
.template-preview[data-style="kids-unicorn"]{
  background:
    radial-gradient(circle at 12% 12%,rgba(240,173,221,.35) 0 15%,transparent 16%),
    radial-gradient(circle at 88% 15%,rgba(169,204,244,.35) 0 15%,transparent 16%),
    var(--pbg);
  border:6px solid #d4a3dc;
}
.template-preview[data-style="kids-confetti"]{
  background:
    radial-gradient(circle at 10% 15%,#ef7871 0 3px,transparent 4px),
    radial-gradient(circle at 85% 18%,#f0bf4c 0 3px,transparent 4px),
    radial-gradient(circle at 15% 85%,#65ae74 0 3px,transparent 4px),
    radial-gradient(circle at 88% 82%,#8c72ba 0 3px,transparent 4px),
    var(--pbg);
  border:6px solid #5ea8c8;
}


/* ===== V5 Bildengine: stabile Bilder, Zoom, Verschieben, Spiegeln ===== */
#paper .asset-layer{
  position:absolute;
  z-index:4;
  cursor:move;
  touch-action:none;
  user-select:none;
  overflow:hidden !important;
  transform-origin:50% 50%;
}
#paper .asset-layer > img{
  display:none !important;
}
#paper .asset-layer > canvas.image-canvas{
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
}
#selectionBox{z-index:12;}


/* ===== V7 – stabile DOM-Bildengine ===== */
#paper .asset-layer{
  position:absolute;
  overflow:hidden !important;
  transform-origin:50% 50% !important;
  background:none !important;
}
#paper .asset-layer > canvas.image-canvas{
  display:none !important;
}
#paper .asset-layer > img.designer-image{
  display:block !important;
  position:absolute !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:unset !important;
  pointer-events:none !important;
  user-select:none !important;
  -webkit-user-drag:none !important;
}


/* ===== Kinder-Ausweis V6: nur Layout-Overrides, keine JS-Funktionen blockieren ===== */
.kinder-ausweis-designer .paper-shell{
  padding:18px;
  background:#f7f9fb;
}
.kinder-ausweis-designer #paper{
  width:900px;
  max-width:100%;
  aspect-ratio:85.6/53.98;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
}
.kinder-ausweis-designer #frameOuter,
.kinder-ausweis-designer #frameInner,
.kinder-ausweis-designer #cornerA,
.kinder-ausweis-designer #cornerB{
  display:none!important;
}
.kinder-ausweis-designer .template-preview{
  height:auto;
  aspect-ratio:85.6/53.98;
  background-size:100% 100%!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  border-radius:8px;
}
.kinder-ausweis-designer .template-preview:after{display:none!important}

/* Nur STARTPOSITIONEN. Kein !important bei left/top/width/font-size. */
.kinder-ausweis-designer #titleText{
  left:47%; top:12%; width:40%;
  font-size:20px; line-height:1.05; text-align:left;
}
.kinder-ausweis-designer #introText{
  left:47%; top:25%; width:40%;
  font-size:11px; line-height:1.2; text-align:left;
}
.kinder-ausweis-designer #nameText{
  left:47%; top:30%; width:40%;
  font-size:19px; line-height:1.1; text-align:left;
}
.kinder-ausweis-designer #bodyText{
  left:47%; top:43%; width:40%;
  font-size:12px; line-height:1.25; text-align:left;
}
.kinder-ausweis-designer #dateText{
  left:47%; top:67%; width:18%;
  font-size:10px; line-height:1.15; text-align:left;
  border-top:0; padding-top:0;
}
.kinder-ausweis-designer #signText{
  left:68%; top:67%; width:18%;
  font-size:10px; line-height:1.15; text-align:left;
  border-top:0; padding-top:0;
}

.kinder-ausweis-designer .template-grid{grid-template-columns:1fr 1fr}
.kinder-ausweis-designer .template-card{height:auto;min-height:120px}
.kinder-ausweis-designer .asset-layer{overflow:hidden!important}

.pdf-layout-box{
  margin:16px 0 18px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#f8fafc;
}
.pdf-layout-box strong{display:block;margin-bottom:8px;color:var(--navy)}
.pdf-layout-box label{display:block;margin:7px 0;cursor:pointer}
.pdf-layout-box input{margin-right:7px}
.pdf-layout-box small{display:block;margin-top:8px;color:var(--muted);line-height:1.4}