/* Zentrale Farbvariablen (bitte an die Werte der Hauptseite anpassen) */
:root {
    --primary-color: #014511;    /* Hauptfarbe (z.B. Header, Footer, Überschriften) */
    --secondary-color: #ffffff;  /* Sekundärfarbe (z.B. Hintergrund, Texte) */
    --accent-color: #94BA5F;     /* Akzentfarbe (z.B. Buttons, Formularelemente) */
    --link-color: #007acc;       /* Linkfarbe */
    --background-color: #f4f4f4; /* Allgemeine Hintergrundfarbe */
    --text-color: #333;          /* Allgemeine Textfarbe */
    --header-bg: url(images/static/headerbg.gif); /* Header Hintergrundbild */
    --content-bg: url(images/static/contentbg.gif); /* Content Hintergrundbild */
    
    /* Bootstrap-Variablen überschreiben */
    --bs-primary: var(--accent-color);
    --bs-primary-rgb: 148, 186, 95; /* RGB-Wert für #94BA5F */
    
    /* Button-spezifische Variablen */
    --bs-btn-color: var(--secondary-color);
    --bs-btn-bg: var(--accent-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-color: var(--secondary-color);
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-focus-shadow-rgb: 1, 69, 17;
    --bs-btn-active-color: var(--secondary-color);
    --bs-btn-active-bg: var(--primary-color);
    --bs-btn-active-border-color: var(--primary-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--secondary-color);
    --bs-btn-disabled-bg: var(--accent-color);
    --bs-btn-disabled-border-color: var(--primary-color);
}

/* Basis-Styles für den Body */
html, body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-image: url('https://www.asv-wahlstedt.de/s/img/background.jpg?1736414004');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    background-size: cover;
}

/* Überschriften */
h1, h2  {
    color: var(--secondary-color);
    margin: 1rem 0;
}

h3, h4, h5, h6 {
    color: var(--primary-color);
    margin: 1rem 0;
}
/* Standardtexte und Absätze */
p {
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

/* Links */
a {
    color: var(--link-color);
    text-decoration: none;
}
a:hover,
a:focus {
    text-decoration: underline;
}

/* Navigation */
nav {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: 1rem;
}
nav a {
    color: var(--secondary-color);
    margin-right: 1rem;
}

/* Buttons und Formular-Buttons */
button,
input[type="submit"],
input[type="button"],
.btn,
.btn-primary {
    background-color: var(--accent-color);
    color: var(--secondary-color);
    border: 1px solid var(--primary-color);
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
    border-radius: 5px;
    color: var(--secondary-color);
    
}
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover,
.btn-primary:hover {
    background-color: var(--primary-color);
}

/* Bootstrap Button Überschreibungen */
.btn-primary {
    background-color: var(--accent-color) !important;
    color: var(--secondary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--primary-color) !important;
    color: var(--secondary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Formularelemente */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 0.5rem;
    margin: 0.5rem 0;
    border: 1px solid var(--primary-color);
    background-color: var(--secondary-color);
    color: var(--primary-color);
    box-sizing: border-box;
}

/* Tabellen */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}
th, td {
    border: 1px solid var(--primary-color);
    padding: 0.75rem;
    text-align: left;
}
th {
    background-color: var(--primary-color);
    color: var(--primary-color);
}

/* Footer */
footer {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    text-align: center;
    padding: 1rem;
    border-radius: 5px;
    margin: 4rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Utility-Klassen für Flexibilität */
.bg-primary { background-color: var(--primary-color) !important; }
.text-primary { color: var(--primary-color) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.bg-accent { background-color: var(--accent-color) !important; }
.text-accent { color: var(--accent-color) !important; }

/* Allgemeine Stile */
body {
    font-family: Arial, sans-serif;
    background-color: var(--background-color); /* Allgemeine Hintergrundfarbe */
    color: var(--text-color); /* Allgemeine Textfarbe */
}


.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--accent-color); /* Angepasst an die Hintergrundfarbe der Hauptnavigation */
    border-radius: 5px;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th {
    color: var(--primary-color); /* Weißer Text für bessere Lesbarkeit */
}

.table th,
.table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid var(--accent-color); /* Angepasst an die Hintergrundfarbe der Hauptnavigation */
}

.alert-info {
    display: block;
    background-color: var(--accent-color); /* Angepasst an die Hintergrundfarbe der Hauptnavigation */
    color: var (--secondary-color); /* Weißer Text für bessere Lesbarkeit */
    padding: 10px;
    border-radius: 5px;
}

/* Container-Stile */
#container {
    background-image: var(--content-bg);
}

/* Header-Stile */
#header {
    background: var(--primary-color) no-repeat bottom;
    background-image: var(--header-bg);
    border-radius: 5px;
    margin: 4rem;
    padding: 1rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Hauptnavigation-Stile */
#main_nav_container {
    background-color: var(--accent-color);
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: calc(100% - 8rem);
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
    margin-right: auto;
    margin-left: auto;
    border-radius: 5px;
    margin: 4rem;
    padding: 1rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Key Visual-Stile */
#key_visual {
    background: no-repeat;
}

/* Logo-Stile */
#logo {
    background: no-repeat top right;
}

/* Slogan-Stile */
#slogan {
    background-color: var(--primary-color);
}

/* Content-Stile */
main.content {
    background-color: var(--secondary-color);
    border: 1px solid var(--primary-color);
    padding: 1rem;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: 4rem;
}

/* Media Queries für unterschiedliche Bildschirmgrößen */
@media (max-width: 1200px) {
    main.content,
    #header,
    #main_nav_container,
    footer {
        margin: 4rem auto;
        width: 90%;
    }
}

@media (max-width: 992px) {
    main.content,
    #header,
    #main_nav_container,
    footer {
        margin: 1rem auto;
        width: 95%;
    }
}

@media (max-width: 768px) {
    main.content,
    #header,
    #main_nav_container,
    footer {
        margin: 1rem auto;
        width: 100%;
    }
}

/* Mobile Ansicht Verbesserungen */
@media (max-width: 767.98px) {
  /* Kleinere Schrift in Tabellen auf mobilen Geräten */
  .table {
    font-size: 0.85rem;
  }
  
  /* Weniger Padding für Tabellenzellen */
  .table td, .table th {
    padding: 0.5rem 0.3rem;
  }
  
  /* Buttons in Tabellen kleiner machen */
  .table .btn-sm {
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
  }
  
  /* Horizontales Scrollen für Tabellen erlauben */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Tabellen-Layout für bessere Kontrolle über Spaltenbreiten */
.table-fixed {
  table-layout: fixed;
}

/* Spaltenbreiten für spezifische Spalten */
.col-date {
  width: 90px;
}
.col-actions {
  width: 120px;
}
.col-fish {
  width: 100px;
}
.col-size, .col-weight {
  width: 70px;
}