code, pre { display: none !important; }

:root {
    --slate-900: #0f172a;
    --slate-800: #1e293b;
    --slate-700: #334155;
    --slate-600: #475569;
    --slate-500: #64748b;
    --slate-300: #cbd5e1;
    --slate-200: #e2e8f0;
    --slate-100: #f1f5f9;
    --slate-50:  #f8fafc;
    
    --accent: #2563eb;
    --danger: #dc2626;
    --success: #15803d;
    --bg: #f8fafc;
    --card: #ffffff;
    --border: #e2e8f0;
}

* { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body { margin: 0; padding: 15px; background: var(--bg); color: var(--slate-900); }
.container { max-width: 1100px; margin: 0 auto; background: var(--card); padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); border: 1px solid var(--border); }

/* Header / Stammdaten */
.doc-header { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 15px; background: var(--slate-100); padding: 14px; border-radius: 8px; margin-bottom: 15px; border: 1px solid var(--border); align-items: start; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group.right-align { text-align: right; align-items: flex-end; }
.form-group label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--slate-600); letter-spacing: 0.5px; }

.form-group input, 
.form-group textarea,
.form-group select,
input[type="number"], 
input[type="text"] { 
    padding: 6px 10px; 
    font-size: 13px; 
    border: 1px solid var(--slate-300); 
    border-radius: 6px; 
    background: #ffffff !important; 
    color: var(--slate-900); 
    resize: vertical;
}

/* Firmen-Branding */
.company-branding { font-size: 11px; font-weight: 700; color: var(--slate-800); margin-bottom: 6px; line-height: 1.3; }

/* Teildächer-Leiste / Tabs */
.roof-tabs-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; background: var(--slate-100); padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border); }
.roof-tab { background: white; border: 1px solid var(--slate-300); padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--slate-700); box-shadow: 0 1px 2px rgba(0,0,0,0.02); }
.roof-tab:hover { background: var(--slate-50); }
.roof-tab.active { background: var(--slate-800); color: white; border-color: var(--slate-800); }
.roof-tab-del { font-size: 11px; color: var(--danger); cursor: pointer; margin-left: 4px; opacity: 0.8; }
.roof-tab-del:hover { opacity: 1; }
.roof-tab.active .roof-tab-del { color: #fca5a5; }

/* Toolbar */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; align-items: center; background: #ffffff; padding: 10px; border-radius: 8px; border: 1px solid var(--border); }
.input-group { display: flex; align-items: center; gap: 6px; }
.input-group label { font-size: 12px; font-weight: 600; color: var(--slate-700); }
input[type="number"] { width: 80px; }

button { padding: 7px 12px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; border-radius: 6px; transition: all 0.2s; display: inline-flex; align-items: center; gap: 5px; }
.btn-dir { background: var(--slate-100); color: var(--slate-800); border: 1px solid var(--slate-300); }
.btn-dir:hover { background: var(--slate-200); }
.btn-primary { background: var(--slate-800); color: white; }
.btn-success { background: var(--success); color: white; }
.btn-secondary { background: var(--slate-500); color: white; }
.btn-add-rect { background: #ea580c; color: white; }

/* Canvas Area mit Karomuster */
.canvas-wrapper { 
    width: 100%; 
    height: 460px; 
    border: 1px solid var(--border); 
    border-radius: 8px; 
    position: relative; 
    overflow: hidden;
    background-color: #ffffff;
    background-image: 
        linear-gradient(to right, #f1f5f9 1px, transparent 1px),
        linear-gradient(to bottom, #f1f5f9 1px, transparent 1px);
    background-size: 20px 20px;
}
svg { width: 100%; height: 100%; user-select: none; background: transparent; }

.point-handle { cursor: move; fill: var(--slate-800); stroke: #ffffff; stroke-width: 0.3; }
.wall-line { stroke: #334155; stroke-width: 0.4px; stroke-linecap: round; cursor: pointer; }

.polyShape { fill: rgba(100, 116, 139, 0.15); stroke: #334155; stroke-width: 0.4; stroke-dasharray: 2 2; }
.cutout-rect { fill: rgba(220, 38, 38, 0.4); stroke: #dc2626; stroke-width: 0.5; cursor: pointer; }
.cutout-delete { fill: #dc2626; font-weight: bold; cursor: pointer; text-anchor: middle; dominant-baseline: central; }

.label-dimension { cursor: pointer; font-family: -apple-system, sans-serif; font-weight: 700; fill: #1e293b; text-anchor: middle; dominant-baseline: auto; }
.label-angle-group { cursor: move; }
.label-angle-text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 600; fill: #334155; text-anchor: middle; dominant-baseline: central; }

/* Result Panel */
.result-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; background: var(--slate-100); padding: 12px 20px; border-radius: 8px; border: 1px solid var(--border); }
.result-container { display: flex; gap: 20px; flex-wrap: wrap; }
.result-item { display: flex; flex-direction: column; }
.result-item .label { font-size: 10px; text-transform: uppercase; color: var(--slate-600); font-weight: 700; letter-spacing: 0.5px; }
.result-item .value { font-size: 18px; font-weight: 800; color: var(--slate-900); }
.result-item .subtext { font-size: 11px; color: var(--slate-600); font-weight: 600; margin-top: 2px; }
.result-item.netto .value { color: var(--success); }
.result-item.kies .value { color: #d97706; }

#printRoofsContainer { display: none; }

/* A4 Druck-Optimierung */
@media print {
    @page { size: A4 portrait; margin: 10mm; }
    html, body { height: auto; padding: 0; background: white; overflow: auto; }
    .container > *:not(#printRoofsContainer):not(.doc-header) { display: none !important; }
    .container { box-shadow: none; border: none; max-width: 100%; padding: 0; margin: 0; }
    
    .doc-header { border: 1px solid #000; background: #fff; padding: 10px; margin-bottom: 10px; grid-template-columns: 1fr 1fr 1.3fr; }
    .form-group input, .form-group textarea, .form-group select { border: none !important; background: transparent !important; padding: 0; font-weight: bold; -webkit-appearance: none; appearance: none; }
    .form-group.right-align input { text-align: right; }
    
    #printRoofsContainer { display: block !important; }
    .print-roof-card { page-break-inside: avoid; border: 1px solid #000; border-radius: 6px; padding: 12px; margin-bottom: 15px; background: #fff; }
    .print-roof-title { font-size: 14px; font-weight: bold; border-bottom: 1px solid #ccc; padding-bottom: 4px; margin-bottom: 8px; color: #000; }
    .print-roof-content { display: flex; gap: 15px; align-items: center; }
    .print-roof-svg { width: 220px; height: 160px; border: 1px solid #ccc; background: #fff; }
    .print-roof-details { font-size: 12px; line-height: 1.5; color: #000; }
    
    .print-summary-box { border: 2px solid #000; padding: 12px; margin-top: 15px; background: #f8fafc; border-radius: 6px; page-break-inside: avoid; }
}