/* Verbesserte Padding-Kontrolle für alle Code-Blöcke */
.code pre {
  width: 90%;
  margin: 0;
  margin: 0 auto;
  display: block;
  background-color: #f5f2f0;
  padding: 1em; /* Einheitliches Padding für alle pre-Elemente */
  box-sizing: border-box;
}

.code pre code {
  font-family: monospace;
  font-size: 0.9em !important; /* !important um andere Regeln zu überschreiben */
  line-height: 2em !important;
  background-color: transparent;
  padding: 0;
  white-space: pre;
  tab-size: 4;
}

/* Fixen potenzieller Browser-Inkonsistenzen */
pre, code {
  white-space: pre;
  tab-size: 4;
}

code {
	color: #0099ff;
}

.code {
  max-width: 800px;
  margin: 0 auto;
  margin-bottom: 2rem;
  overflow-x: auto;
}

/* Überschreibe highlight.js-spezifische Stile */
.hljs {
  font-size: 0.8em !important;
  line-height: 2em !important;
}

/*  Container für die Codebox  -<-<-<  */

.shimmer-text {
  color: #fff;
  position: relative;
  display: inline-block;
  background: linear-gradient(
    to right,
    #ffffff 0%,
    #00ffff 20%,
    #ffffff 40%,
    #ffffff 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: shimmer 2s linear infinite;
}

@keyframes shimmer {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 100% 0;
  }
}

/* Tabelle */

.vergleichstabelle {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0.3rem 0.1rem; /* Horizontaler und vertikaler Abstand */
  margin: 2rem 0;
}

.vergleichstabelle th,
.vergleichstabelle td {
  padding: 1rem;
  border: none;
}

.vergleichstabelle thead th {
  font-size: 1.1rem;
  border-bottom: 1px solid #0099ff;
  
}

.vergleichstabelle tbody tr:hover td {
  background-color: #f9f9f9;
}