/*
 * Basislayout
 *
 * colors:
 * C1: e3e09f / C2: f6ffb0 / C3: d6f0c1 / C4: 6d9982 / C5: 423e33
 *
 */

 /*
Hauptfarben
Dunkles Anthrazit (Header, Footer, Navigation)
#1F2933

Dunkelgrau / Schiefer (Hintergrund außen)
#3A4A4F

Warmweiß / Creme (Hauptinhalt)
#F4F2EE

🌿 Sekundärfarben
Salbeigrün (aktive Navigation, Akzente)
#7FA39A

Gedämpftes Grau-Beige (Tabellenzeilen / Boxen)
#E6E1D8

Hellgrau (Trennlinien, Cards)
#D1D5DB

✨ Akzentfarben
Gold / Kupfer matt (Logo, Preis, Icons)
#B08D57

Dunkles Gold (Hover / Hervorhebung)
#9A7743

🖋 Textfarben
Primärer Text
#2B2B2B

Sekundärer Text
#5F6B6D

Links
#6F8F88

Link Hover
#B08D57

*/

:root {
  --anthrazit: #1F2933;
  --schiefer: #3A4A4F;
  --warmweiss: #F4F2EE;
  --salbei: #7FA39A;
  --beige: #E6E1D8;
  --grau-hell: #D1D5DB;
  --gold: #B08D57;
  --gold-dunkel: #9A7743;
  --text: #2B2B2B;
  --text-muted: #5F6B6D;
}

body {
  background-color: var(--schiefer);
}

header .container {
  padding-left: 0;
  padding-right: 0;
}

footer .container {
  background-color: var(--warmweiss);
  min-height: 60px;
  padding-top: 10px;
}

.container div.row {
  background-color: var(--warmweiss);
}

#navigation_col {
  background-color: var(--beige);
  padding-top: 10px;
  padding-bottom: 10px;
}

.navbar {
  margin-bottom: 0;
}

.navbar-toggle {
  border: 1px solid var(--text);
}

.navbar-toggle .icon-bar {
  border: 1px solid var(--text);
}

.navbar a {
  color: var(--text);
}

.navbar ul.nav-main li.active >a {
  font-weight: bold;
}

a {
  color: var(--text);
  text-decoration: underline;
}

a:hover {
  color: var(--gold);
}

.nav>li>a {
  padding-top: 0px;
  padding-bottom: 0px;
  text-decoration: none;
}

.nav>li>a:hover,
.nav>li>a:focus {
  background-color: transparent;
}

#headarea {
  height: 140px;
  background: url("../res/graphics/header.png");
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

#headarea h2 {
  color: var(--warmweiss);
}

.imageitem {
  padding-top: 15px;
  padding-bottom: 15px;
}

#accordion ul {
  padding-inline-start: 0;
}


.my-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.my-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.my-30 {
  margin-top: 30px;
  margin-bottom: 30px;
}

table.table-pedigree>tbody>tr>td {
  vertical-align: middle;
}

.table-striped>tbody>tr:nth-of-type(2n+1) {
  background-color: var(--beige);
}

#header_logo {
  height: 60px;
  margin: 0;
}

#headarea div.header-title {
  position: absolute;
  bottom: 15px;
  right: 15px;
}

#headarea div.header-title h2 {
  margin: 0;
  display: flex;
  align-items: flex-end;
  gap: 5px;
}

#nav_banner {
  margin-top: 10px;
  margin-bottom: 10px;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus {
  background-color: var(--schiefer);
  color: var(--beige);
}

#social-icons {
  position: absolute;
  top: 10px;
  right: 15px;
  display: flex;
  gap: 15px;
}

#social-icons a {
  color: var(--warmweiss);
  text-decoration: none;
  font-size: 24px;
  transition: color 0.3s ease;
}

#social-icons a:hover {
  color: var(--gold);
}