/* styles_col.css */
body {
    background-color: #fdf6e3; /* Sandfarbener Hintergrund */
    font-family: Arial, sans-serif;
    color: #333;
	padding-top: 70px; /* oder genug, um den fixen Header zu kompensieren */
}

#header, #footer {
    background-color: #eee8d5; /* Etwas dunklerer Sandton für Kopf- und Fußzeile */
    padding: 10px 0;
    text-align: center;
}

#link-area a, button {
    background-color: #b58900; /* Goldener Sandton für Links und Buttons */
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

#link-area a:hover, button:hover {
    background-color: #cb4b16; /* Dunklerer Sandton beim Hover */
}

#link-area ul {
    list-style: none; /* Entfernt Listensymbole */
    padding: 0;
    margin: 0;
    background-color: #f3f3f3; /* Hintergrundfarbe für die gesamte Linkleiste */
    text-align: left;
}

#link-area li {
    display: inline-block; /* Stellt die Links nebeneinander dar */
    margin-right: 20px; /* Fügt etwas Abstand zwischen den Links hinzu */
}

#link-area li a {
    text-decoration: none; /* Entfernt die Unterstreichung */
    color: #333; /* Dunkelgraue Textfarbe */
    padding: 10px 15px; /* Padding für bessere Klickbarkeit und optische Erscheinung */
    display: block;
}

#link-area li a:hover {
    background-color: #b58900; /* Farbänderung beim Hover */
    color: white;
}

/* Dropdown-Menü für Sublinks */
#link-area ul li ul {
    display: none; /* Versteckt die Sublink-Liste standardmäßig */
    position: absolute; /* Positioniert das Dropdown absolut zum übergeordneten Element */
    background-color: #f9f9f9; /* Hintergrundfarbe für Sublinks */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Schatten für Dropdown */
    z-index: 1; /* Stellt sicher, dass das Dropdown über anderen Elementen angezeigt wird */
}

#link-area ul li:hover ul {
    display: block; /* Zeigt die Sublink-Liste beim Hover über einem Link an */
}

#link-area ul li ul li {
    display: block; /* Stellt Sublinks untereinander dar */
}

#link-area .active-link {
    background-color: #add8e6; /* Hellblau */
    color: #ffffff; /* Weiße Schrift */
    border-radius: 5px; /* Abgerundete Ecken */
    padding: 10px 15px; /* Gleiches Padding wie andere Links für Konsistenz */
}

#link-area a.active-link:hover {
    background-color: #8ac4d0; /* Etwas dunkleres Blau beim Hover */
    color: #ffffff;
}



input[type="text"], input[type="password"], textarea {
    background-color: #eee;
    border: 1px solid #ddd;
    padding: 8px;
    width: 200px;
    margin-top: 5px;
}

input[type="submit"] {
    background-color: #b58900; /* Stil für Submit-Button */
    color: white;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #cb4b16;
}

#main a {
    display: inline-block;
    background-color: #cb4b16; /* Dunkler Sandton */
    color: white;
    padding: 10px 20px;
    margin-top: 10px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.2s, transform 0.2s;
}

#main a:hover {
    background-color: #b58900; /* Hellerer Sandton beim Hover */
    transform: scale(1.05); /* Leichte Vergrößerung beim Hover */
}

.action-content {
    padding: 20px;
    margin: 20px;
    background-color: #f9f9f9; /* Leichter Hintergrund für den Inhalt */
    border: 1px solid #ccc; /* Feine Linie um den Inhalt */
    border-radius: 5px; /* Leicht abgerundete Ecken */
}

.action-content h1 {
    color: #333; /* Dunkle Schriftfarbe für Überschriften */
    padding-bottom: 10px; /* Abstand unter der Überschrift */
}

.action-content p {
    color: #666; /* Mitteldunkle Schriftfarbe für Paragraphen */
    line-height: 1.6; /* Zeilenhöhe für bessere Lesbarkeit */
}

.input-table {
    width: 80%; /* Passt die Breite der Tabelle an */
    margin: 20px auto; /* Zentriert die Tabelle horizontal und fügt oben und unten Abstand hinzu */
}

/* Spezifische Stile für die Text Parser-Seite */
.parser-table {
    width: 100%;
    border-collapse: collapse; /* Sorgt für das Zusammenfallen von Tabellenrändern */
}

.parser-td {
    padding: 10px;
    vertical-align: top;
}

#text_raw {
    width: 100%; /* Maximale Breite ausnutzen */
    height: 200px; /* Ausreichend Höhe für die Texteingabe */
    resize: vertical; /* Erlaubt vertikales Resizing */
    margin-bottom: 10px; /* Abstand nach unten */
}

#output {
    background-color: #f0f0f0; /* Leichtes Grau für bessere Lesbarkeit */
    padding: 10px;
    border: 1px solid #ccc; /* Feine Linie für Struktur */
    min-height: 200px; /* Mindesthöhe, um Konsistenz zu gewährleisten */
    word-wrap: break-word; /* Umbruch langer Wörter erlauben */
}

.parser-button {
    padding: 10px 20px;
    background-color: #b58900; /* Farbthema anpassen */
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.parser-button:hover {
    background-color: #cb4b16; /* Dunkler Ton beim Hover */
}

/* Stile für Select-Felder und Input-Felder im Parser */
.parser-select, .parser-input {
    padding: 8px;
    margin-bottom: 10px; /* Bietet Abstand zwischen den Feldern */
    width: 100%; /* Nutzt die volle Breite der Zelle */
    box-sizing: border-box; /* Berücksichtigt Padding und Border im width */
    background-color: #fdf6e3; /* Sandfarbener Hintergrund für Eingabefelder */
    border: 1px solid #ccc; /* Feine Linie für leichte Abgrenzung */
    border-radius: 4px; /* Leicht gerundete Ecken */
}

.parser-select:focus, .parser-input:focus {
    border-color: #b58900; /* Goldener Sandton bei Fokus */
    outline: none; /* Entfernt den Browser-Standard-Fokusrahmen */
}

/* Anpassungen für die Hover-Effekte */
.parser-select:hover, .parser-input:hover {
    background-color: #eee8d5; /* Etwas dunklerer Sandton beim Hover */
}

/* Spezifischer Stil für das Output-Feld */
#output {
    background-color: #f0f0f0;
    padding: 10px;
    min-height: 200px; /* Mindesthöhe für bessere Darstellung */
    word-wrap: break-word; /* Umbruch langer Wörter erlauben */
    overflow-wrap: break-word; /* Umbruch bei langen Wörtern ohne Leerzeichen */
    white-space: pre-wrap; /* Beibehält Leerzeichen und Umbrüche wie im Originaltext */
    border: 1px solid #ccc;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* Leichter Schatten für besseren visuellen Effekt */
    width: 100%; /* Sicherstellen, dass die Breite der Spalte genutzt wird */
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto; /* Zellenbreite wird basierend auf der Breite der Tabelle und nicht des Inhalts bestimmt */
}

.data-table th, .data-table td {
    padding: 8px;
    border: 1px solid #ccc;
    vertical-align: top;
    white-space: nowrap; /* Verhindert Umbruch in den Zellen */
}

.data-table th.text-header, .data-table td.text-cell {
    white-space: normal; /* Erlaubt Umbrüche in der Textspalte */
}

.data-table td.text-cell div {
    max-height: 150px;
    overflow-y: auto;
    word-wrap: break-word;
    width: 100%; /* Nutzt die volle Breite der Zelle */
}