/* ============================ */
/* Basic Layout
/* ============================ */

body {
  font-family: Arial Narrow, Arial Narrow, Arial, sans-serif, Arial Narrow, Arial, sans-serif;
  min-height: 100vh;
  padding: 0;
  padding-bottom: 60px;
  width: clamp(300px, 95%, 1400px); /* Mindest-, Ideal- und Maximalwert */
  margin: 0 auto;
  background-color: #f1ded3;
}

@media only screen and (max-width: 768px) {
  body {
    font-size: 1.0em;
  }
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  padding: 0px;
  width: auto;
}

@media only screen and (max-width: 768px) {
  header {
    display: block;
    text-align: center;
  }
}

header.header-start {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header-container {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

.header-container {
  display: flex;
  align-items: center;
  margin-bottom: 0px;
}

.back-link, .back-link-txt, .back-link-csv, .back-link-xlsx {
  font-family: Arial Narrow, Arial Narrow, Arial, sans-serif;
  color: #414141;
  background-color: #f1ded3;
  border-radius: 3px;
  padding: 2px 4px 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  font-size: 1.2em;
  text-decoration: none;
  cursor: pointer;
  margin-right: 10px;
}

.back-link:hover, .back-link-txt:hover, .back-link-csv:hover, .back-link-xlsx:hover {
  color: #303030;
  background-color: #eda38a; 
}


#logoContainer img {
  margin-top: 25px;
  width: 225px; /* gewünschte Breite */
  height: auto; /* Höhe passt sich proportional an */
}

.header-start #logoContainer img {
  width: 300px; /* hier gewünschte Breite */
  height: auto;
}


@media only screen and (max-width: 768px) {
  #logoContainer img {
    margin-top: 5px;
    width: 175px; /* gewünschte Breite */
    height: auto; /* Höhe passt sich proportional an */
  }
}

@media only screen and (max-width: 730px) {
    #logoContainer {
        width: 100%;
        margin: 0 auto 10px auto;
    }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(300px, 95%, 1400px);
  border-top: 1px solid #053c96;
  text-align: center;
  display: flex;
  justify-content: space-between;
  padding: 5px;
  font-size: 0.8em;
  flex-direction: row;
  align-items: center;
  z-index: 1000;
  background-color: #f1ded3;
}

.footer div.stats-container {
  display: inline; /* Display in a single line */
}

.footer a,
.footer a:visited {
  color: #000;
  text-decoration: none;
}

@media only screen and (max-width: 730px) {
  .footer {
    position: fixed !important;  /* Kein fixed, sondern normaler Flow */
    bottom: 0 !important;      /* Keine feste Platzierung am unteren Rand */
    left: 0 !important;
    transform: none !important;
    width: 100%;                  /* Breite ggf. anpassen */
    text-align: center;           /* Inhalt zentrieren */
    display: flex;
    justify-content: center;      /* Zentriert den Flexinhalt horizontal */
    align-items: center;          /* Zentriert den Inhalt vertikal */
    padding: 5px;
    font-size: 0.7em;
  }
  
  /* Blende .footer-right komplett aus */
  .footer-right {
    display: none !important;
  }
}

@media only screen and (max-width: 730px) {
  /* nur auf player.html und corpus.html */
  body.player-page .footer,
  body.analysis-page .footer {
    display: none !important;
  }
}

.p {
  margin-bottom: 10px;
}

p {
  font-family: Arial Narrow, Arial Narrow, Arial, sans-serif, Arial Narrow, Arial, sans-serif;
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
}

.narrow {
  font-family: Arial Narrow, Arial Narrow, Arial, sans-serif, Arial Narrow, Arial, sans-serif;
  margin-block-start: 0.0em;
  margin-block-end: 0.0em;
}

.footnote {
  color: #393939;
  font-size: 0.9em;
}

.footnoteMarker {
  color: #0049c8;
  font-weight: bold;
  font-size: 1.0em;
}

.text {
  margin-bottom: 10px;
}

.text-bold-blue {
  font-weight: bold;
  color: #053c96;
}

.text-bold {
  font-weight: bold;
  margin-bottom: 10px;
}

.text-italic {
  font-style:italic;
  font-size: 0.8em;
  color:#404040;
  margin-bottom: 0px;
}

.td-todos {
  width: 40px;
}

td.empty-cell {
  min-width: 10px;
  border-left: 10px solid transparent; /* Erstellt eine transparente Grenze von 20px */
}

#scaled-content {
  transform: scale(0.75);
  transform-origin: top left;
  width: 125%; /* Kompensation für die Skalierung */
}

/* NAVIGATION */

#mainNavigation {
  margin-top: 124px; 
  margin-right: auto; 
}

.header-start #mainNavigation {
  margin: 20px auto 0;
}

#mainNavigation ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.header-start #mainNavigation ul {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

#mainNavigation li {
  margin-left: 10px;
}

#mainNavigation a {
  text-transform: none;
  font-weight: normal;
  font-size: 1.1em;
  font-family: Arial Narrow, Arial Narrow, Arial, sans-serif;
  color: #414141;
  background: #e7ae9b;
  border-radius: 3px;
  padding: 4px 8px 4px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  text-decoration: none;
  cursor: pointer;
}

#mainNavigation a:hover {
  background-color: #eda38a; 
  color: #303030;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

#mainNavigation a.active {
  background-color: #eda38a; 
  font-weight: normal;
  color: #303030; /* Blau des Logos */
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

#Button a {
  border: 1px solid #303030;
  font-family: Arial Narrow, Arial Narrow, Arial, sans-serif, Arial Narrow, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 16px; /* Set your desired font size */
  border-radius: 4px;
  color: #414141;
  text-decoration: none;
  padding: 5px;
}

#Button a:hover {
  color: #303030; /* Blau des Logos */
  background-color: #eda38a; 
}

navd {
  background-color: #00000000;
  color: hwb(0 0% 100%);
  padding: 10px;
  text-align: left;
}

navd a {
  color: #000000;
  text-decoration: none;
  border-radius: 4px;
  padding: 5px;
  background-color: hsl(208, 27%, 60%);
}

#scrollToTopBtn {
  font-family: Arial Narrow, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: bolder;
  font-size: 2em;
  color: #303030;
  text-decoration: none;
  position: fixed;
  left: 78%;
  top: 75%;
  cursor: pointer;
  display: none;
  transform: translateY(0%);
  width: 50px;
  height: 50px;
  background-color: #eda38a82;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  z-index: 9999;
}

@media (min-width: 1400px) {
  /* 78% von 1400px sind 1092px; der Container ist zentriert, also:
     linker Rand = (Viewport-Breite - 1400px) / 2 */
  #scrollToTopBtn {
    left: calc((100% - 1400px) / 2 + 1092px);
  }
}


#scrollToTopBtn i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* CONTENT */

#content-container {
  padding-top: 0px;
  padding-left: 0px;
  flex: 1; /* Allow the content container to grow and fill available space */
  font-size: 1.0em;
  line-height: 1.5; 
  margin-bottom: 50px;
}

/* Heading styles */
h1 {
  font-family: Arial Narrow, Arial Narrow, Arial, sans-serif, Arial Narrow, Arial, sans-serif;
  color: #303030; /* Blau des Logos */
  font-size: 1.2em;
}

.h1-start {
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 1.5em;
  font-weight: bold;
  color: #303030;
  text-align: center;
  margin: 2rem 0 1.5rem;
}

h2 {
  font-family: Arial Narrow, Arial Narrow, Arial, sans-serif, Arial Narrow, Arial, sans-serif;
  color: #303030; /* Blau des Logos */
  font-size: 1.0em;
  margin-bottom: 0.6em;
}

h3 {
  font-family: Arial Narrow, Arial Narrow, Arial, sans-serif, Arial Narrow, Arial, sans-serif;
  font-style:normal;
  font-size: 1.0em;
  margin-left: 0em;
  margin-bottom: 0.3em;
  margin-block-start: 0em;
  margin-block-end: 0.2em;
}

h4 {
  font-family: Arial Narrow, Arial Narrow, Arial, sans-serif, Arial Narrow, Arial, sans-serif;
  font-style: italic;
  font-size: 1.0em;
  margin-bottom: 0.3em;
  margin-block-start: 0em;
  margin-block-end: 0em;
}

h5 {
  font-family: Arial Narrow, Arial Narrow, Arial, sans-serif, Arial Narrow, Arial, sans-serif;
  color: #303030;
  font-size: 1.0em;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}

h6 {
  font-family: Arial Narrow, Arial Narrow, Arial, sans-serif, Arial Narrow, Arial, sans-serif;
  color: #303030;
  font-size: 1.0em;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  display: none;
}

#main {
  line-height: 1.5;
  margin-bottom: 20px;
  max-width: 80%;
  text-align: justify;
}

.truncate-text {
  height: auto; /* Änderung der Höhe auf 'auto' oder einen anderen geeigneten Wert */
  overflow: hidden;
  line-height: 1.5em;
}

.section {
  font-size: 1.0em;
}

.biblio {
  font-size: 0.9em;
  margin-bottom: 0px;
}

.i {
  font-size: 1.0em;
  font-style: italic;
  color: #303030;
}

.fecha {
  font-family: 'Consolas', 'Courier New', Courier, monospace;
  font-weight: bold;
  color: #404040; 
  font-size: 1.0em;
  margin-right: 0px;
}

#blog-entrada {
  padding: 5px;
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  max-width: 100%; /* Anpassen Sie die Breite nach Bedarf */
}

#blog-entrada-highlight {
  padding: 5px;
  background-color: rgba(255, 255, 255, 0.417);
  border: 1px solid #4d4d4d;
  border-radius: 4px;
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  max-width: 100%; /* Anpassen Sie die Breite nach Bedarf */
}

.blog {
  width: 70%;
  margin-bottom: 40px;
}

.blog td {
  padding-right: 20px;
}





/* STATISTIKEN */

.statistics-table {
  border-collapse: collapse;
  margin-top: 5px;
  margin-bottom: 20px;
  font-family: Arial Narrow, Arial, sans-serif;
  font-size: 0.8em;
  line-height: 1em;
}

.statistics-table .right-align {
  text-align: right;
}

.statistics-table th, .statistics-table td {
  border: 2px solid rgba(0,0,0,.06);
  padding: 8px;
  text-align: right;
}

.statistics-table th:first-child, .statistics-table td:first-child {
  text-align: left;
}

.statistics-table th { 
  background-color: #484f5a1c;
}

.statistics-table tbody tr:nth-child(even) {
  background-color: #dddfe246;
}

.statistics-table tbody tr:hover {
  background-color: #efede173;
}



/* ÜBERSICHT AUDIOS-TRANSKRIPTIONEN INKL. METADATEN */

#informantes-table {
  border-collapse: collapse;
  font-family: Arial Narrow, Arial, sans-serif;
  font-size: 0.8em;
  line-height: 1.0em;
  margin-bottom: 20px;
}

#informantes-table .right-align {
  text-align: right;
}

#informantes-table th, #informantes-table td {
  border: 2px solid rgba(0,0,0,.06);
  padding: 4px;
  text-align: left;
  max-width: 45ch; /* Maximale Breite für 45 Zeichen */
}

#informantes-table th { 
  background-color: #484f5a1c;
}

#informantes-table tbody tr:nth-child(even) {
  background-color: #dddfe246;
}

#informantes-table tbody tr:hover {
  background-color: #efede173;
}

/* Mouseover-Effekt für sortierbare Spaltenüberschriften */
#informantes-table th {
  cursor: pointer; /* Zeigt die Hand an, wenn die Maus über die Spaltenüberschrift fährt */
  transition: background-color 0.1s, color 0.1s; /* Weicher Übergang */
}

#informantes-table th:hover {
  background-color: #f0f0f0; /* Helle Hintergrundfarbe beim Hover */
  color: #333; /* Dunklere Schriftfarbe beim Hover */
}


#nativos-table {
  border-collapse: collapse;
  font-family: Arial Narrow, Arial, sans-serif;
  font-size: 0.8em;
  line-height: 1.0em;
}

#nativos-table .right-align {
  text-align: right;
}

#nativos-table th, #nativos-table td {
  border: 2px solid rgba(0,0,0,.06);
  padding: 4px;
  text-align: left;
  max-width: 45ch; /* Maximale Breite für 45 Zeichen */
}

#nativos-table th { 
  background-color: #484f5a1c;
}

#nativos-table tbody tr:nth-child(even) {
  background-color: #dddfe246;
}

#nativos-table tbody tr:hover {
  background-color: #efede173;
}

/* Mouseover-Effekt für sortierbare Spaltenüberschriften */
#nativos-table th {
  cursor: pointer; /* Zeigt die Hand an, wenn die Maus über die Spaltenüberschrift fährt */
  transition: background-color 0.1s, color 0.1s; /* Weicher Übergang */
}

#nativos-table th:hover {
  background-color: #f0f0f0; /* Helle Hintergrundfarbe beim Hover */
  color: #333; /* Dunklere Schriftfarbe beim Hover */
}

#analysisTable {
  border-collapse: collapse;
  margin-top: 5px;
  margin-bottom: 20px;
  font-family: "Arial Narrow", "Arial", Arial, sans-serif;
  font-size: 0.9em;
  line-height: 1em;
}

/* Standard-Zellenstile */
#analysisTable th,
#analysisTable td {
  border: 2px solid rgba(0,0,0,.06);
  padding: 8px;
  text-align: left;
}

#analysisTable .right-align {
  text-align: right;
}

#analysisTable th { 
  background-color: #484f5a1c;
}

#analysisTable tbody tr:nth-child(even) {
  background-color: #dddfe246;
}

#analysisTable tbody tr:hover {
  background-color: #efede173;
}

/* Dropdown-Menüs (Selects) */
#analysisTable td select {
  font-size: 1.0em;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f9f9f9;
  color: #333;
  max-width: 150px;
  width: auto;
  box-sizing: border-box;
}

@media only screen and (max-width: 768px) {
  #analysisTable td select {
    font-size: 0.8em;        /* etwas kleinere Schrift */
    padding: 2px 4px;        /* reduziert das Padding */
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f9f9f9;
    color: #333;
    width: 20ch;             /* Breite auf 20 Zeichen festgelegt */
    max-width: 20ch;         /* maximale Breite ebenfalls 20 Zeichen */
    box-sizing: border-box;  /* berücksichtigt Padding und Border */
    overflow: hidden;        /* versteckt überlaufenden Inhalt */
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 0 0 auto;          /* verhindert, dass der Flex-Container das Element erweitert */
    min-width: 0;            /* erlaubt das Verkleinern in Flex-Umgebung */
  }
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media only screen and (max-width: 768px) {
  #analysisTable {
    min-width: 100%;
    font-size: 0.8em;
  }
  
  #analysisTable th,
  #analysisTable td {
    padding: 2px;
  }
}

.highlight-L1-ES {
  background-color: rgba(198, 41, 41, 0.369) !important;
}


/* NAVIGATION ZU AUDIOS & DOKUMENTE */

/* Stil für nav-Container */
.nav-container {
  font-family: "Arial Narrow", "Arial";
  padding: 0px;
  margin: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
}


.nav-container h1 {
  margin-right: 10px; /* Füge etwas Abstand zwischen h1 und dem Link hinzu */
}


nav {
  background-color: #00000000;
  color: hwb(0 0% 100%);
  padding: 0px;
  text-align: left;
}

nav ul {
  list-style-type: none;
  padding: 0;
  border-radius: 4px;
  margin: 0;
}

nav li {
  margin-bottom: 10px; /* Ändere den Wert nach Bedarf */
}

nav a {
  color: #000000;
  border-radius: 4px;
  text-decoration: none;
  padding: 5px;
}

nav a:hover {
  background-color: hsl(208, 27%, 60%);
}

/* PLAYER */
/* PLAYER */
/* PLAYER */

/* ANORDNUNG DER METADATEN, TRANSKRIPTION, etc. */

.speaker-turn {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.speaker-name {
  flex: 0 0 75px;
  font-weight: bold;
  color: #053c96;
  margin-right: 1rem;
  text-align: right;
  cursor: pointer;
  margin-top: 4px;
  position: relative;
}

.speaker-content {
  flex: 1;
  font-family: "Consolas, Inconsolata", monospace;
  margin-bottom: 10px; 
  text-align: left;
  line-height: 1.2;
}

.speaker-time {
  font-size: 0.8em;
  font-family: Arial Narrow, Arial Narrow, Arial, sans-serif;
  color: rgb(91, 91, 91);
  margin-right: 35px;
  margin-bottom: 0.3rem;
  line-height: 0px;
}

.speaker-text {
  line-height: 1.4;
}

/* Stil für den Transkriptionstext */
.transcription {
  line-height: 1.3;
  text-indent: 0px; /* Hier wird der Text eingerückt */
  margin: 0 auto;
  margin-bottom: 20px; /* Zum Beispiel 20px Abstand zwischen den einzelnen Redebeiträgen */
  text-align: justify;
}

.word {
  cursor: pointer; /* Mauszeiger als Hand */
}


#player-table {
  width: auto;
  border-collapse: collapse;
}

#player-table tr {
  vertical-align: top; /* Inhalte oben ausrichten */
}

#sidebars {
  position: fixed;
  left: 78%;
  width: auto;
  z-index: 9990;
}

@media (min-width: 1400px) {
  /* 78% von 1400px sind 1092px; der Container ist zentriert, also:
     linker Rand = (Viewport-Breite - 1400px) / 2 */
  #sidebars {
    left: calc((100% - 1400px) / 2 + 1092px);
  }
}

#sidebarContainer-meta {
  font-size: 0.9em;
  color: #414141;
  margin-bottom: 10px;
  margin-left: 0px !important;
}

.metadata-value {
  color: #C20920;
}

.metadata-value-L2_3Spanisch {
  color: #C20920;
  font-weight: bold;
}

#sidebarContainer {
  font-size: 0.9em;
  color: #414141;
  margin-bottom: 10px;
  margin-left: 0px !important;
}

#sidebarContainer-letters {
  font-size: 0.9em;
  color: #414141;
  margin-bottom: 10px;
  margin-left: 0px !important;
}

#sidebarContainer-controls {
  font-size: 0.9em;
  color: #414141;
  margin-bottom: 10px;
  margin-left: 0px !important;
  display: none;
}

#sidebarContainer-export {
  font-size: 0.9em;
  color: #414141;
  margin-bottom: 10px;
  margin-left: 0px !important;
  display: none;
}

#sidebarContainer a {
  margin-right: 5px;
}

#sidebarContainer a:last-child {
  margin-right: 0;
}

#transcriptionContainer {
  margin-bottom: 100px;
  width: 75%;
}

/* Für breitere Bildschirme */
@media screen and (min-width: 1200px) {
  #transcriptionContainer {
    width: 80%;
  }
}

@media screen and (min-width: 1400px) {
  #transcriptionContainer {
    width: 90%;
  }
}

/* Für kleine Bildschirme */
@media only screen and (max-width: 768px) {
  #transcriptionContainer {
    width: auto !important;
    margin-bottom: 20px !important;
    float: none !important;
    clear: both !important;
  }
  
  #transcriptionContainer > div {
    width: 100%;
    box-sizing: border-box;
  }
}



.speaker-label {
  font-family: Arial Narrow, Arial Narrow, Arial, sans-serif, Arial Narrow, Arial, sans-serif;
  color: #303030;
  font-size: 1.2em;
  font-weight: bold;
  margin-top: 0.2em;
  margin-bottom: 1.9em;
  display: contents;
}



.word-container {
  display: flex;
  align-items: flex-start;
  margin-bottom: 5px; /* z.B. kleiner Abstand zwischen den Zeilen */
}

.word-number {
  color: #C20920;
  font-size: 1.0em;
  margin-right: 10px;
  vertical-align: top;
}


#capital-table {
  margin-top: 20px;
  border-collapse: collapse;
}

#capital-table tr {
  vertical-align: top; /* Inhalte oben ausrichten */
}

#seconds {
  position: relative;
  display: inline-block;
}

#seconds > i {
  vertical-align: middle;
}

#seconds > span {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.7em;
  font-weight: 700;
  color: #303030;
  z-index: 1;
}




.spanish-level {
  color: rgb(192, 0, 0);
  font-weight: bold;
  text-align: center;
}






/* Stil für den Transkriptionstext */


.word:hover,
.word.playing:hover {
  background-color: hsla(3, 96%, 67%, 0.677);
  border-radius: 2px;
  padding: 0px 0px 0px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
  cursor: pointer;
}

.speaker-time {
  font-size: 0.8em;
  font-family: "Arial Narrow", "Arial";
  color: rgb(91, 91, 91);
  margin-top: 10px;
  margin-bottom: 15px;
  margin-right: 35px;
}

/* Stil für unterstrichene Wörter */
.transcription .word:hover {
  background-color: hsla(3, 96%, 67%, 0.677);
  border-radius: 2px;
  padding: 0px 0px 0px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  cursor: pointer;
}


.word.playing:hover {
  background-color: hsl(20, 52%, 78%); /* Ziel-Hintergrundfarbe im Hover-Zustand */
}

.word.playing {
  background-color: hsla(3, 96%, 67%, 0.677);
  cursor: pointer;
  border-radius: 2px;
  padding: 0px 0px 0px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

/* Stil für unterstrichene Wörter */
/* Stil für die Wörter in div mit ID transcription-list */
#transcription-list .word:hover,
#transcription-list .word.playing:hover {
  background-color: hsla(3, 96%, 67%, 0.677);
  border-radius: 2px;
  padding: 0px 0px 0px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
  cursor: pointer;
}

/* Stil für die Wörter in div mit ID transcription-text */
#transcription-text .word:hover,
#transcription-text .word.playing:hover {
  background-color: hsla(3, 96%, 67%, 0.677);
  border-radius: 2px;
  padding: 0px 0px 0px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
  cursor: pointer;
}

/* Gemeinsamer Stil für die Wörter in beiden divs */
.word {
  transition: background-color 0.5s ease, border-radius 0.5s ease, box-shadow 0.5s ease;
}

/* Stil für das aktuell abgespielte Wort in beiden divs */
#transcription-list .word.playing,
#transcription-text .word.playing {
  background-color: hsla(3, 96%, 67%, 0.677);
  cursor: pointer;
  border-radius: 2px;
  padding: 0px 0px 0px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}

/* Stil für aktiven Sprecher */
.speaker.active {
  color:hwb(214 4% 47%);
  border-top: 0px solid hwb(0 36% 64%);
  border-bottom: 0px solid hwb(0 36% 64%);
  box-sizing: border-box; /* Fügt die Border zur Box hinzu, ohne die Größe zu ändern */
}


/* Stil für hover-Ereignis auf Sprecher */
.speaker.hover {
  text-decoration: underline;
}



.speaker {
  font-family: "Arial Narrow", "Arial", monospace;
  font-weight: bold;
  color: #414141;
  cursor: pointer;
  display: block;
  margin-bottom: 10px;
}

/* AUDIO-PLAYER */
/* AUDIO-PLAYER */
/* AUDIO-PLAYER */


/* Stil für Audio-Container */
#audioContainer {
  font-family: "Arial Narrow", "Arial";
  border: 0px solid #000;
  padding: 5px;
  margin: 0 auto;
  margin-top: 20px; /* Abstand nach oben */
  margin-bottom: 0px; /* Abstand nach unten */
}

.custom-audio-player {
  position: fixed;
  bottom: 23px;
  /* Berechnet den linken Rand des Bodys:
     1. Gesamtbreite des Viewports minus die Breite des Bodys ergibt den "Rest" an Breite.
     2. Dieser Rest wird halbiert, da der Body zentriert ist.
  */
  left: calc((100% - clamp(300px, 95%, 1400px)) / 2);
  /* 75 % der Breite des Bodys */
  width: calc(clamp(300px, 95%, 1400px) * 0.74);
  z-index: 1000;
  background-color: #daada3be;
  border-radius: 3px;
  padding: 4px 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}



.player-controls {
  display: flex;
  flex-direction: column;
}

.player-controls-top {
  display: flex;
  align-items: center; /* Vertikale Zentrierung der Elemente */
  justify-content: space-between; /* Sorgt für gleichmäßigen Abstand zwischen den Elementen */
  }

.player-controls-bottom {
  display: flex;
  align-items: center; /* Vertikale Zentrierung der Elemente */
  justify-content:space-around; /* Sorgt für gleichmäßigen Abstand zwischen den Elementen */
  margin-bottom: 5px;
}

.progress-bar {
  flex-grow: 1;
  margin-right: 10px; /* Abstand zwischen Fortschrittsanzeige und Lautstärkeregelung */
}

.volume-control-container {
  display: flex;
  align-items: center;
  margin-left: 10px; /* Abstand zur Fortschrittsanzeige */
}

#muteBtn {
  margin-right: 10px; /* Abstand zwischen Mute-Button und Volume Control Slider */
}

.remove-btn {
  margin-left: 10px; /* Abstand nach links */
  background: none;
  border: none;
  cursor: pointer;

  display: inline-flex; /* Ermöglicht die vertikale Zentrierung */
  align-items: center; /* Vertikale Zentrierung */
}




.volume-control {
  width: 100px; /* Breite der Lautstärkeregelung */
}

.speed-control-container {
  display: flex;
  align-items: center;
}

.speed-control-container > * {
  margin-right: 10px; /* Fügt einen rechten Abstand von 10px zu jedem Element im Container hinzu */
}

.speed-control-container > *:last-child {
  margin-right: 0; /* Entfernt den rechten Abstand vom letzten Element im Container */
}


#speedControlSlider {
  margin-right: 10px; /* Abstand zwischen Slider und Anzeige */
  width: 100px;
}

#speedDisplay {
  font-family: "Arial Narrow", "Arial";
  font-weight: bold;
  color: #414141;
}

.time-display {
  font-family: "Arial Narrow", "Arial";
  font-weight: bold;
  color: #414141;
}

.playContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0.5;
}

.playContainer > * {
  margin-right: 30px; /* Fügt einen rechten Abstand von 20px zu jedem Element im Container hinzu */
}

.playContainer > *:last-child {
  margin-right: 0; /* Entfernt den rechten Abstand vom letzten Element im Container */
}




/* Weitere Stile für Hover-Effekte, Ausblendung des alten Players usw. */
.progress-bar:hover,
.volume-control:hover {
  cursor: pointer;
}

#speedControlSlider:hover {
  cursor: pointer;
}


#audioPlayer {
  display: none; /* Fügt diese Regel hinzu, um den alten Audioplayer zu verstecken */
}

.player-controls:hover {
  cursor: pointer;
}

.player-controls-bottom {
  margin-top: 10px; /* Abstand zwischen den Zeilen */
}

/* Progressbar */
.progress-bar {
  width: 100%;
  height: 20px;
}











/* VARIA */

.code {
  color: #414141;
  background: #e7ae9b;
  border-radius: 3px;
  padding: 2px 4px 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  font-size: 0.8em;
  font-family: Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace;
}

.informante {
  color: rgb(192, 0, 0);
  font-weight: normal;
  font-size: 1.1em;
  font-family: Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace;
}

.data {
  color: #414141;
  background: #e7ae9b;
  border-radius: 3px;
  padding: 0px 4px 0px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  font-size: 1.0em;
  font-family: "Arial Narrow", "Arial";
}

.link, .link-txt, .link-csv, .link-xlsx {
  font-family: "Arial Narrow", "Arial";
  color: #414141;
  background: #e7ae9b;
  border-radius: 3px;
  padding: 2px 4px 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  font-size: 1.2em;
  text-decoration: none;
  cursor: pointer;
}

.link:hover, .link-txt:hover, .link-csv:hover, .link-xlsx:hover {
  color: #303030; /* Blau des Logos */
  background-color: #eda38a; 
}

.link-analysis, .link-analysis-txt, .link-analysis-csv, .link-analysis-xlsx {
  font-family: "Consolas, Inconsolata", monospace;
  color: #414141;
  background: #e7ae9b;
  border-radius: 3px;
  padding: 2px 4px 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  font-size: 1.1em;
  text-decoration: none;
  cursor: pointer;
}


@media (max-width: 600px) {
  .link-analysis, .link-analysis-txt, .link-analysis-csv, .link-analysis-xlsx {
    font-size: 0.9em;
    line-height: 1.3em;
  }
}

.link-analysis:hover, .link-analysis-txt:hover, .link-analysis-csv:hover, .link-analysis-xlsx:hover {
  color: #303030; /* Blau des Logos */
  background-color: #eda38a; 
}



.leer-button {
  font-family: "Arial Narrow", "Arial";
  color: #414141;
  background: #a9c9d0;
  border-radius: 3px;
  padding: 2px 4px 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  font-size: 1em;
  text-decoration: none;
  margin-top: 0.1em;
  margin-bottom: 30px;
  border-width: 0px;
}

.leer-button:hover {
  color: #303030; /* Blau des Logos */
  background-color: #eda38a; 
  cursor: pointer;

}

/* MAPA AUDIOS */

#map-container {
  width: 900px;
  height: 600px;
}

#map {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

@media (max-width: 1200px) {
  #map-container {
    width: 600px;
    height: 400px;
  }
}

#capitalLinksContainer {
  display: none; /* Initial ausblenden */
}


.custom-control {
  color: #414141;
  background: #a9c9d0;
  font-weight: bold;
  border-radius: 3px;
  padding: 3px 6px 3px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  position: absolute;
  top: -72px;
  left: 35%;
  text-align: left;
}


/* MARCAR LETRAS */
/* MARCAR LETRAS */
/* MARCAR LETRAS */


.tooltip-text {
  visibility: hidden;
  width: 200px;
  line-height: 1.3;
  font-size: 12px;
  font-family: "Arial Narrow", "Arial";
  text-align: left;
  font-weight: 100;
  color: #414141;
  border-radius: 6px;
  position: absolute;
  z-index: 1000;
  background-color: #efede1f0;
  border-radius: 3px;
  padding: 4px 6px 4px 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

.tooltip-high {
  color: #303030; /* Blau des Logos */
  font-weight: 700;
}

.fa-circle-question:hover + .tooltip-text, .fa-solid.fa-circle-question:focus + .tooltip-text {
  visibility: visible;
}

.fa-solid.fa-circle-question {
  cursor: pointer;
}


.transcription-list .word .highlight,
.transcription-text .word .highlight {
  background-color: rgba(216, 120, 120, 0.888);
}


.transcription-list {
  display: block;              /* Als Block-Element, damit width wirkt */
  width: 100%;                 /* Nutzt die volle Breite des übergeordneten Containers */
  text-indent: 0;              /* Kein Einrücken */
  margin-bottom: 10px;         /* Abstand zwischen den Redebeiträgen */
  cursor: pointer;
  font-family: "Consolas, Inconsolata", monospace;
  text-align: left;
  line-height: 1.2;
  
  /* Multi-Column Layout: 5 Spalten mit 50px Spaltabstand */
  column-count: 4;
  column-gap: 50px;
  
  /* Verhindert, dass einzelne Elemente zwischen Spalten aufgeteilt werden */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
}


.transcription-list .word {
  display: block; /* Hier wird jedes Wort untereinander angezeigt */
}

/* Bei mittleren Bildschirmen: zwei Spalten */
@media (max-width: 1200px) {
  .transcription-list {
    column-count: 3;
  }
}

/* Bei kleinen Bildschirmen: eine Spalte */
@media (max-width: 600px) {
  .transcription-list {
    column-count: 2;
  }
}


/* Standard: Drei Spalten für große Bildschirme */
.transcription-text {
  width: 100%;
  /* Nutzt zwei Spalten, wobei der verfügbare Platz gleichmäßig aufgeteilt wird */
  column-count: 2;
  column-gap: 20px;
  
  /* Abstände und Textformatierung */
  margin-top: 50px;
  margin-bottom: 10px;
  text-indent: 0;
  cursor: pointer;
  font-family: "Consolas, Inconsolata", monospace;
  text-align: left;
  line-height: 1.5;
  
  /* Verhindert, dass einzelne Elemente (z. B. Absatzblöcke) zwischen den Spalten aufgeteilt werden */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
}


/* Bei mittleren Bildschirmen: zwei Spalten */
@media (max-width: 1200px) {
  .transcription-text {
    column-count: 2;
  }
}

/* Bei kleinen Bildschirmen: eine Spalte */
@media (max-width: 600px) {
  .transcription-text {
    column-count: 1;
  }
}

/* ACCESS-FORMULAR */

/* Login-Container */
.login-container {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.login-form {
  background: #fef6f3; /* leicht heller Beige-Ton */
  padding: 2rem;
  padding-bottom: 1rem;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0,0,0,0.05);
  max-width: 400px;
  width: 100%;
  border: 1px solid #e2b9a1;
}

.login-form h1 {
  text-align: center;
  margin-top: 0em;
  margin-bottom: 1.0em;
  color: #943f2b;
}

/* Input-Gruppen mit Icons */
.input-group {
  display: flex;
  align-items: center;
  background: #fff3ee;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  border: 1px solid #e2b9a1;
}

.input-group i {
  margin-right: 0.5rem;
  color: #b25840;
}

.input-group input {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  color: #5b2b1d;
}

/* Checkbox */
.checkbox-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0;
  font-size: 0.9em;
  line-height: 1.4;
  color: #5b2b1d;
}

.checkbox-group label {
  margin: 0;
}


.checkbox-group input[type="checkbox"] {
  transform: scale(1.2);
  margin-top: 0.2rem;
}

/* Tooltip */
.tooltip-text {
  visibility: hidden;
  width: 250px;
  line-height: 1.3;
  font-size: 12px;
  font-family: "Arial";
  text-align: left;
  font-weight: 100;
  color: #414141;
  border-radius: 6px;
  position: absolute;
  z-index: 1000;
  background-color: #d6a9a5df;
  padding: 4px 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  pointer-events: none;
}

.tooltip-text.visible {
  visibility: visible;
}

.tooltip-high {
  color: #053c96; /* Blau des Logos */
  font-weight: 700;
}

.tooltip-italic {
  font-style: italic;
}

.tooltip-bold {
  font-weight: 700;
}

.tooltip-token {
  color: #414141;
  background: #d3685f;
  border-radius: 3px;
  padding: 2px 4px 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  font-family: Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace;
}

.fa-circle-question:hover + .tooltip-text, .fa-solid.fa-circle-question:focus + .tooltip-text {
  visibility: visible;
}

.fa-solid.fa-circle-question {
  cursor: pointer;
  font-size: 0.7em;
  position: relative;
  top: -0.4em;  /* passt den vertikalen Versatz an */
}

.fa-circle-info:hover + .tooltip-text, .fa-solid.fa-circle-info:focus + .tooltip-text {
  visibility: visible;
}

.fa-solid.fa-circle-info {
  cursor: pointer;
  font-size: 1.0em;
  position: relative;
}

.fa-circle-user {
  font-size: 0.8em;
  vertical-align: text-top;
}


.fa-circle-user:hover + .tooltip-text,
.fa-circle-user:focus + .tooltip-text {
  visibility: visible;
}

/* Button */
.btn-login {
  width: 100%;
  padding: 0.75rem;
  background-color: #d3685f;
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-login i {
  margin-right: 0.5rem;
}

.btn-login:hover {
  background-color: #b85048;
}

/* Fehler */
.error1 {
  margin-bottom: 1rem;
  color: #a7261b;
  text-align: center;
}

.welcome-box {
  display: flex;
  align-items: center;
  background: #fef6f3;
  border: 1px solid #e2b9a1;
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 500px;
  margin: 2rem auto;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.welcome-box i {
  font-size: 2rem;
  color: #b25840;
  margin-right: 1rem;
}

.welcome-box h2 {
  margin: 0 0 0.3rem 0;
  color: #943f2b;
}

.welcome-box p {
  margin: 0;
  color: #5b2b1d;
}

.login-note {
  font-size: 1.0em;
  color: #5b2b1d;
  margin-bottom: 1rem;
  line-height: 1.4;
}
.login-note a {
  color: #b25840;
  text-decoration: underline;
}
.login-note a:hover {
  color: #943f2b;
}

.login-note2 {
  text-align: center;
  font-size: 0.9em;
  color: #5b2b1d;
  margin-top: 1.4rem;
  margin-bottom: 0.0rem;
  line-height: 1.2;
}

.login-note3 {
  text-align: center;
  font-size: 0.9em;
  color: #5b2b1d;
  margin-top: 4.0rem;
  margin-bottom: 0.0rem;
  line-height: 1.2;
}


/* Gemeinsame Kartengrundlage (Login & Welcome) ist bereits .login-form */

/* Willkommensvariante */
.login-form.success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.login-form.success i {
  font-size: 2.5rem;
  color: #b25840;
}

/* Fehlermeldungen (Timeout, falsches PW, …) */
.error-msg {
  background: #ffeae6;
  color: #a7261b;
  border: 1px solid #e2b9a1;
  border-radius: 8px;
  padding: .5rem .75rem;
  margin-bottom: 1rem;
  text-align: center;
}

.error-msg i {
  margin-right: .4rem;
}



/* ACCESS-FORMULAR */

.form-wrapper1 {
  max-width: 400px;
  box-sizing: border-box;
}

.form-wrapper2 {
  box-sizing: border-box;
  border: 1px solid #4d4d4d;
  margin-bottom: 20px;
  border-radius: 3px;
  padding: 2px 12px;
  max-width: fit-content;
}

/* Bestehender Stil für den Bestätigungsbereich */
#terms {
  border: 1px solid #4d4d4d;
  font-size: 0.8em;
  line-height: 1.0; 
  margin-bottom: 20px;
  border-radius: 3px;
  padding: 2px 4px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  width: 100%;
}

/* Beispiel für die Formularfelder */
.access {
  color: #414141;
  background: #e7ae9b;
  border-radius: 3px;
  padding: 2px 4px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  font-size: 1.0em;
  font-family: "Arial Narrow", "Arial", "Consolas", Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.error {
  font-size: 1.0em;
  color: #a90000;
  font-family: "Consolas", "Courier New", monospace;
  margin-bottom: 50px;
}

.link-error {
  font-size: 1.0em;
  font-weight:unset;
  color: #a90000;
  font-family: "Consolas", "Courier New", monospace;
}

.error1 {
  margin-bottom: 30px;
  box-sizing: border-box;
  border: 1px solid #4d4d4d;
  margin-bottom: 20px;
  border-radius: 3px;
  padding: 2px 12px;
}

.grey {
  font-size: 1.0em;
  font-style: italic;
  color: #ffffff;
}

.red {
  font-size: 1.0em;
  font-style: bold;
  color: #ba0000;
}


.entrar_letras {
  color: #414141;
  background: #e7ae9b;
  border-radius: 3px;
  padding: 2px 4px 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  font-size: 1.0em;
  font-family: "Arial Narrow", "Arial","Consolas",Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace;
}

#markInput {
  border-width: 0px;
  border-style: none;
  border-image:none;
  display: inline;
  font-family: 'Consolas', 'Courier New', Courier, monospace;
  margin-bottom: 5px;
  margin-right: 5px;
}

#markInput :focus-visible {
  outline: -webkit-focus-ring-color auto 0px;
}

#query {
  border-width: 0px;
  border-style: none;
  border-image: none;
  display: inline;
  font-family: 'Consolas', 'Courier New', Courier, monospace;
  margin-bottom: 20px;
  margin-right: 5px;
}

button {
  color: buttontext;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: center;
  align-items: flex-start;
  cursor: pointer;
  box-sizing: border-box;
  background-color: none;
  margin: 0em;
  padding-block: 1px;
  padding-inline: 6px;
  border-width: 1px;
  border-style: inset;
  border-color: none;
  border-image: none;
}

.button {
  font-family: "Arial Narrow", "Arial";
  color: #414141;
  background: #e7ae9b;
  border-radius: 3px;
  padding: 2px 4px 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  border-width: 0;
  font-size: 1.0em;
  text-decoration: none;
  margin-bottom: 5px;
}

.borrar {
  font-family: "Arial Narrow", "Arial";
  color: #414141;
  background: #d0a9a9;
  border-radius: 3px;
  padding: 2px 4px 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  border-width: 0;
  font-size: 1.0em;
  text-decoration: none;
  margin-bottom: 5px;
}

.button:hover {
  color: #303030; /* Blau des Logos */
  background-color: #eda38a; 
}

.borrar {
  font-family: "Arial Narrow", "Arial";
  color: #414141;
  background: #d0a9a9;
  border-radius: 3px;
  padding: 2px 4px 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  border-width: 0;
  font-size: 1.0em;
  text-decoration: none;
  margin-bottom: 5px;
}


.letra {
  font-family: 'Consolas', 'Courier New', Courier, monospace;
  color: #414141;
  background: #d0a9a9;
  border-radius: 3px;
  padding: 2px 4px 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  border-width: 0;
  font-size: 0.8em;
  text-decoration: none;
  margin-right: 3px;
  cursor: pointer;
}

.result-count {
  font-size: 0.9em;
}

#buttonsContainer {
  margin-top: 5px;
  line-height: 1.0;
}


/* SEARCH */
/* SEARCH */
/* SEARCH */

.buscar {
  font-family: "Arial Narrow", "Arial";
  color: #414141;
  background: #a9c9d0;
  border-radius: 0px;
  padding: 2px 4px 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  font-size: 1.0em;
  text-decoration: none; /* Verhindere die Standard-Unterstreichung für Links */
}

/* Filter */

#filter-container {
  border-top: 0px solid #303030;
  margin-top: 10px;
  width: 100%;
  border-collapse: collapse;
  font-family: "Arial Narrow", "Arial";
  table-layout: auto; /* Ändern Sie die table-layout Eigenschaft */
  border-radius: 3px;
  padding: 5px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

.filter-table {
  margin-top: 0px;
  margin-bottom: 0px;
  line-height: 1.5em;
}

#category {
  font-family: "Arial Narrow", "Arial";
  font-weight: bold;
  color: #414141;
  font-size: 1.0em;
  text-decoration: none;
  margin-bottom: 20px;
  text-align: right;
}

#category1 {
  font-family: "Arial Narrow", "Arial";
  font-weight: bold;
  color: #414141;
  font-size: 1.0em;
  text-decoration: none;
  margin-bottom: 20px;
  text-align: right;
  vertical-align: top;
}

/* Aktualisierte Styles für die Checkbox und das Label */
.checkbox {
  color: #414141;
  background: #a9c9d0;
  border-radius: 0px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  font-size: 1.0em;
  white-space: nowrap; /* Verhindert Zeilenumbrüche */
}

#filter td {
  text-align: center;
  width: auto; /* Ändern Sie die Breite auf "auto" */
}

#filter input[type="checkbox"] {
  margin-right: 4px;
}

#filter label {
  display: inline-block;
  vertical-align: middle; /* Zentriert das Label vertikal im Kontrollspan */
  margin-right: 4px;
}


#checkbox {
  color: #414141;
  background: #a9c9d0;
  border-radius: 0px;
  
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  font-size: 1.0em;
}




#filter-todos span {
  display: inline-block; /* Macht das span-Element zu einem inline-block-Element */
  width: 70px;            /* Setzt die Breite auf 100% der umgebenden Zelle */
}

#filter-countries span {
  display: inline-block; /* Macht das span-Element zu einem inline-block-Element */
  width: 55px;            /* Setzt die Breite auf 100% der umgebenden Zelle */
}

#filter-otros span {
  display: inline-block; /* Macht das span-Element zu einem inline-block-Element */
  width: 90px;            /* Setzt die Breite auf 100% der umgebenden Zelle */
}

label {
  margin-right: 0px; /* Fügt einen Abstand von 4px auf der rechten Seite hinzu */
}

input {
  text-rendering: auto;
  color: fieldtext;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  appearance: auto;
  -webkit-rtl-ordering: logical;
  cursor: text;
  background-color: #a9c9d0;
  border:#404040;
  margin: 0em;
  padding: 1px 0px;
  border-width: 1px;
  border-style: solid;
  border-color:#404040;
  border-image: initial;
  padding-block: 3px;
}

input[type="checkbox" i] {
  background-color: initial;
  cursor: default;
  appearance: auto;
  box-sizing: border-box;
  margin: 3px 3px 3px 4px;
  padding: initial;
  border: initial;
}



/* Results */

#results-container {
  border-top: 0px solid #303030;
  margin-top: 10px;
  border-collapse: collapse;
  overflow-x: auto;
  width: 100%;
  max-width: 100%; /* oder eine spezifische Breite, z.B. 800px */
  display: block;
}

.results-stats2 {
  border-top: 0px solid #303030;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
  border-collapse: collapse;
  table-layout: auto; /* Ändern Sie die table-layout Eigenschaft */
  border-radius: 3px;
  padding: 5px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

/* Results-Table */

#results-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 5px;
  margin-bottom: 20px;
  font-family: Arial Narrow, Arial, sans-serif;
  font-size: 0.8em;
  line-height: 1em;
}

#results-container table td {
  white-space: nowrap;
}

#results-table .right-align {
  text-align: right;
}

#results-table .center-align {
  text-align: center;
}

.palabra-buscada {
  color:#303030;
  font-weight: bold;
  font-size: 1.2em;
  font-family: "Courier New", monospace;
  cursor: pointer; /* Den Mauszeiger zu einem Zeiger ändern */
}

.contexto {
  font-family: "Courier New", monospace;
  font-size: 1.2em;
}

#results-table th, #results-table td {
  border: 2px solid rgba(0,0,0,.06);
  padding: 8px;
  text-align: left;
}

#results-table th { 
  background-color: #484f5a1c;
}

#results-table tbody tr:nth-child(even) {
  background-color: #dddfe246;
}

#results-table tbody tr:hover {
  background-color: #efede173;
}


.audio-button {
  color: #414141;
  background: #a9c9d0;
  border-radius: 3px;
  padding: 4px 4px 4px 4px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  text-decoration: none;
  border-width: 0px;
}

.audio-button:hover {
  background-color: #efede1; 
  cursor: pointer;
}

.download-button {
  color: #414141;
  background: #a9c9d0;
  border-radius: 3px;
  padding: 4px 6px 4px 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  text-decoration: none;
  border-width: 0px;
  margin-left: 5px;
}

.download-button:hover {
  background-color: #eda38a; 
  cursor: pointer;
}

.download-link {
  font-family: Arial Narrow, Arial, sans-serif;
  color: #414141;
  background: #e7ae9b;
  border-radius: 3px;
  padding: 0px 2px 0px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  font-size: 1.4em;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  width: 1.2em;
  text-align: center;
}

.download-link:hover {
  color: #303030; /* Blau des Logos */
  background-color: #efede1; 
}



@media only screen and (max-width: 768px) {
  #content-container {
    max-width: 100% !important;
    padding: 10px !important;
    margin: 0 auto !important;
  }

  /* Tabelle und deren Zeilen/Zellen als flexibler Block */
  #player-table {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    border-collapse: collapse;
  }
  #player-table tr {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
  }
  #player-table tr td {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    box-sizing: border-box;
  }

  /* Reihung ändern: Die Zelle mit den Sidebars (ID "sidebars") soll oberhalb des Transkriptionscontainers stehen */
  #player-table tr td#sidebars {
    order: -1;
  }

  /* Sidebars: Feste Positionierung entfernen und volle Breite nutzen */
  #sidebars {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    padding-left: 0 !important;
    margin-bottom: 10px !important;
    float: none !important;
    clear: both !important;
  }



/* Navigation: ganze Breite, aber unter dem Logo */
#mainNavigation {
  width: 100%;
  margin: 0 auto;
}
/* Navigationsliste als Flex-Container: horizontal zentriert */
#mainNavigation nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Einzelne Listenelemente nebeneinander, mit etwas Abstand */
#mainNavigation nav ul li {
  display: inline-block;
  margin: 0 2px;
}

.header-container {
  display: flex;
  align-items: center;
  margin-bottom: 0px;
}

#mainNavigation a {
  text-transform: none;
  font-weight: normal;
  font-size: 1.0em;
}

h1 {
  font-family: Arial Narrow, Arial Narrow, Arial, sans-serif, Arial Narrow, Arial, sans-serif;
  color: #303030;
  font-size: 1.2em;
}

.link, .link-txt, .link-csv, .link-xlsx {
  font-family: "Arial Narrow", "Arial";
  color: #414141;
  background: #e7ae9b;
  border-radius: 3px;
  padding: 2px 4px 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  font-size: 0.9em;
  text-decoration: none;
  cursor: pointer;
}



/* Stil für Audio-Container */
#audioContainer {
  font-family: Arial Narrow, Arial Narrow, Arial, sans-serif;
  border: 0px solid #000;
  padding: 5px;
  margin: 0 auto;
  margin-top: 20px; /* Abstand nach oben */
  margin-bottom: 0px; /* Abstand nach unten */
}

.custom-audio-player {
  position: fixed;
  bottom: 10px;
  /* Berechnet den linken Rand des Bodys:
     1. Gesamtbreite des Viewports minus die Breite des Bodys ergibt den "Rest" an Breite.
     2. Dieser Rest wird halbiert, da der Body zentriert ist.
  */
  /* 75 % der Breite des Bodys */
  left: calc((100% - clamp(300px, 95%, 1400px)) / 2);
  width: 92%; /* 95% der Breite des Bodys */
  z-index: 1000;
  background-color: #daada3be;
  border-radius: 3px;
  padding: 4px 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

.custom-audio-player .time-display,
.custom-audio-player #speedDisplay {
  font-size: 90% !important;
}

.player-controls {
  display: flex;
  flex-direction: column;
}

.player-controls-top {
  display: flex;
  align-items: center; /* Vertikale Zentrierung der Elemente */
  justify-content: space-between; /* Gleichmäßiger Abstand */
}

.player-controls-bottom {
  display: flex;
  align-items: center; /* Vertikale Zentrierung */
  justify-content: space-around; /* Gleichmäßiger Abstand */
  margin-bottom: 10px;
}

.progress-bar {
  flex-grow: 1;
  margin-right: 10px; /* Abstand zwischen Fortschrittsanzeige und Lautstärkeregelung */
}

.volume-control-container {
  display: flex;
  align-items: center;
  margin-left: 10px; /* Abstand zur Fortschrittsanzeige */
}

#muteBtn {
  margin-right: 10px; /* Abstand zwischen Mute-Button und Lautstärkeregler */
}

.volume-control {
  width: 80px; /* Breite der Lautstärkeregelung verringert */
}

.speed-control-container {
  display: flex;
  align-items: center;
}

.speed-control-container > * {
  margin-right: 10px; /* Abstand von 10px zu jedem Element */
}

.speed-control-container > *:last-child {
  margin-right: 0; /* Kein Abstand beim letzten Element */
}

#speedControlSlider {
  margin-right: 10px; /* Abstand zwischen Slider und Anzeige */
  width: 80px; /* Breite des Sliders verringert */
}

#speedDisplay {
  font-family: Arial Narrow, Arial Narrow, Arial, sans-serif;
  font-weight: bold;
  color: #414141;
}

.time-display {
  font-family: Arial Narrow, Arial Narrow, Arial, sans-serif;
  font-weight: bold;
  color: #414141;
}

.playContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0.5;
}

.playContainer > * {
  margin-right: 15px; /* Reduzierter Abstand zwischen den Elementen */
}

.playContainer > *:last-child {
  margin-right: 0; /* Kein Abstand beim letzten Element */
}

#capital-table {
  margin-top: 20px;
  border-collapse: collapse;
}

#capitalLinksContainer {
  display: none;
  width: min-content;
}

#sidebarContainer {
  display: none;
  width: min-content;
}

#audiofile-table {
  font-family: Arial Narrow, Arial Narrow, Arial, sans-serif, Arial Narrow, Arial, sans-serif;
  width: auto;
  border-collapse: collapse;
  margin-top: 5px;
  margin-bottom: 20px;
  font-size: 0.8em;
  line-height: 1em;
  table-layout: fixed;
}

#sidebarContainer-meta {
  font-size: 1.1em;
  color: #414141;
  margin-left: 0px !important;
}

#sidebarContainer-letters {
  font-size: 1.1em;
  color: #414141;
  margin-left: 0px !important;
}

#sidebarContainer {
  font-size: 1.0em;
  color: #414141;
  margin-left: 40px !important;
}

h6 {
  font-family: Arial Narrow, Arial Narrow, Arial, sans-serif, Arial Narrow, Arial, sans-serif;
  color: #303030;
  font-size: 1.0em;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  display: none;
}

#sidebarContainer a {
  margin-right: 5px;
}

#sidebarContainer a:last-child {
  margin-right: 0;
}



#scrollToTopBtn {
  font-family: Arial Narrow, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: bolder;
  font-size: 2em;
  color: #303030;
  text-decoration: none;
  position: fixed;
  left: calc((100% - clamp(300px, 95%, 1400px)) / 2 + 280px);
  top: 75%;
  cursor: pointer;
  display: none;
  transform: translateY(0%);
  width: 50px;
  height: 50px;
  background-color: #eda38a82;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  z-index: 9999;
}

.speaker-content {
  flex: 1;
  font-family: "Consolas, Inconsolata", monospace;
  margin-bottom: 5px; 
  text-align: left;
}

}