:root {
    /* Ihre Praxis-Farben (aus Logo abgeleitet) */
    --brand-orange: #F39200;
    --brand-yellow: #FFD100;
    --brand-grey: #6F7C85;
    --brand-grey-light: #eaedef;
    
    --text-dark: #333333;
    --white: #ffffff;
    --radius: 8px;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

body {
    background-color: #f4f6f8;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* Clean & Professional */
    color: var(--text-dark);
}

/* Header Bereich */
.app-header {
    background-color: var(--white);
    padding: 1rem 2rem;
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
    border-bottom: 4px solid var(--brand-orange); /* Der orange Akzent unten */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-img {
    height: 60px; /* Größe anpassbar */
    width: auto;
}

/* Cards */
.card-custom {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid #e0e0e0;
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

/* Zahnschema Grid */
.tooth-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    max-width: 600px;
    margin: 0 auto;
}

.tooth-btn {
    aspect-ratio: 1;
    border: 1px solid #ccc;
    background: var(--white);
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--brand-grey);
    transition: all 0.2s;
}

.tooth-btn:hover { border-color: var(--brand-orange); color: var(--brand-orange); }
.tooth-btn.active { background-color: var(--brand-orange); color: var(--white); border-color: var(--brand-orange); }
.tooth-btn.done { 
    background-color: var(--brand-grey); 
    color: var(--white); 
    border-color: var(--brand-grey); 
    font-weight: bold;
}

/* Spezielle Buttons */
.btn-praxis-primary {
    background-color: var(--brand-orange);
    color: white;
    border: none;
    font-weight: 600;
}
.btn-praxis-primary:hover { background-color: #d68000; color: white; }

.btn-praxis-secondary {
    background-color: var(--brand-grey);
    color: white;
    border: none;
}
.btn-praxis-secondary:hover { background-color: #5a656d; color: white; }

/* Bereichs-Buttons (MH, Paro...) */
.btn-general { 
    width: 100%; 
    margin-bottom: 4px; 
    font-weight: 500; 
    border: 1px solid #dee2e6; 
    color: var(--brand-grey);
}
.btn-general:hover { 
    border-color: var(--brand-yellow); 
    background: #fffdf0; 
    color: var(--brand-orange); 
}
.btn-general.done {
    background-color: var(--brand-grey-light);
    color: var(--brand-grey);
    border-color: var(--brand-grey);
    font-weight: bold;
}

/* Therapie Items */
.therapy-item { border: 1px solid #eee; transition: 0.2s; }
.therapy-item:hover { border-color: var(--brand-yellow); background: #fffff5; }

/* Dashboard Tabelle */
.table-custom th { color: var(--brand-grey); font-weight: 600; }
.status-chk { transform: scale(1.3); cursor: pointer; accent-color: var(--brand-orange); }