/* ═══════════════════════════════════════════════════════════════════
 * qr-generator.css — Tool-spezifische Styles für QR Generator
 *
 * SCOPE:
 *   Wird nur auf qr-generator.php geladen, NACH main-vhc.css
 *   und tools.css.
 *
 * NICHT HIER:
 *   - Projektweite Styles (Header, Footer, Bug-Modal)  → /main-vhc.css
 *   - Tool-gemeinsame Styles                           → /tools/tools.css
 * ═══════════════════════════════════════════════════════════════════ */

body.tool-page main { flex:1; position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; padding:36px 20px 52px; }
.tool-wrap { width:100%; max-width:1100px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto; gap:20px; align-items:start; }
.tool-left { display:flex; flex-direction:column; gap:20px; grid-column:1; grid-row:1/4; }
.tool-bottom { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch; }
.tool-right { grid-column:2; grid-row:1/4; position:sticky; top:24px; }
.panel { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:32px 32px 28px; position:relative; }
.panel::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,var(--neon1),var(--neon3),transparent); }
.panel-title { font-family:'Orbitron',monospace; font-size:0.65rem; letter-spacing:5px; text-transform:uppercase; color:var(--neon1); margin-bottom:24px; display:flex; align-items:center; gap:10px; }
.panel-title::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--border),transparent); }
.qr-input { width:100%; background:#060a14; border:1px solid var(--border); border-radius:6px; color:var(--text); font-family:'Exo 2',sans-serif; font-size:0.92rem; padding:14px 16px; resize:vertical; min-height:96px; transition:border-color 0.2s,box-shadow 0.2s; outline:none; line-height:1.5; }
.qr-input:focus { border-color:var(--neon1); box-shadow:0 0 16px rgba(0,245,255,0.12); }
.qr-input::placeholder { color:var(--muted); font-style:italic; }
.char-count { margin-top:6px; font-family:'Orbitron',monospace; font-size:0.55rem; letter-spacing:2px; color:var(--muted); text-align:right; text-transform:uppercase; }
.char-count.warn { color:#ffaa00; }
.char-count.error { color:var(--neon2); }
.options-row { display:flex; flex-direction:column; gap:28px; }
.option-group { display:flex; flex-direction:column; gap:10px; }
.option-label { font-family:'Orbitron',monospace; font-size:0.6rem; letter-spacing:3px; text-transform:uppercase; color:var(--muted); }
.btn-group { display:flex; gap:6px; flex-wrap:nowrap; }
.opt-btn { background:transparent; border:1px solid var(--border); border-radius:4px; color:var(--muted); font-family:'Orbitron',monospace; font-size:0.65rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:10px 18px; cursor:pointer; transition:all 0.18s; }
.opt-btn:hover { color:var(--neon1); border-color:var(--neon1); box-shadow:0 0 10px rgba(0,245,255,0.18); }
.opt-btn.active { color:var(--bg); background:var(--neon1); border-color:var(--neon1); box-shadow:0 0 16px rgba(0,245,255,0.35); }
.ec-hint { font-family:'Exo 2',sans-serif; font-size:0.7rem; color:var(--muted); line-height:1.4; height:2.9em; overflow:hidden; }
.ec-hint strong { color:var(--neon1); font-family:'Orbitron',monospace; font-size:0.62rem; letter-spacing:1px; }
.qr-panel { display:block; }
.qr-panel .qr-panel-inner { visibility:hidden; }
.qr-panel.visible .qr-panel-inner { visibility:visible; }
.qr-panel-inner { display:flex; flex-direction:column; align-items:center; gap:20px; }
.qr-canvas-wrap { position:relative; width:100%; aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
.qr-canvas-wrap::before,.qr-canvas-wrap::after { content:''; position:absolute; width:20px; height:20px; z-index:2; pointer-events:none; }
.qr-canvas-wrap::before { top:-2px; left:-2px; border-top:2px solid var(--neon1); border-left:2px solid var(--neon1); }
.qr-canvas-wrap::after { bottom:-2px; right:-2px; border-bottom:2px solid var(--neon2); border-right:2px solid var(--neon2); }
#qrDisplay { display:block; background:#fff; border-radius:4px; }
.output-meta { width:100%; display:flex; flex-direction:column; gap:4px; }
.btn-download-wrap { margin-top:16px; }
.meta-row { display:flex; flex-direction:column; gap:5px; margin-bottom:6px; }
.meta-label { font-family:'Orbitron',monospace; font-size:0.55rem; letter-spacing:3px; text-transform:uppercase; color:var(--muted); }
.meta-value { font-family:'Exo 2',sans-serif; font-size:0.9rem; color:var(--text); word-break:break-all; line-height:1.5; }
.meta-value.highlight { color:var(--neon1); font-family:'Orbitron',monospace; font-size:0.78rem; letter-spacing:1px; }
.btn-download { background:transparent; color:var(--neon4); border:1px solid var(--neon4); border-radius:4px; padding:12px 24px; font-family:'Orbitron',monospace; font-size:0.7rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; cursor:pointer; transition:all 0.2s; position:relative; overflow:hidden; width:100%; margin-top:4px; }
.btn-download::before { content:''; position:absolute; inset:0; background:var(--neon4); opacity:0; transition:opacity 0.2s; }
.btn-download:hover { box-shadow:0 0 22px rgba(0,255,136,0.4); color:var(--bg); }
.btn-download:hover::before { opacity:1; }
.btn-download span { position:relative; z-index:1; }
.btn-download-jpg { color:var(--neon3); border-color:var(--neon3); margin-top:8px; }
.btn-download-jpg::before { background:var(--neon3); }
.btn-download-jpg:hover { box-shadow:0 0 22px rgba(123,47,255,0.4); }
.error-msg { display:none; font-family:'Exo 2',sans-serif; font-size:0.8rem; color:var(--neon2); margin-top:10px; padding:10px 14px; border:1px solid rgba(255,0,110,0.3); border-radius:4px; background:rgba(255,0,110,0.06); }
.error-msg.visible { display:block; }
@media (max-width:600px) { .panel { padding:20px 16px 18px; } .options-row { gap:14px; } }