/* Allgemeine Stile */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
}

h1 {
    font-size: 2rem;
    text-align: center;
    margin: 20px 0;
    color: #2E64FE;
}

p {
    text-align: center;
    font-size: 1rem;
}

/* Tabelle */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px auto;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
	border: none;
}

.mittig-container table{
	width: 80%;
}


thead th {
    background-color: #2E64FE;
    color: white;
	border: 1px solid #ffffff;
	margin:0px;
	padding: 10px;
    text-align: left;
    font-size: 1rem;
	position: sticky;
	top: 0;
}

tbody td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr:hover {
    background-color: #f1f1f1;
}


/* Setze eine maximale Breite für die Spalte Sonntag/Feiertag */
.tabelle-gross th:nth-child(2){
    max-width: 150px; /* Maximale Breite für die Spalte Sonntag/Feiertag */
    width: 20%; /*Ein fester prozentualer Anteil */
    white-space: nowrap; /* Kein Zeilenumbruch */
    text-overflow: ellipsis; /* Text abschneiden mit '...' */
    overflow: hidden; /* Überschüssigen Text verstecken */
}

/* Die restlichen Spalten dynamisch anpassen */
.tabelle-gross th:not(:nth-child(1)):not(:nth-child(2)),
.tabelle-gross td:not(:nth-child(1)):not(:nth-child(2)) {
    width: auto; /* Dynamische Breite für Orts-Spalten */
}

.tabelle-klein th, .tabelle-klein td{
	width: 50%;
}

/* Input-Felder innerhalb von Ortszellen besser skalieren */
.inhaltsfeld {
    width: 95%; /* Breite anpassen, damit die Zelle nicht überläuft */
    padding: 2px; /* Innenabstand für bessere Lesbarkeit */
}

.inhaltsfeld:focus {
    outline: none;
    border-bottom: 1px solid #2E64FE;
}

/* Eingabefelder verschmelzen mit Zellen */
.inhaltsfeld {
    width: 100%;
    padding: 0px;
    border: none;
    background: none;
    font-size: 1rem;
	outline: none;
	border-color: none;
	box-sizing: border-box;
	autocomplete:off;
}

/* Box-Model korrekt einstellen */
.inhaltsfeld::-webkit-input-placeholder,
.inhaltsfeld::-moz-placeholder,
.inhaltsfeld:-ms-input-placeholder,
.inhaltsfeld::placeholder {
    color: #a9a9a9;
    opacity: 1; /* Konsistente Darstellung */
}

.inhalt-cell:has(input[type="text"]):hover {
    outline: none;
    background-color: #f1f1f1;
	border: none;
	border-bottom: 1px solid #ddd;
	z-index:999;
	position:absolute;
	width: 30%;
}

.mittig-container{
	text-align:center;
}
.benutzerfeld, .anmeldefeld, input[type="email"]{
	height: 2rem;
	font-size:1rem;
	margin: 0.5rem;
	width:30%;
	border: 2px solid #848484;
	width: 200px;
}

select{
	height: 2rem;
	font-size:1rem;
	margin: 0.5rem;
	width:30%;
	border: 2px solid #848484;
	width: 200px;
}

li{
	list-style-type: none;
}

.menu{
		margin: 0 auto;
		text-align:center;
		width:100%;
		}

/* Buttons */
button, a.button, a{
    display: inline-block;
    padding: 10px 20px;
    font-size: 1rem;
    color: white;
    background-color: #A4A4A4;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    margin: 10px auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

button:hover, a.button:hover,a:hover{
    background-color: #BDBDBD;
}

a.button {
    color: white;
}

.loeschen-button{
	font-size: 0.6rem;
	padding: 5px 10px;
}

/* Für Edge: Verhindere zusätzliche Rendering-Striche */
.inhaltsfeld::-ms-clear {
    display: none; /* Entfernt den Standard-Lösch-Button in Edge */
}

.inhaltsfeld {
    -webkit-appearance: none; /* Deaktiviert Standard-Darstellung */
    -moz-appearance: none;
    appearance: none;
}


/* Mobilfreundlichkeit */
@media (max-width: 768px) {
    h1 {
        font-size: 1.5rem;
    }

    table {
        font-size: 0.9rem;
    }

    tbody td {
        padding: 8px;
    }

    button, a.button {
        padding: 8px 15px;
        font-size: 0.9rem;
    }
}