/* Kommentar-Felder Styling */
textarea[class*="-comment"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    resize: vertical;
    min-height: 50px;
    background: #fafafa;
    transition: all 0.3s ease;
}

textarea[class*="-comment"]:focus {
    outline: none;
    border-color: #23d5ab;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(35, 213, 171, 0.1);
}

textarea[class*="-comment"]::placeholder {
    color: #999;
    font-style: italic;
}

/* Responsive Design für Kommentar-Felder */
@media (max-width: 768px) {
    textarea[class*="-comment"] {
        font-size: 16px; /* Verhindert Zoom auf iOS */
    }
}

/* Kommentar-Label Styling */
label:has(+ textarea[class*="-comment"]) {
    color: #666;
    font-size: 13px;
    font-weight: 500;
}

/* Spezielle Styles für verschiedene Scopes */
.scope-1 textarea[class*="-comment"] {
    border-left: 3px solid #23d5ab;
}

.scope-2 textarea[class*="-comment"] {
    border-left: 3px solid #23a6d5;
}

.scope-3 textarea[class*="-comment"] {
    border-left: 3px solid #fcd34d;
}

/* Kommentar-Icon */
.form-group:has(textarea[class*="-comment"]) label::before {
    content: "💬 ";
    font-size: 12px;
    opacity: 0.7;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    textarea[class*="-comment"] {
        background: #2a2a2a;
        border-color: rgba(255,255,255,0.2);
        color: #fff;
    }
    
    textarea[class*="-comment"]:focus {
        background: #333;
        border-color: #00ffd5;
    }
    
    textarea[class*="-comment"]::placeholder {
        color: #aaa;
    }
}