.anschnitt--werkzeug { padding-bottom: clamp(1rem, 2vw, 1.5rem); border-bottom:0; }

.anschnitt--werkzeug + .abschnitt { padding-top: clamp(1rem, 2vw, 1.6rem); }
.anschnitt--werkzeug h1 { max-width: 24ch; font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3.3rem); }
.anschnitt--werkzeug .lead { font-size: 1.2rem; }
.meta li a { color: inherit; text-decoration: none; }

.hinweis{background:var(--c-amber-soft);border:1px solid rgba(232,163,61,.55);
         border-radius:var(--r-kachel);box-shadow:var(--s-weich);
         padding:.85rem 1rem;margin:1.2rem 0 0}
.hinweis h2{margin:0 0 .4rem;font-size:.92rem;font-weight:800;color:var(--c-cornflower-dark);
            letter-spacing:-.01em;text-wrap:balance}
.hinweis p{margin:0 0 .5rem;color:var(--c-ink-soft);font-size:.84rem;line-height:1.5;max-width:100%}
.hinweis p:last-child{margin-bottom:0}
p.hinweis{font-size:.85rem;font-weight:400;line-height:1.5}
p.hinweis b{font-weight:400}

.card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-kachel);
      box-shadow:var(--s-weich);padding:1.35rem;margin:0 0 1.1rem}
.card h2{margin:0 0 .5rem;font-size:1.15rem;font-weight:800;color:var(--c-cornflower-dark);
         letter-spacing:-.01em;text-wrap:balance}
.card p.lead{margin:0 0 1rem;color:var(--c-ink-soft);font-size:1rem}
.card .chips:last-child{margin-bottom:0}

.grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.tool{display:flex;flex-direction:column;gap:.55rem;background:var(--c-surface);
      border:1px solid var(--c-line);border-radius:var(--r-kachel);box-shadow:var(--s-weich);
      padding:1.35rem;color:var(--c-ink);text-decoration:none}
.tool:hover{border-color:var(--c-cornflower);background:var(--c-cornflower-soft);
            text-decoration:none;color:var(--c-ink)}
.tool .ic{font-size:1.5rem;line-height:1;color:var(--c-cornflower-deep)}
.tool h3{margin:0;font-size:1.1rem;font-weight:800}
.tool p{margin:0;color:var(--c-ink-soft);font-size:.97rem}

label{display:block;font-size:.78rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;
      color:var(--c-ink-soft);margin:0 0 .4rem}
input[type=file],select,select[multiple]{width:100%;padding:.7rem;background:var(--c-surface);
      color:var(--c-ink);border:1px solid var(--c-line);border-radius:10px;font:inherit}
input[type=file]:focus,select:focus{border-color:var(--c-cornflower)}
input[type=file]::file-selector-button{background:var(--c-cornflower-deep);color:#fff;border:0;
      border-radius:8px;padding:.5rem .9rem;margin-right:.8rem;font:inherit;font-weight:700;cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--c-cornflower-dark)}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.1rem;margin:0 0 1.1rem}
.row[hidden]{display:none}
button{background:var(--c-cornflower-deep);color:#fff;border:1px solid transparent;border-radius:12px;
      padding:.7rem 1.15rem;font:inherit;font-weight:700;cursor:pointer}
button:hover{background:var(--c-cornflower-dark);color:#fff}
button.sec{background:var(--c-surface);color:var(--c-cornflower-dark);border-color:var(--c-line);font-weight:600}
button.sec:hover{background:var(--c-cornflower-soft);color:var(--c-cornflower-dark)}
button:disabled{opacity:.6;cursor:progress}

.msg{border-radius:var(--r-kachel);padding:.9rem 1.1rem;margin:0 0 1.1rem;font-size:.97rem;border:1px solid}
.msg.ok{background:rgba(47,143,90,.12);border-color:rgba(47,143,90,.45);color:var(--c-ink)}
.msg.bad{background:rgba(191,54,46,.10);border-color:rgba(191,54,46,.45);color:var(--c-ink)}
.msg.warn{background:var(--c-amber-soft);border-color:rgba(232,163,61,.55);color:var(--c-ink)}

table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--c-line);vertical-align:top}
th{color:var(--c-ink-soft);font-weight:750;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}

.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--c-surface);
      border:1px solid var(--c-line);border-radius:20px;padding:.3rem .75rem;font-size:.85rem;color:var(--c-ink-soft)}
.chip b{color:var(--c-ink);font-weight:700}
.sw{display:inline-block;width:13px;height:13px;border-radius:3px;border:1px solid var(--c-line);
    vertical-align:-2px}
.mono{font-family:var(--f-mono);font-size:.9em;background:var(--c-cornflower-soft);
      color:var(--c-cornflower-dark);padding:.1em .45em;border-radius:6px;word-break:break-word}
.note{font-size:.85rem;color:var(--c-ink-soft)}

img.prev{background:repeating-conic-gradient(var(--c-line) 0 25%,var(--c-surface) 0 50%) 50%/16px 16px;
         border:1px solid var(--c-line);border-radius:8px;image-rendering:pixelated}
.prev-row{display:flex;gap:1.1rem;align-items:flex-end;flex-wrap:wrap;margin:0 0 1.1rem}
.prev-row figure{margin:0;text-align:center}
.prev-row figcaption{font-size:.8rem;color:var(--c-ink-soft);margin-top:.4rem}

.end{align-self:end}

h2.mt22{margin-top:1.6rem}
p.note.mt12{margin-top:.9rem}
.mt16{margin-top:1.2rem}
div.note.mt6{margin-top:.45rem}

@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{transition-duration:.001s !important;animation-duration:.001s !important}
}

@media print{
    .kopf,.skip-link,.fuss,.dbg,button,input[type=submit]{display:none !important}
    .card{box-shadow:none;border-color:#999;break-inside:avoid}
}

.qrbox{display:flex;justify-content:center;background:#fff;border:1px solid var(--c-line);border-radius:10px;padding:clamp(.75rem,2vw,1.5rem);margin:0 0 1rem}
.qrbox svg{width:auto;max-width:min(100%,22rem);height:auto;display:block}
a.btn{display:inline-block;padding:.55rem 1rem;border:1px solid var(--c-cornflower-deep);border-radius:8px;background:var(--c-cornflower);color:#fff;text-decoration:none;font-weight:600}
a.btn:hover{background:var(--c-cornflower-deep)}

/* QR-Werkzeug: Zusatzfelder der Vorlage + angezeigter Code-Inhalt */
textarea,input[type=text],input[type=number]{width:100%;padding:.7rem;background:var(--c-surface);color:var(--c-ink);
      border:1px solid var(--c-line);border-radius:10px;font:inherit;font-size:1rem}
textarea:focus,input[type=text]:focus,input[type=number]:focus{border-color:var(--c-cornflower)}
input[type=number]{min-height:2.8rem;box-sizing:border-box}
.qr-extra{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));margin:0 0 1.1rem}
.qr-extra[hidden],[data-qr-main][hidden]{display:none}
pre.payload{background:var(--c-cornflower-soft);border:1px solid var(--c-line);border-radius:10px;
      padding:.8rem 1rem;margin:0 0 1rem;font-family:var(--f-mono);font-size:.85rem;line-height:1.5;
      color:var(--c-cornflower-dark);white-space:pre-wrap;overflow-wrap:anywhere}

/* SVG -> PNG: Vorschau mit Schachbrett, damit Transparenz sichtbar bleibt */
.preview{display:flex;justify-content:center;align-items:center;gap:.5rem;
      padding:1rem;margin:0 0 .2rem;border:1px solid var(--c-line);border-radius:10px;
      background-color:#fff;
      background-image:linear-gradient(45deg,var(--c-kachel-hell) 25%,transparent 25%,transparent 75%,var(--c-kachel-hell) 75%),
                       linear-gradient(45deg,var(--c-kachel-hell) 25%,transparent 25%,transparent 75%,var(--c-kachel-hell) 75%);
      background-size:16px 16px;background-position:0 0,8px 8px}
.preview img{max-width:100%;max-height:420px;width:auto;height:auto}

/* Zurueck-Knopf der Werkzeugseiten (ui.php: page_head, nur /tools/) */
.anschnitt--werkzeug .zurueck{margin:1.4rem 0 0}