/* Allgemeine Styles für den Body */
body,html {
    font-family: Arial, sans-serif;
    background-color: #f4f7fc;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0;
}

/* Container für das Formular */
.container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 20px;
    margin: 0 auto;
    height: 100%; /* Container nimmt 100% Höhe des Viewports ein */
    overflow-y: auto; /* Scrollen wird aktiviert */

}

/* Überschrift */
h2 {
    margin-bottom: 20px;
    color: #333;
    font-size: 24px;
}

/* Eingabefelder */
input {
    width: 100%;
    padding: 10px;
    margin: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    background-color: #f9f9f9;
}

/* Buttons */
button {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: none;
    border-radius: 5px;
    background-color: #F6277B;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Hover-Effekt für Buttons */
button:hover {
    background-color: #F6277B;
}

/* Nachricht unter dem Formular */
.message {
    margin-top: 20px;
    color: #777;
    font-size: 14px;
}

/* Link-Stil für die Nachricht */
.message a {
    color: #F6277B;
    text-decoration: none;
}

/* Hover-Effekt für den Link */
.message a:hover {
    text-decoration: underline;
}

#scan-info {
    border: 2px solid #F6277B; /* Blauer Rahmen */
    background-color: #f0f8ff; /* Helles Blau für den Hintergrund */
    padding: 15px;
    border-radius: 10px; /* Abgerundete Ecken */
    margin-top: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Schattierung für ein besseres Aussehen */
}

#scan-info p {
    font-size: 16px; /* Grundschriftgröße für den Text */
}

#scan-count {
    font-size: 50px; /* Größere Schriftgröße für den Scan-Zähler */
    font-weight: bold; /* Fetter Text für den Zähler */
    color: #F6277B; /* Blauer Farbton für den Scan-Zähler */
    margin-bottom: 15px;
}

#scan-start-date {
    font-size: 16px; /* Schriftgröße für das Datum */
    color: #555; /* Ein dunklerer Farbton für den Text */
}

#reset-scan-count {
    background-color: #F6277B; /* Blauer Hintergrund für den Button */
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
}

#reset-scan-count:hover {
    background-color: #F6277B; /* Etwas dunklerer Farbton beim Hover */
}



/* Gebündelter Container */
#input-section {
    border: 2px solid #F6277B; /* Blauer Rahmen für den gesamten Bereich */
    padding: 20px;
    border-radius: 10px; /* Abgerundete Ecken */
    background-color: #f0f8ff; /* Heller Hintergrund */
    max-width: 100%; /* Verhindert, dass der Container breiter als nötig wird */
    box-sizing: border-box; /* Sorgt dafür, dass Padding innerhalb der Breite berücksichtigt wird */
    margin-bottom: 30px; /* Größerer Abstand nach unten */
}

/* Überschrift für den gesamten Eingabebereich */
#input-section h2 {
    font-size: 20px;
    color: #F6277B; /* Blaue Farbe für die Überschrift */
    margin-bottom: 15px;
}

/* Radio Buttons Bereich */
#radio-buttons {
    margin-bottom: 30px; /* Größerer Abstand zum nächsten Element */
}

#radio-buttons label {
    font-size: 16px;
    color: #000000; /* Blaue Farbe für die Radio Button Beschriftungen */
    margin-right: 20px;
}

#url-field h3 {
    font-size: 18px;
    color: #F6277B; /* Blaue Farbe für die Überschrift */
    margin-bottom: 10px;
}

#url-field input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box; /* Verhindert, dass das Padding über den Container hinausgeht */
    margin-top: 5px;
    color: #000; /* Schwarze Schriftfarbe für das Eingabefeld */
}


#text-field h3 {
    font-size: 18px;
    color: #F6277B; /* Blaue Farbe für die Überschrift */
    margin-bottom: 10px;
}

#text-field input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box; /* Verhindert, dass das Padding über den Container hinausgeht */
    margin-top: 5px;
    color: #000; /* Schwarze Schriftfarbe für das Eingabefeld */
}

/* Text allgemein im Container */
#input-section {
    color: #000; /* Schwarze Schriftfarbe für den gesamten Text */
}

/* Container für Eingabefelder und Buttons */
#auth {
    width: 100%;
    max-width: 400px;  /* Maximale Breite des Formulars */
    display: flex;
    flex-direction: column;
    gap: 15px;  /* Abstand zwischen den einzelnen Elementen */
}

/* Eingabefelder */
#auth input {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;  /* Stellen sicher, dass die Eingabefelder die volle Breite des Containers nutzen */
    box-sizing: border-box; /* Verhindert, dass die Padding-Werte die Breite überschreiten */
}

/* Buttons */
#auth button {
    padding: 12px;
    font-size: 16px;
    background-color: #F6277B;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;  /* Setzt die Breite auf 100%, sodass die Buttons die gleiche Breite wie die Eingabefelder haben */
    box-sizing: border-box;
}

#auth button:hover {
    background-color: #F6277B; /* Etwas dunkleres Grün beim Hover-Effekt */
}

/* Nachricht unter dem Formular */
.message {
    margin-top: 20px;
    font-size: 14px;
}

/* Link in der Nachricht */
.message a {
    color: #F6277B;
    text-decoration: none;
}

.message a:hover {
    text-decoration: underline;
}