:root {
  --background-primary: #191205;
  --surface-card:      #4B4646;
  --text-primary:      #E5E9F2;
  --accent-green:      #4E9A5B;
  --accent-blue:       #20B9E5;
  --accent-red:        #C8423A;
  --highlight-gold:    #E5C07B;
}

html {
  position: relative;
  min-height: 100%;
  background-color: var(--background-primary);
}

body {
  padding-top: 56px;   /* Platz für Navbar */
  margin-bottom: 60px; /* Platz für Footer */
  background-color: var(--background-primary);
  color: var(--text-primary);
}
section {
    padding: 150px 0;
}

img {
    max-width: 100%;
}


pre,
code {
    background: #f8f8f8;
    color: #333;
}

pre {
    border-left: 2px solid #ccc;
    padding: 10px;
}

code {
    display: inline-block;
    padding: 0 0.5em;
    line-height: 1.4em;
    border-radius: 3px;
}

table {
    empty-cells: show;
    border: 1px solid #cbcbcb;
    width: 100%;
    font-size: 0.9em;
    margin-bottom: 1rem;
}

thead {
    background-color: #e0e0e0;
    color: #000;
    text-align: left;
    vertical-align: bottom;
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

th,
td {
    padding: 0.5em 1em;
}

h1.title,
h2.title {
    font-size: 2.3rem;
}

blockquote {
    padding: 10px 20px;
    margin: 0 0 20px 20px;
    border-left: 5px solid #eee;
    font-style: italic;
}

/* Navbar */
img.nav-svg-icon {
    width: 1rem;
    height: 1rem;
    padding-bottom: 2px;
}

.nav-link {
  font-size: 1em;
  color: var(--text-primary);
}

.nav-link:hover {
  color: var(--accent-blue);
}

.navbar .nav-link.active {
  color: var(--accent-green) !important;
}

/* Footer */
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    font-size: 0.8em;
    background-color: #9B59B6; 
}

.mini-logo {
    height: 48px;
    padding-bottom: 5px;
}

/* Plugins */
.plugin {
    margin-top: 3rem;
}

.plugin-label {
    font-size: 1em;
    text-transform: uppercase;
}

.plugin ul {
    list-style: none;
    padding: 0 0 0 10px;
}

.bi {
    margin-right: .5rem !important;
}

/* Styling für den aktiven Menüpunkt mit dem Pfeil */
/* Setzen Sie relative Positionierung auf den Link selbst */
.navbar-nav .nav-item.active .nav-link {
    position: relative; 
    padding-left: 45px; /* Erhöhen Sie den linken Abstand, um Platz für den Pfeil zu schaffen */
}

.navbar-nav .nav-item.active .nav-link::before {
    content: '';
    position: absolute;
    
    /* Positionierung des Pfeils links vom Text */
    width: 30px;         /* Breite des Pfeils */
    height: 30px;        /* Höhe des Pfeils */
    top: 50%;            /* Vertikal zentriert */
    left: 10px;          /* Abstand vom linken Rand des Links */
    transform: translateY(-50%); /* Korrigiert die vertikale Zentrierung */

    background-image: url('../img/Tap2.png'); /* Pfad zum Bild, von der CSS-Datei aus gesehen */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.custom-navbar {
    background-color: #9B59B6 !important;
}

/* Karten / Panels */
.card {
  border-radius: 0.60rem;
  width: 1080px;
  overflow: hidden;
  background-color: var(--surface-card);
  color: var(--text-primary);
  padding-left: 10px;
  padding-right: 5px;
}

.card-img-top {
  width: 1080px;
  height: 380px;
  object-fit: cover;
  object-position: center;
  border-top-left-radius: 0.60rem;
  border-top-right-radius: 0.60rem;
}

/* Überschrift in Gold */
.card-body .title {
  color: #E5C07B !important;
  
}

/* Nickname & Reading Time in Gold */
.card-body .card-subtitle {
  color: #E5C07B !important;
  
}


/* Social Icons in der Sidebar */
ul.social-icons {
    list-style: none;     /* keine Aufzählungszeichen */
    padding: 0;
    margin: 0;
    display: flex;        /* nebeneinander */
    gap: 0;               /* kein zusätzlicher Abstand */
}

ul.social-icons li.nav-item {
    margin: 2px !important; /* überschreibt Bootstrap-Abstände */
    padding: 2px !important;
}

ul.social-icons a.nav-link {
    padding: 2px !important; /* entfernt Innenabstand */
    margin: 2px !important;
    display: inline-flex;  /* sorgt für saubere Ausrichtung */
    align-items: right;
    justify-content: center;
}

.nav-svg-icon {
    width: 24px !important;   /* Icon-Größe anpassen */
    height: 24px !important;
    display: block;
}

/* Optional: Hover-Effekt */
ul.social-icons a.nav-link:hover .nav-svg-icon {
    transform: scale(1.25);
    transition: transform 0.2s ease;
}