/* =============================================
   1. Grundlegende Einstellungen & Dark-Theme
   ============================================= */
   html,
   body {
     height: 100%;
     margin: 0;
     padding: 0;
   }
   
   html {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     box-sizing: border-box;
   }
   
   *, *::before, *::after {
     box-sizing: inherit;
   }
   
   body {
     display: flex;
     flex-direction: column;
     background: linear-gradient(135deg, #1f1c2c 0%, #302b63 50%, #24243e 100%) no-repeat center center fixed;
     background-size: cover;
     font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
     font-size: 16px;
     line-height: 1.5;
     color: #f8f9fa;
   }
   
   :root[data-bs-theme="dark"] {
     --bs-body-bg: transparent;
     --bs-body-color: #f8f9fa;
     --bs-card-bg: rgba(35, 37, 38, 0.7);
     --bs-card-color: #f8f9fa;
     --bs-card-border-color: rgba(255,255,255,0.1);
     --bs-border-color-translucent: rgba(255,255,255,0.15);
   }
   
   /* =============================================
      2. Grund-Typografie (Headings, Absätze, Links)
      ============================================= */
   p {
     margin-top: 0;
     margin-bottom: 2rem;
     line-height: 1.7rem;
   }
   
   h1, h2, h3, h4, h5, h6 {
     margin-top: 1rem;
     margin-bottom: 0.5rem;
     font-weight: 700;
     line-height: 1.25;
     color: #f8f9fa;
   }
   
   a {
     color: #ffb347;
     text-decoration: none;
     transition: color 0.3s ease;
   }
   
   a:hover, a:focus {
     color: #ff7e00;
   }

   code {
    background: #1f1c2c;
    padding: 0.2rem;
    /* margin-top: 0.5rem; */
    /* margin-bottom: 0.5rem; */
    border-radius: 0.4rem;
    color:#fff;
   }
   .wp-block-code {
    margin: 1rem;
    background:#1f1c2c;
    padding: 1rem;
    border-radius: 0.5rem;
   }

   pre {
    position: relative;
    padding: 1.5rem; /* z.B. etwas mehr Padding, damit der Button nicht über dem Text sitzt */
  }
  
   pre button.copy-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    /* Optionale Gestaltungen */
    background: #1b1b1b; /* oder was du willst */
    border: none;
    padding: 0.1rem 0.2rem;
    border-radius:0.1rem;
    cursor: pointer;
    font-size: 0.7rem;
    float:right;
    user-select: none; /* verhindert Selektieren/Kopieren des Button-Texts */
  }
   
   /* =============================================
      3. (MENÜ-Styles entfernt – jetzt in menu.css)
      ============================================= */
   
   /* =============================================
      4. Hauptinhalt / Animation
      ============================================= */
   #mainContent {
     flex: 1 0 auto;
     animation: fadeIn 0.7s ease-out;
   }
   
   @keyframes fadeIn {
     from {
       opacity: 0;
       transform: translateY(10px);
     }
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
   
   /* =============================================
      5. Karten (Cards)
      ============================================= */
   .card {
     /* <-- neu */
     position: relative; /* Damit der z-index greifen kann */
     z-index: 1;         /* Liegt "unter" der Navbar */
   
     border-radius: 0.75rem;
     border: 1px solid var(--bs-card-border-color);
     background-color: var(--bs-card-bg);
     backdrop-filter: blur(6px);
     box-shadow: 0 4px 12px rgba(0,0,0,0.3);
     color: var(--bs-card-color);
   }
   .card-header {
     border-bottom: 1px solid var(--bs-border-color-translucent);
     font-weight: 600;
     font-size: 1rem;
   }
   
   /* =============================================
      6. Toast-Container
      ============================================= */
   #toastContainer {
     position: fixed;
     top: 1rem;
     right: 1rem;
     z-index: 1;
   }
   #scrollToTopBtn button {
     box-shadow: 0 2px 6px rgba(0,0,0,0.5);
   }
   #scrollToTopBtn button:hover {
     opacity: 0.85;
   }
   
   /* =============================================
      7. (Dropdown-Menüs entfernt – jetzt in menu.css)
      ============================================= */
   
   /* =============================================
      8. (Mega-Menü entfernt – jetzt in menu.css)
      ============================================= */
   
   /* =============================================
      9. Tabellen-Styles (Dark / Transparenz)
      ============================================= */
   .table {
     border-collapse: separate;
     border-spacing: 0;
     width: 100%;
     margin-bottom: 1rem;
     font-size: 0.95rem;
     line-height: 1.4;
   }
   .table th,
   .table td {
     vertical-align: middle;
     padding: 0.75rem;
     border-top: 1px solid var(--bs-border-color-translucent);
   }
   .table thead th {
     border-bottom: 2px solid var(--bs-border-color-translucent);
     text-transform: uppercase;
     font-weight: 600;
     letter-spacing: 0.03rem;
   }
   .table-dark {
     background-color: var(--bs-card-bg);
     color: var(--bs-body-color);
     border: 1px solid var(--bs-border-color-translucent);
     border-radius: 0.75rem;
     box-shadow: 0 4px 12px rgba(0,0,0,0.3);
   }
   .table-dark th {
     background-color: rgba(50, 50, 50, 0.85);
     color: var(--bs-body-color);
   }
   .table-dark td {
     background-color: transparent;
     color: var(--bs-body-color);
   }
   .table-striped tbody tr:nth-of-type(odd) {
     background-color: rgba(255, 255, 255, 0.03);
   }
   .table-dark.table-striped tbody tr:nth-of-type(odd) {
     background-color: rgba(255, 255, 255, 0.04);
   }
   .table-hover tbody tr:hover {
     background-color: rgba(255, 255, 255, 0.05);
   }
   .table-dark.table-hover tbody tr:hover {
     background-color: rgba(255, 255, 255, 0.07);
   }
   .table-bordered {
     border: 1px solid var(--bs-border-color-translucent);
     border-radius: 5px;
   }
   .table-responsive {
     overflow: auto;
     margin-bottom: 1.5rem;
   }
   .table .btn-primary {
     background-color: #5757f9;
     border: none;
     font-weight: 500;
     transition: background-color 0.3s;
   }
   .table .btn-primary:hover {
     background-color: #3a3af2;
   }
   
   /* =============================================
      10. Karten-Styles (bg-dark)
      ============================================= */
   .card.bg-dark {
     background-color: var(--bs-card-bg) !important;
     color: var(--bs-body-color) !important;
     border: 1px solid var(--bs-border-color-translucent);
     opacity: 0.95;
   }
   .card.bg-dark .card-title {
     font-weight: 600;
   }
   .card.bg-dark .card-text {
     color: #dadada;
   }

   .bg-dark {
    --bs-bg-opacity: 1;
    background-color: rgb(33 37 41 / 50%) !important;
    margin: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid #ffffff20;
   }
   
   /* =============================================
      11. Formularelemente (Select)
      ============================================= */
   .form-select {
     background-color: #fff;
     color: #000;
   }
   .form-select:focus {
     background-color: #fff;
     color: #000;
   }
   
   /* =============================================
      12. Footer
      ============================================= */
   .footer {
     flex-shrink: 0;
     background-color: rgba(0, 0, 0, 0.6);
     backdrop-filter: blur(6px);
     box-shadow: 0 -2px 8px rgba(0,0,0,0.4);
     border-top: 1px solid rgba(255,255,255,0.1);
     color: #fff;
     padding: 1rem;
     text-align: center;
   }
   .footer-menu .footer-nav {
     list-style: none;
     padding-left: 0;
     margin: 0;
     display: inline-block;
   }
   .footer-menu .footer-nav li {
     display: inline-block;
     margin: 0 10px;
   }
   .footer-menu .footer-nav a {
     background: linear-gradient(45deg, #ff6a00, #ee0979);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.05rem;
     position: relative;
     text-decoration: none;
     transition: transform 0.3s ease, color 0.3s ease;
   }
   .footer-menu .footer-nav a:hover {
     transform: translateY(-2px);
   }
   .footer-menu .footer-nav a::after {
     content: "";
     position: absolute;
     left: 15%;
     right: 15%;
     bottom: -2px;
     height: 2px;
     background: #ff6a00;
     transform: scaleX(0);
     transform-origin: center;
     transition: transform 0.3s ease;
   }
   .footer-menu .footer-nav a:hover::after {
     transform: scaleX(1);
   }
   .footer p {
     margin: 0;
     font-size: 0.9rem;
     opacity: 0.9;
   }
   
   /* =============================================
      13. Override Bootstrap-Tabellen-Farben
      ============================================= */
   .table-primary,
   .table-success,
   .table-info,
   .table-warning,
   .table-danger,
   .table-secondary,
   .table-light {
     background-color: var(--bs-card-bg) !important;
     color: var(--bs-body-color) !important;
   }
   .table-primary th,
   .table-success th,
   .table-info th,
   .table-warning th,
   .table-danger th,
   .table-secondary th,
   .table-light th {
     background-color: rgba(50, 50, 50, 0.85) !important;
     color: var(--bs-body-color) !important;
   }
   
   /* Frontpage-Widget */
   .frontpage-widget.widget {
     border-radius: 0.75rem;
     border: 1px solid var(--bs-card-border-color);
     backdrop-filter: blur(6px);
     box-shadow: 0 4px 12px rgba(0,0,0,0.3);
     color: var(--bs-card-color);
     padding: 1rem;
     margin-bottom: 1rem;
   }

/* ---------- INSTALL‑WIZARD TIMELINE ---------- */
#install-wizard ol.timeline {
  position: relative;                 /* Basis für pseudo Element */
}

#install-wizard ol.timeline::before { /* vertikale Hauptlinie */
  content: '';
  position: absolute;
  left: 0;                            /* sitzt unter den Nummern */
  top: 0;
  bottom: 0;
  width: 2px;                         /* Liniendicke */
  background: var(--bs-secondary);    /* nimm Bootstrap‑Farbe oder eigene */
  opacity: .4;                        /* dezenter Look */
}

#install-wizard ol.timeline > li {
  position: relative;                 /* Anker für Querstück */
  padding-left: 1rem;                 /* Abstand Text → Linie */
}

#install-wizard ol.timeline > li::before { /* kleiner Querstrich */
  content: '';
  position: absolute;
  left: -1rem;                        /* verbindet mit Hauptlinie */
  top: .5rem;                         /* vertikal anpassen, .5rem ≈ Zeilenhöhe Nummer */
  width: 1rem;                        /* reicht bis zum Text‑Block */
  height: 2px;
  background: var(--bs-secondary);
  opacity: .6;
}