/*!
 * © 2026 SMARTWERK.ART
 * Unauthorised copying prohibited
 */
body { 
    font-family: 'Poppins', sans-serif; 
    background: linear-gradient(135deg, #fbe4f9, #fff0f6);
    padding:30px; 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    color:#4a2f4a;
}

h1 { 
    font-family: 'Poppins', sans-serif;
    font-weight:700; 
    color:#e75480; 
    text-shadow:2px 2px 6px rgba(255, 255, 255, 0.7); 
    margin-bottom:25px;
    font-size:2.8em;
    letter-spacing:1px;
    text-transform: uppercase;
    text-align:center;
}

#controls { 
    display:flex; 
    flex-direction:column; 
    align-items:flex-start; 
    width:100%; 
    max-width:600px; 
    margin-bottom:20px; 
    gap:12px; 
    background:rgba(255,240,250,0.8); 
    padding:25px; 
    border-radius:25px; 
    box-shadow:0 12px 25px rgba(231,84,128,0.2);
    border: 1px solid #ffcce3;
    backdrop-filter: blur(5px);
}

.lineInput { 
    display:flex; 
    align-items:center; 
    gap:12px;
}

input[type="text"], input[type="number"], textarea { 
    padding:10px 15px; 
    border-radius:15px; 
    border:1px solid #e75480; 
    font-size:16px; 
    outline:none;
    background: rgba(255,255,255,0.9);
    transition: all 0.3s ease;
    text-transform: uppercase;
    width: auto;
}

input:focus, textarea:focus { 
    border-color:#ff8cc1; 
    box-shadow:0 0 12px rgba(231,84,128,0.4);
    transform: scale(1.03);
}

textarea[readonly] {
    background: rgba(255,200,220,0.3);
    border: 1px dashed #e75480;
    color: #e75480;
    font-weight: bold;
    cursor: default;
}

button { 
    background:linear-gradient(135deg, #e75480, #ff8cc1); 
    color:white; 
    font-weight:bold; 
    padding:8px 16px; 
    border:none; 
    border-radius:25px; 
    cursor:pointer; 
    transition:all 0.3s ease; 
    box-shadow:0 6px 18px rgba(231,84,128,0.2);
}

button:hover { 
    background:linear-gradient(135deg, #ff8cc1, #e75480); 
    transform:translateY(-3px) scale(1.05); 
    box-shadow:0 10px 25px rgba(231,84,128,0.3);
}

canvas { 
    border-radius:25px; 
    box-shadow:0 12px 35px rgba(231,84,128,0.15); 
    background:rgba(255,255,255,0.9);
    transition: all 0.3s ease;
    max-width: 100%;
    height: auto;
    -webkit-touch-callout: none; 
    -webkit-user-select: none;   
    -khtml-user-select: none;    
    -moz-user-select: none;      
    -ms-user-select: none;       
    user-select: none;           
}

/* Mobile-Optimierungen */
@media (max-width: 768px) {
    body { padding:15px; }
    h1 { font-size:2em; }
    #controls { width:100%; padding:15px; border-radius:20px; }
    .lineInput { flex-direction: column; gap:8px; width:100%; }
    input[type="text"], input[type="number"], textarea { width:100%; font-size:14px; padding:8px 12px; }
    button { padding:6px 12px; font-size:14px; border-radius:20px; }
}

/* Für sehr kleine Geräte */
@media (max-width: 480px) {
    h1 { font-size:1.6em; }
}