/* Grundlegendes Styling */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

/* Container für den Inhalt */
.container {
    width: 100%;
    max-width: 100%; /* Volle Breite */
    margin: 0 auto;
    padding: 0;
}

/* Titelbereich (Header) */
.titel {
    position: relative;
    height: 80px;
    width: 100%;
    background: linear-gradient(000000, #93eaff, #a0e9fa);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
    border-bottom: 1px solid #ccc; /* <- der graue Rahmen unten */
}

/* Hamburger links fest verankert */
.hamburger {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 28px;
    color: white;
    cursor: pointer;
}

/* Titeltext mittig */
@font-face {
  font-family: 'Trenda-Black';
  src: url('fonts/trenda-black.otf') format('opentype');
}

.titel-text {
  font-size: 36px;
  font-family: 'Trenda-Black', sans-serif;
  font-weight: bold;
  color: #ffffff;
  line-height: 1;
}

.polierguide {
  font-size: 150%;
  font-family: 'Trenda-Black', sans-serif;
  color: #93eaff;
}
.polierguide-login {
  font-size: 40px;
  font-family: 'Trenda-Black', sans-serif;
  color: #93eaff;
  margin-top: 60px; /* oder z. B. 60px, je nach Bedarf */
}


a {
  text-decoration: none;
}

/* Inhalt mit Rand */
.content {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box; /* sorgt dafür, dass Padding in der Gesamtbreite berücksichtigt wird */
}



/* Menü wird im Vollbild dargestellt */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    font-weight: bold;
    font-size: 36px;
}


/* Schließen-Button oben rechts */
.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    color: black;
}

/* Mobile-Menü-Einträge */
.mobile-menu-item {
    font-size: 24px;
    margin: 15px 0;
    text-decoration: none;
    color: black;
}

/* Optional: Normales Menü (z.B. .menu) weiter anzeigen auf Desktop */




/* Untermenü Styling */
.untermenu {
    display: flex;
    justify-content: space-between; /* Damit die Menüpunkte nebeneinander sind */
    width: 100%; /* Volle Breite */
    padding: 6px;
    box-sizing: border-box; /* sorgt dafür, dass das Padding nicht über die Gesamtbreite hinausgeht */
}

.untermenu a { /* Falls es sich um Links handelt, die du im Untermenü hast */
font-size: 12px; /* Schriftgröße anpassen */
color: black;    /* Falls du eine andere Farbe wünschst */
text-decoration: none; /* Entfernt die Unterstreichung */
}

.menu-item {
    color: black;
    text-decoration: none;
    font-size: 16px;
    padding: 6px;
    border-radius: 0px;
    transition: background-color 0.3s ease;
    padding-left: 40px;  /* Erhöht den Abstand auf der linken Seite */
padding-right: 40px;  /* Erhöht den Abstand auf der rechten Seite */
}

.menu-item:hover {
    background-color: #D9D9D9; /* Etwas dunkleres Blau beim Hover */
}

/* Styling für die Kapitelüberschrift */
.chapter-header {
    background-color: #cccccc;
    color: white;
    padding: 10px;
    font-size: 18px;
    text-align: left;
    margin-bottom: 20px;
}

/* Inhaltsverzeichnis */
.toc {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-item {
    display: flex;
    align-items: center;
    background-color: white;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 0px; /* optional, setzt alles auf 0 */
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

/* Hover-Effekt */
.toc-item:hover {
    background-color: #f1f1f1;
}

.toc-icon {
    width: 25px; /* Etwas kleineres Symbol */
    height: 25px;
    background-color: #93eaff;
    border-radius: 50%;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 14px; /* Etwas kleinerer Text */
}

.toc-text {
    font-size: 16px;
    color: #333;
}

/*Formulare*/
.inputfeld {
    all: unset;
    width: 100%;
    height: 60px;
    padding: 5px;
    border: 2px solid #ccc;
    border-radius: 10px;
    font-size: 20px;
    color: #333;
    background-color: #ffffff;
    box-sizing: border-box;
}

.styled-button {
    background-color: #f1f1f1; /* Grauer Hintergrund */
    border: 1px solid #ccc; /* Grauer Rand */
    padding: 10px 20px; /* Polsterung, anpassbar */
    text-align: center;
    border-radius: 10px; /* Abgerundete Ecken */
    transition: all 0.3s ease; /* Sanfte Übergänge für Hover-Effekte */
    display: flex; /* Flexbox aktivieren */
    align-items: center; /* Vertikal ausrichten */
    justify-content: center; /* Horizontale Ausrichtung der Inhalte */
    cursor: pointer; /* Zeiger ändert sich bei Hover */
    height: 60px; /* Höhe des Buttons */
    box-sizing: border-box; /* Verhindert, dass Padding die Größe überschreitet */
    width: 150px;
}

.styled-button:hover {
    background-color: #ccc; /* Hintergrundfarbe bei Hover */
    border-color: #999; /* Randfarbe bei Hover */
}
.button-container {
    display: flex;
    justify-content: space-between; /* Platz zwischen den Buttons */
    align-items: center; /* Zentriert die Buttons vertikal */
}

/* Stil für das Dropdown-Menü */
.select-dropdown {
    -webkit-appearance: none;  /* Entfernt den Standard-Pfeil in Webkit-Browsern */
    -moz-appearance: none;     /* Entfernt den Standard-Pfeil in Firefox */
    appearance: none;          /* Entfernt den Standard-Pfeil in allen modernen Browsern */
    padding: 5px;              /* Abstand im Dropdown */
    font-size: 20px;           /* Schriftgröße */
    color: #333;
    border: 2px solid #ccc;    /* Rahmen */
    background-color: white;   /* Hintergrundfarbe */
    width: 100%;               /* Volle Breite */
    border-radius: 10px;        /* Abgerundete Ecken */
    position: relative;        /* Erforderlich für das Positionieren des Pfeils */
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpolyline points=%2210 6 15 11 10 16%22 transform=%22rotate(90 12 12)%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center; /* Pfeil rechts platzieren */
    background-size: 40px;
    line-height: 40px;         /* Vertikale Zentrierung des Textes */
}


/* Verhindert, dass der Pfeil im Dropdown angezeigt wird */
.select-dropdown::-ms-expand {
    display: none;
}
.textarea {
	all: unset;
	width: 100%;
	height: 150px; /* Du kannst die Höhe nach Bedarf anpassen */
	padding: 5px;
	border: 2px solid #ccc;
	border-radius: 10px;
	font-size: 20px;
	color: #333;
	background-color: #ffffff;
	box-sizing: border-box;
	resize: vertical; /* Ermöglicht das Vergrößern/Verkleinern der Höhe */
}

/* Rahmen für Ergebnisse */

.ergebnis {
	border: 2px solid green; /* Grüner Rahmen */
	padding: 10px; /* Abstand zum Text */
	font-family: Arial, sans-serif; /* Schriftart */
	font-size: 16px; /* Schriftgröße */
	color: black; /* Textfarbe */
}
/* Rahmen für Wichtig Infos */

.ergebnisinfo {
	border: 2px solid red; /* Roter Rahmen */
	padding: 10px; /* Abstand zum Text */
	font-family: Arial, sans-serif; /* Schriftart */
	font-size: 16px; /* Schriftgröße */
	color: black; /* Textfarbe */
}
/*Tabelle mit zwischenlinien*/
.textcontainer {
  width: 100%;
  border-collapse: collapse;
}
.textrow {
  display: flex;
  width: 100%;
  border-bottom: 1px solid lightgray; /* hellgraue Linie */
}

.textlinks {
  width: 40%;
  padding: 8px;
  text-align: left;
   font-weight: bold;
}

.subtext {
  width: 60%;
  padding: 8px;
  text-align: left;
}
.textrow2 {
  display: flex;
  width: 100%;
  border-bottom: 1px solid lightgray; /* hellgraue Linie */
}

.textlinks2 {
  width: 70%;
  padding: 8px;
  text-align: left;
   font-weight: bold;
}

.subtext2 {
  width: 30%;
  padding: 8px;
  text-align: right;
}
.textrow3 {
  display: flex;
  width: 100%;
  border-bottom: 1px solid lightgray; /* hellgraue Linie */
}

.textlinks3 {
  width: 50%;
  padding: 8px;
  text-align: center;

}

.subtext3 {
  width: 50%;
  padding: 8px;
  text-align: center;
}
/* Bildumrandung */
.image-container {
	width: 400px; /* Breite des Rahmens */
	margin: 0 auto; /* Zentriert das Element */
	padding: 10px; /* Abstand zwischen Bild und Rahmen */
	border-bottom: 1px solid gray; /* Grauer Rahmen */
	text-align: center; /* Text rechtsbündig */
	margin-bottom: 20px;
}
.image-container img {
	align-content: center;
}
.caption {
	font-size: 8px; /* Textgröße */
	color: black; /* Textfarbe */
	margin-top: 5px; /* Abstand zwischen Bild und Text */
	text-align: right;
}

.tabelle {
     display: grid;
     grid-template-columns: repeat(4, 1fr); /* 4 Spalten */
     gap: 20px; /* Abstand zwischen den Zellen */
     max-width: 1000px;
     margin: 0 auto;
   }

   .zelle {
     text-align: center;
     border: 0px solid #ccc;
     font-size: 10px;
     padding: 10px;
   }

   .zelle img {
     width: 80%; /* Bild nimmt 80% der Zelle ein */
     height: auto;
     display: block;
     margin: 0 auto 10px;
   }

   .zelle p {
     margin: 0;
   }
.copyright{
  text-align: center;
  font-size: 12px;
  color: grey;
}

/* Login */
.login-container {
    width: 100%;
    max-width: 80%;
    margin: 0 auto;
    padding: 24px;
    margin-top: 30px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
/* Responsive Design für Smartphones */
@media (max-width: 600px) {
    .container {
        width: 100%;
        padding: 0;
    }

    /* Die Menüpunkte bleiben nebeneinander, auch auf kleinen Geräten */
    .menu {
        flex-direction: row; /* Sicherstellen, dass die Menüpunkte nebeneinander bleiben */
        justify-content: space-between;
        padding: 10px 0; /* Weniger Padding für das Menü */
    }

    .menu-item {
        margin-right: 10px; /* Ein wenig Abstand zwischen den Punkten */
    }
}