:root {
    --hd-dunkel: #3B3736;
    --hd-gelb: #ffc845;
    --hd-rot: #a50050;
    --hd-blau: #236192;
}

.footer-bar {
    background-color: var(--hd-dunkel) !important;
    color: white !important;
    padding: 30px 0 !important;
    margin-top: 60px !important;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}


.footer-content {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    text-align: center !important;
}

.footer-link {
    color: white;
    text-decoration: none;
    margin: 0 10px;
    transition: color 0.2s;
}

.footer-link:hover {
    color: var(--hd-gelb);
}

.footer-link:focus {
    outline: 2px solid var(--hd-gelb);
    outline-offset: 2px;
}


.quarto-title-block .quarto-title-banner {
  background-image: url(pics/logo-hd.svg);
  background-color: #a50050;
  background-size: 300px;
  background-position: left;
  background-repeat: no-repeat;
  padding-left: 10px;
  background-origin: content-box;
}

.badge-new {
  font-style: italic;
  background-color: #fff3cd;
  color: #856404;
  padding: 0.05rem 0.25rem;
  border-radius: 0.25rem;
  margin-left: 0.25rem;
  font-size: 0.8em;
}



.custom-box {
  border: 2px solid #a50050;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 5px;
  margin-bottom: 30px;
}

.custom-box:hover {
  background-color: #e9ecef; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
  border-color: #8b003d; 
} 

.custom-box-title {
  font-weight: bold;
  font-size: 18px;
  color: #a50050;
  margin-bottom: 0.5px;
  display: block;
}


.sticky-box {
  border: 2px solid #a50050;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 5px;
  margin-bottom: 30px;
}

.sticky-box:hover {
  background-color: #e9ecef; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
  border-color: #8b003d; 
} 

/* Responsive styles for gt tables (horizontal scroll + sticky header and first column) */
.gt_table {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.gt_table table {
  width: max-content; /* allow table to be wider than container so it can be scrolled */
  border-collapse: collapse;
}

/* Sticky header */
.gt_table thead th {
  position: sticky;
  top: 0;
  background: #ffffff; /* ensure header covers cells when sticky */
  z-index: 5;
}

/* Sticky first column (works when first col is a th or td) */
.gt_table tbody th,
.gt_table tbody td:first-child,
.gt_table thead th:first-child {
  position: sticky;
  left: 0;
  background: #ffffff;
  z-index: 4;
}

/* Ensure header cells above first column are above it */
.gt_table thead th:first-child {
  z-index: 6;
}

/* Prevent wrapping where undesirable but allow scrolling */
.gt_table td, .gt_table th {
  white-space: nowrap;
}

/* Mobile adjustments: reduce font-size and allow wrapping for very small screens */
@media (max-width: 480px) {
  .gt_table td, .gt_table th {
    white-space: normal;
    font-size: 0.9rem;
    padding: 0.35rem 0.45rem;
  }
}



@media (max-width: 991px) {
  /* Quarto-TOC mobil verstecken, Button zeigen */
  #TOC { display: none; }
  #TOC.open { display: block !important; position: fixed; left: 0; top: 60px; width: 80%; }
  
  /* Einfacher Toggle-Button */
  .toc-btn {
    display: block !important;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1001;
    background: #a50050;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
  }
}
@media (min-width: 992px) { .toc-btn { display: none !important; } }

/* Desktop: breitere Inhaltsfl�che */
/* Nur der mittlere Inhaltsbereich soll breiter werden */
@media (min-width: 1200px) {
  main.content,
  .page-content,
  .content,
  .quarto-container {
    max-width: 950px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}



@media (max-width: 991px) {
  .quarto-title-block .quarto-title-banner {
    background-image: none !important;
  }
}

@media (max-width: 1200px) {
  .quarto-title-block .quarto-title-banner {
    background-size: 200px;
  }
}