@font-face {
      font-family: 'OpenDyslexic';
      src: url('https://cdn.jsdelivr.net/gh/antijingoist/open-dyslexic/web/OpenDyslexic-Regular.otf') format('opentype');
    }
    html, body {
      margin: 0;
      font-family: sans-serif;
      height: 100vh;
      display: flex;
      flex-direction: column;
      background: #fff;
      color: #000;
    }
    .controls {
      background: #eee;
      padding: 0.5em;
      display: flex;
      flex-wrap: wrap;
      gap: 0.5em 1em;
      justify-content: center;
      align-items: center;
      transition: all 0.3s ease-in-out;
    }

    body.fullscreen .controls {
      height: 0;
      padding: 0;
      overflow: hidden;
      opacity: 0;
    }
    
    .controls textarea {
      width: 100%;
      height: 100px;
      font-size: 1em;
    }
    .controls select,
    .controls input[type="range"] {
      margin-top: 0.1em;
    }
    .controls label {
      font-size: 0.95em;
    }
    .display {
      flex: 1;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding-left: 20px;
    }
    .scroll-text {
      position: absolute;
      white-space: nowrap;
      line-height: 1.5;
      display: flex;
      align-items: baseline;
    }
    .scroll-text > * {
        flex-shrink: 0;
    }
    .scroll-text.hyphenate {
      hyphens: auto;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
    }
    .scroll-area {
      font-family: 'Andika', sans-serif;
      background-color: #ffffff;
      color: #002b5c;
      border: 4px solid #0047ab;
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      padding: 1em;
    }
    body.theme-dark .scroll-area {
      background-color: #000;
      color: #ff0;
      border-color: #7aa6ff;
    }
    body.theme-dark .controls,
    body.theme-dark button {
      background-color: #222;
      color: #ff0;
    }
    
    body.theme-dark #textInput {
      background-color: #000;
      color: #ff0;
      border-color: #7aa6ff;
    }
    
    #textInput {
      width: 100%;
      height: 100px;
      font-size: 1em;
      border: 1px solid #ccc;
      padding: 0.5em;
      overflow-y: auto;
      resize: vertical;
      min-height: 60px;
      box-sizing: border-box;
    }
    
    #miniControls {
      cursor: move;
      align-items: center;
      gap: 5px;
    }

@font-face {
  font-family: 'Prima-Semibold';
  src: url('Prima-Semibold.otf') format('opentype');
}

@font-face {
  font-family: 'Fibel Nord';
  src: url('Fibel Nord.ttf') format('truetype');
}

@font-face {
  font-family: 'Sassoon Primary';
  src: url('Sassoon Primary Regular.otf') format('opentype');
}

@font-face {
  font-family: 'Prima-Semibold Cursive';
  src: url('Prima-SemiboldCursive.otf') format('opentype');
}

.button-row {
  flex-wrap: nowrap;
  overflow-x: auto;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5em;
  width: 100%;
  margin-top: 0.5em;
}

@font-face {
  font-family: 'Österreichische Schulschrift';
  src: url('mm.ttf') format('truetype');
}

.word { display: inline; margin: 0; padding: 0; }
.space {
    white-space: pre;
}
.word span[style] {
  white-space: normal;
}

button {
  border-radius: 8px;
  border: 1px solid #aaa;
}
button:hover {
  background-color: #e0e0e0;
  cursor: pointer;
}
button.play-pause-stop {
  background-color: #ffdddd;
  border: 2px solid red;
  color: red;
  font-weight: bold;
  padding: 0.3em 0.7em;
}
button.play-pause-stop:hover {
  background-color: #ffbbbb;
}

@font-face { font-family: 'NORDmirror1'; src: url('nordmirror1.ttf'); }
@font-face { font-family: 'NORDmirror2'; src: url('nordmirror2.ttf'); }

@font-face { font-family: 'Grundschrift'; src: url('grundschrift-beta.ttf'); }
@font-face { font-family: 'BernerBasisschrift'; src: url('BernerBasisschrift1.ttf'); }
@font-face { font-family: 'Simple Print'; src: url('Simple Print.ttf'); }

@font-face {
  font-family: 'OesterrAusgangsschrift';
  src: url('schulsch_02R.ttf') format('truetype');
}


@font-face {
  font-family: 'Österr. Ausgangsschrift';
  src: url('schulsch_02R.ttf') format('truetype');
}


@font-face {
  font-family: 'Österr. Ausgangsschrift';
  src: url('OEsterr_Ausgangsschrift.ttf') format('truetype');
}

/* Google Fonts Schriftarten */
/* @import url('https://fonts.googleapis.com/css2?family=Nunito&family=Readex+Pro&display=swap');

font-family: 'Nunito', sans-serif;

/* Lesbare aktive Buttons im Dunkelmodus */
body.theme-dark .toggle-button.active-toggle {
  background-color: #4CAF50;
  color: black;
  /* font-weight: bold; */ /* Deaktiviert, um Verschieben zu vermeiden */
  border: 1px solid #81C784;
}

#background-logo {
  position: fixed;
  bottom: 15px;
  right: 15px;
  width: 100px;
  opacity: 0.5;
  z-index: 3;
  pointer-events: none;
}

.word { display: inline; margin: 0; padding: 0; }
.word span[style] {
  white-space: normal;
}

.gap-word {
  font-size: 1em;
  background-color: white;
  color: transparent;
  border: 1px solid gray;
  border-radius: 3px;
  padding: 0;
  margin: 0;
  display: inline-block;
  height: 1em;
  line-height: 1em;
  vertical-align: baseline;
}

.emoji-applied {
  cursor: pointer;
}

.toggle-button.active-toggle {
  background-color: #c8facc;
  border: 1px solid #2e7d32;
}

#recordBtn.recording {
  background-color: red;
  color: white;
  animation: blink 1s infinite;
  font-weight: bold;
  border: 2px solid darkred;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.syllable-red {
    color: red;
}

.syllable-blue {
    color: blue;
}

.syllable {
    padding: 0.1em 0;
}

.syllable.odd {
    background-color: #ffffa0; /* Light yellow */
}

.syllable.even {
    background-color: #d0f0ff; /* Light blue */
}

.gap {
    background-color: white;
    color: transparent;
    border: 1px solid black;
    border-radius: 3px;
    padding: 0 2px;
    display: inline-block;
    height: 1em;
    line-height: 1;
    vertical-align: baseline;
}
.scroll-text .gap {
  border: 1px solid gray;
  background-color: transparent;
  display: inline;
}

/* Override syllable color when inside a gap */
.gap .syllable-auto-colored {
    color: transparent;
}