body {
            font-family: Arial, sans-serif;
            max-width: 650px;
            margin: 30px auto;
        }
        h1 {
            text-align: left;
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-top: 15px;
            font-weight: bold;
        }
        .instructions {
            margin-top: 10px;
            font-weight: normal;
            font-size: 14px;
            line-height: 1.4;
        }
        .radio-group {
            margin-top: 5px;
        }
        .radio-group label {
            display: inline-block;
            margin-right: 10px;
            font-weight: normal;
        }
        textarea {
            width: 100%;
            min-height: 120px;
            padding: 5px;
        }
        input[type="number"] {
            width: 100%;
            padding: 5px;
            font-size: 14px;
        }
        input[type="email"], select.teacher-select, select.class-select {
            width: 60%;
            padding: 5px;
            font-size: 14px;
            text-align: left;
        }
        select.teacher-select, select.class-select {
            background-color: #cce5ff;
            border: 1px solid #339af0;
            border-radius: 4px;
            color: #000;
            padding: 10px;
            font-size: 16px;
        }
        select.teacher-select option, select.class-select option {
            background-color: #cce5ff;
            color: #000;
        }
        button {
            margin-top: 20px;
            padding: 6px 6px;
            font-size: 16px;
            background-color: #6baacb;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #2271c7;
        }


button.link-delete {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font: inherit;
    font-size: 12px;         /* kleiner */
    color: #777;             /* grauer Ton */
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

button.link-delete:hover {
    color: #555;             /* leicht dunkler beim Hover */
    text-decoration: underline;
}



        form {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        
		/* Kleine graue Lösch-Buttons */
		.btn-delete {
		    background-color: #bbb;      /* hellgrau */
		    color: #333;                 /* dunkle Schrift */
		    font-size: 13px;             /* kleiner Text */
		    padding: 3px 8px;            /* kompakter */
		    border: 1px solid #999;      /* leicht abgesetzt */
		    border-radius: 4px;
		    cursor: pointer;
}

.btn-delete:hover {
    background-color: #999;      /* etwas dunkler beim Hover */
    color: #fff;
}



        /* --- Header-Bereich mit Buttons rechts --- */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .header-left img {
            max-width: 650px;
            height: auto;
        }
        .header-right {
            display: flex;
            gap: 10px;
        }
        .header-right a {
            background-color: #6cabcc;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            text-decoration: none;
            font-size: 14px;
            font-weight: bold;
        }
        .header-right a:hover {
            background-color: #0070e0;
        }


    .text-left-important {
        text-align: left !important;
    }


        /* --- Dropdown MENUs --- */
.custom-select {
  width: 16rem;                /* ~256px */
  background-color: #f3f4f6;   /* hellgrau */
  border: 1px solid #d1d5db;   /* grauer Rahmen */
  color: #111827;              /* dunkles Grau für Text */
  font-size: 0.9rem;         /* entspricht text-lg */
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;       /* leicht abgerundet */
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: all 0.15s ease-in-out;
}

.custom-select:hover {
  border-color: #60a5fa;       /* hellblauer Hover */
}

.custom-select:focus {
  outline: none;
  border-color: #3b82f6;       /* blauer Rahmen bei Fokus */
  box-shadow: 0 0 0 2px rgba(59,130,246,0.3);
}



        /* --- Formular neue Lehrpersonen anlegens --- */

.form-input {
  width: 200px;
  height: 42px;            /* gleiche Höhe für alle Inputs */
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 15px;
  box-sizing: border-box;
}
.form-input:focus {
  outline: none;
  border-color: #3b82f6;    /* leicht blauer Rand bei Fokus */
  box-shadow: 0 0 0 2px rgba(59,130,246,0.2);
}


        /* --- Tabelle Details --- */


/* Schrift kleiner machen */
table.feedback-table {
    font-size: 12px;           /* deutlich kleiner */
    line-height: 1.3;
}

/* Tabellenkopf leicht absetzen */
table.feedback-table th {
    font-weight: 600;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Zellen kompakter */
table.feedback-table td {
    padding-top: 4px;
    padding-bottom: 4px;
}



a {
    margin-left: 0px;
    font-family: Arial, sans-serif;
    font-size: 14px;      /* kleiner */
    color: #777;          /* grau */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: #555;          /* etwas dunkler beim Hover */
}



.pw-link {
    margin-left: 30px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #777;
    text-decoration: none;
}

.pw-link:hover {
    text-decoration: underline;
    color: #555;
}


.btn {
    @apply block bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg shadow-md hover:bg-blue-800 transition-transform hover:scale-105;
}

.btn-green {
    @apply bg-green-600 hover:bg-green-700;
}

.btn-red {
    @apply bg-red-600 hover:bg-red-700;
}

.btn-white {
    @apply bg-white text-blue-700 font-semibold hover:bg-gray-200;
}

.text-right-important {
    text-align: right !important;
}


p a {
  font-size: inherit;
  color: #1d4ed8; /* Tailwind Blue 700 */
  text-decoration: underline;
}
p a:hover {
  color: #1e40af; /* etwas dunkler beim Hover */
}