/* ========== LAYOUT & GRUNDSTIL ==========
   Layout-Zentrierung & Schrift */
   @import url('https://fonts.googleapis.com/css2?family=Lexend&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@300;400;700&display=swap');
   
   /* Fallback für mobile Geräte */
   @font-face {
     font-family: 'Comic Neue Fallback';
     src: local('Comic Sans MS'), local('Comic Sans'), local('cursive');
     font-weight: 400;
     font-style: normal;
   }


   html, body {
    overflow-x: hidden;
    max-width: 100%;
  }
  
  body {
    max-width: 960px;  /* begrenzte Breite wie in style_alt.css */
    margin: auto;      /* zentriert wie in style_alt.css */
    font-family: 'Comic Neue', 'Comic Sans MS', 'Comic Sans', cursive, Arial, sans-serif;
    background-color: #ffffff;
    font-size: 1.2em;
    line-height: 1.5;
    color: #333;
  }
  

button.secondaryButton {
  display: block;
}


/* ========== ÜBERSCHRIFTEN ==========
   Modernes Aussehen */
h2 {
  font-family: 'Comic Neue', 'Comic Sans MS', 'Comic Sans', cursive, Arial, sans-serif;
  font-size: 1.2em;
  font-weight: bold;
  margin-top: 2em;
  margin-bottom: 0.8em;
}

.leuchteffekt {
  box-shadow: 0 0 15px 5px gold;
  transition: box-shadow 0.3s ease;
}


/* ========== BUTTONS ==========
   Klar & modern */
button,
.primaryButton,
.secondaryButton {
  padding: 0.5em 1.2em;
  font-size: 0.8em;
  border: none;
  border-radius: 0.4em;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

button:hover,
.primaryButton:hover,
.secondaryButton:hover {
  opacity: 0.95;
  transform: scale(1.03);
}

#compareButton {
  background-color: #28a745;
  color: white;
}

.primaryButton {
  background-color: #e0e0e0;
  color: white;
  display: block;
  margin: 2em auto;
}

.secondaryButton {
  background-color: #e0e0e0;
  color: #333;
  display: block;
  margin: 2em auto;
}

.secondaryButton:hover {
  background-color: #d0d0d0;
}



abbr[data-title] {
  position: relative;
  cursor: help;
}

abbr[data-title] {
  position: relative;
}

abbr[data-title]::after {
  content: attr(data-title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-30%, -0.5em);
  background: black;
  color: white;
  padding: 0.2em 0.4em;
  border: 1px solid #666;
  border-radius: 0.2em;
  font-size: 0.8em;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  white-space: nowrap;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
  box-shadow: none;
}

abbr[data-title]:hover::after {
  opacity: 1;
}

abbr.bild-tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -0.5em);
  background: none;
  padding: 0;
  border: none;
  border-radius: 0.2em;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
  width: 200px;
  height: auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

abbr.bild-tooltip:hover::after {
  opacity: 1;
  background-image: attr(data-img url);
}

.bild-tooltip {
  position: relative;
  text-decoration: underline dotted;
  cursor: help;
  color: black;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.tooltip-bild {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  border: 1px solid #666;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
  display: none;
  z-index: 999;
}

.bild-tooltip:hover .tooltip-bild {
  display: block;
}




abbr[data-title]:hover::after {
  opacity: 1;
}


/* ========== MARKIERUNGEN ==========
   Wortauswahl optisch hervorheben */
.word {
  cursor: pointer;
  border-radius: 0.2em;
  padding: 0 0.15em;
  transition: background-color 0.3s;
  background: none !important;
  font-family: 'Comic Neue', 'Comic Sans MS', 'Comic Sans', cursive, Arial, sans-serif;
  font-size: 1em;
}

.marked {
  background-color: #ffe599;
}

.word:hover {
  background-color: #cfe2ff;
  box-shadow: 0 0 2px #007bff;
}

/* Touch-Unterstützung für mobile Geräte */
.word:active,
.box:active,
.drag-box:active {
  transform: scale(1.05);
  opacity: 0.8;
  transition: all 0.2s ease;
}

/* Audio-Container Styling */
#kinderBild {
  transition: opacity 0.3s ease;
  cursor: pointer;
}

#kinderBild:hover {
  opacity: 0.8;
}

#kinderBild:active {
  transform: scale(0.98);
}

/* Verbesserte Touch-Targets */
@media (max-width: 768px) {
  .word,
  .box,
  .drag-box {
    min-height: 44px; /* Apple's empfohlene Mindestgröße für Touch-Targets */
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em;
  }
  
  .word {
    margin: 0.2em;
    border-radius: 0.3em;
  }
}

/* ========== INSTRUKTIONEN ==========
   Hinweistexte hervorheben */



   .app-frame {
    position: relative;
    overflow: visible;
  }


.instruction {
  background-color: #f2e9d7;
  border-left: 4px solid #c3b59c;
  padding: 0.8em 1em;
  margin: 2em 0 1.5em;
  font-family: 'Comic Neue', 'Comic Sans MS', 'Comic Sans', cursive, Arial, sans-serif;
  font-size: 0.95em;
  line-height: 1.8;
  font-weight: 500;
  color: #003366;
  border-radius: 0.4em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: visible;
}

.instruction-text {
  font-family: 'Comic Neue', 'Comic Sans MS', 'Comic Sans', cursive, Arial, sans-serif;
  font-size: 1.0em;
  flex-grow: 1;
}

.right-help {
  flex-shrink: 0;
  margin-left: 1em;
}


/* ========== BOXEN ==========
   Für markierte Informationen */
.box {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: #f0f0f0;
  padding: 0.4rem 0.6rem;
  margin: 0.2rem;
  border-radius: 0.5em;
  border: 1px solid #ccc;
  max-width: 100%;
  font-size: 1em;
}

.box input[type="text"] {
  border: none;
  outline: none;
  background: transparent;
  font-size: 1em;
  font-family: inherit;
  color: inherit;
  padding: 0;
  margin: 0;
  width: auto;
  flex: 0 1 auto;
  min-width: 1ch;
  max-width: 100%;
}

/* ========== TABELLE ==========
   Modern und flexibel */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 2em 0;
  table-layout: auto;
}

th,
td {
  border: 1px solid #aaa;
  padding: 0.6em;
  word-break: break-word;
  white-space: normal;
  text-align: center;
}

th {
  background-color: #dddddd;
  font-weight: normal;
}

/* ========== FLEXFELDER ==========
   Für Punktebild etc. */
#dotFieldContainer {
  display: flex;
  gap: 2em;
  align-items: flex-start;
  margin: 2em 0;
}

#dotFieldContainer {
  flex-direction: column;
}

/* ========== RESPONSIVE ==========
   Anpassung für kleinere Bildschirme */
@media (max-width: 768px) {
  #dotFieldContainer {
    flex-direction: column;
  }
  button {
    width: 100%;
    margin: 0.5em 0;
  }
}

#languageHelper {
  display: none;
}

/* Dezente Gestaltung für den Check-Button */
.secondaryButton {
    background-color: #e6f0fa;
    color: #003366;
    border: 1px solid #b3d1f0;
  }
  
  .secondaryButton:hover {
    background-color: #d9eafc;
    border-color: #80bfff;
    color: #002244;
  }
  
  html, body {
    height: auto;
    overflow-y: auto;
  }
  

  .modal {
    position: fixed;
  padding: 1.4rem 1.6rem;
    top: 3em;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.5); /* halbtransparent schwarzer Hintergrund */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    .modal{ margin-top: 1.2rem; }
@media (max-width: 720px){ .modal{ margin-top: 1.6rem; } }

  }
  
  .modal-content {
    background-color: white;
    width: 80vw;
    height: 80vh;
    padding: 2em;
    overflow: auto;
    border-radius: 0.5em;
    position: relative;
  }
  
  .modal.hidden {
    display: none;
  }
  
  .close-button {
    position: absolute;
    top: 1em;
    right: 1em;
    cursor: pointer;
    font-size: 1.5em;
  }
  
  .hidden {
    display: none;
  }
  
 /* Stil für den Hilfe-Link wie bei anderen Buttons */
.help-link {
  display: inline-block;
  padding: 0.3em 0.8em;
  margin-left: 1em;
  border-radius: 0.5em;
  font-size: 0.95em;
  font-family: 'Comic Neue', 'Comic Sans MS', 'Comic Sans', cursive, Arial, sans-serif;
  color: #333;
  border: none;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}


 
.app-frame {
  border: 8px solid #c3b59c;        /* Farbiger Rahmen */
  border-radius: 20px;              /* Abgerundete Ecken */
  padding: 2em;                     /* Innenabstand */
  margin: 2em auto;                 /* Abstand nach außen */
  max-width: 900px;                 /* Max. Breite */
  background-color: #fffefc;       /* Heller Hintergrund */
  box-shadow: 0 0 10px rgba(0,0,0,0.1); /* weicher Schatten */
}

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fdf6ec;
  border-bottom: 2px solid #ccc;
  padding: 0.5em 1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 999;
}

.logo {
  height: 2.5em;
}

.kinderbild {
  height: 4em;
}

.top-buttons button {
  margin-left: 0.5em;
  padding: 0.4em 1em;
  font-size: 1em;
  background: #d0e3f0;
  border: 1px solid #999;
  border-radius: 6px;
  cursor: pointer;
}

/* Abstand unter der fixierten Leiste */
body {
  margin-top: 4.5em;
}

.logo-fixed {
  position: fixed;
  top: 5em;              /* Abstand vom oberen Rand */
  left: -0.05em;             /* Abstand vom linken Rand */
  height: 12em;           /* Größe des Logos */
  z-index: 999;          /* Immer sichtbar */
}

#b_aufgabe,
#a_aufgabe,
#c_aufgabe,
#d_aufgabe,
#r_aufgabe {
  margin-top: 4em;
  padding: 0em;
  background-color: white;
  border-radius: 1em;
}

.top-bar-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  backdrop-filter: blur(10px);
  background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  z-index: 999;
  padding: 0.3em 0.5em;
  transform: translateY(0);
  transition: transform 0.4s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 0 0 1em 1em;
}
.top-bar-wrapper.hidden {
  transform: translateY(-100%);
}
.menu {
  display: flex;
  gap: 1em;
  align-items: center;
  font-size: 0.9em;
  font-family: sans-serif;
}
.menu-item {
  position: relative;
  cursor: pointer;
}
.menu-item:hover .menu-dropdown-content {
  display: block;
}
.menu-dropdown-content {
  display: none;
  position: absolute;
  top: 2em;
  left: 0;
  background: white;
  border: 1px solid #ccc;
  border-radius: 0.5em;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  padding: 0.5em 1em;
  font-size: 0.9em;
  white-space: nowrap;
  z-index: 1000;
}
.menu-item::after {
  content: '▼';
  font-size: 0.7em;
  margin-left: 0.3em;
}
.menu-dropdown-content a {
  display: block;
  padding: 0.3em 0;
  color: black;
  text-decoration: none;
}
.menu-dropdown-content a:hover {
  text-decoration: underline;
}
.menu-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1em;
  box-shadow: none;
  padding: 0;
  margin: 0;
}


.instruction-hervorgehoben {
  background-color: #d3eacb !important;
  border-left: 4px solid #6d9f4b;
  color: white !important;
  font-weight: bold;
}

.instruction-gruen {
  background-color: #8aac63 !important;
  border-left: 4px solid #5a7f3f;
  color: white !important;
  font-family: 'Comic Neue', 'Comic Sans MS', 'Comic Sans', cursive, Arial, sans-serif;
  font-size: 0.95em;
  font-weight: normal;
}

.instruction-gruen span {
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.4;
}



.instruction-orange {
  background-color: #e17f1d !important; /* Orange aus Screenshot */
  border-left: 4px solid #c4680d; /* etwas dunklerer Orangeton */
  color: white;
  font-family: 'Comic Neue', 'Comic Sans MS', 'Comic Sans', cursive, Arial, sans-serif;
  font-size: 0.95em;
  font-weight: normal;
}
.instruction-blau {
  background-color: #4f7ecf !important;
  border-left: 4px solid #3a5dab;
  color: white;
  font-family: 'Comic Neue', 'Comic Sans MS', 'Comic Sans', cursive, Arial, sans-serif;
  font-size: 0.95em;
  font-weight: normal;
}


.instruction-rot {
  background-color: #d12a1a; /* kräftiges Rot */
  border-left: 4px solid #a00;
  color: white;
  font-family: 'Comic Neue', 'Comic Sans MS', 'Comic Sans', cursive, Arial, sans-serif;
  font-size: 0.95em;
  font-weight: normal;
}

.drag-card:active {
  opacity: 0.6;
}
.drop-zone > .drag-card {
  margin-top: 0.3em;
}


#exportOverviewBtn img {
  height: 1.1em;
  vertical-align: middle;
  margin-right: 0.4em;
}

#exportOverviewBtn {
  display: flex;
  align-items: center;
  gap: 0.4em;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  padding: 0.3em 0.6em;
}


#btnUndo {
  font-size: 1em;
  margin-left: 0.5em;
  padding: 0.4em 0.8em;
  background-color: #e0e0e0;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

#btnUndo:hover {
  background-color: #d0d0d0;
}

.menu-button {
  font-size: 1.4em;
  background: none;
  border: none;
  cursor: pointer;
  margin: 0 0.3em;
}

.menu-button:hover {
  filter: brightness(85%);
}



.memory-card {
  perspective: 1000px;
  width: 8em;
  height: 8em;
  position: relative;
}

.memory-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.memory-card.flipped .memory-card-inner {
  transform: rotateY(180deg);
}

.memory-card-front, .memory-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #888;
  border-radius: 0.6em;
}

/* Sichtbare Seite zu Beginn */
.memory-card-front {
  background: repeating-linear-gradient(
    45deg,
    #d1e0e0,
    #d1e0e0 10px,
    #b0c4c4 10px,
    #b0c4c4 20px
  );
  font-family: 'Comic Neue', 'Comic Sans MS', 'Comic Sans', cursive, Arial, sans-serif;
  font-size: 1.2em;
  font-weight: bold;
  color: #003366;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}

/* Rückseite mit Inhalt */
.memory-card-back {
  background: white;
  transform: rotateY(180deg);
  text-align: center;
  padding: 0.5em;
  font-size: 1em; /* evtl. kleiner setzen */
  box-sizing: border-box; /* verhindert, dass Padding/Border die Größe aufblähen */
  overflow: hidden; /* verhindert Überlauf */
}

.memory-card-back img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}





/* Eckenbeschriftung */
.memory-card-front::before {
  position: absolute;
  top: 0.4em;
  left: 0.5em;
}
.memory-card-front::after {
  position: absolute;
  bottom: 0.4em;
  right: 0.5em;
}
.memory-card-front span.i {
  position: absolute;
  top: 0.4em;
  right: 0.5em;
}
.memory-card-front span.r {
  position: absolute;
  bottom: 0.4em;
  left: 0.5em;
}


@keyframes leuchten {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.8); }
  100% { filter: brightness(1); }
}

.leuchteffekt {
  animation: leuchten 0.6s ease;
}

.top-bar-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center; /* ✅ vertikal mittig */
  height: 3.5em; /* ✂️ Höhe bewusst begrenzt */
  padding: 0 1em;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1000;
}

.top-bar-wrapper .logo-icons img {
  height: 40px;
  margin-right: 0.3em;
}

.top-bar-wrapper .menu {
  display: flex;
  align-items: center;
  gap: 1em;
}


.instruction-box {
  background-color: #8aac63;
  color: white;
  border-radius: 1em;
  padding: 1em;
  margin: 2em auto;
  max-width: 600px;
  font-family: 'Comic Neue', 'Comic Sans MS', 'Comic Sans', cursive, Arial, sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.instruction-box h2 {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 1.2em;
}

.instruction-box img {
  height: 2em;
}

.instruction-box p {
  margin: 0.8em 0 0;
  font-size: 1.1em;
}


#b_aufgabe {
  min-height: 50px;
}


.hervor {
  background-color: #ffff99;
  color: #000;
  font-weight: bold;
  padding: 0.1em 0.2em;
  border-radius: 0.3em;
}

  .logo-fixed-left {
      position: fixed;
      top: 6em;
      left: 0.5em;
      height: 12em;
      z-index: 999;
    }
    .logo-fixed-right {
      position: fixed;
      top: 6em;
      right: 0.5em;
      height: 12em;
      z-index: 999;
    }
    .card-info {
      position: absolute;
      top: 4.5em;
      left: 1em;
      background: #ffffff;
      border-radius: 1em;
      box-shadow: 0 6px 14px rgba(0,0,0,0.12);
      overflow: hidden;
      width: 160px;
      font-size: 0.75em;
      line-height: 1.2;
      font-family: 'Comic Neue', 'Comic Sans MS', 'Comic Sans', cursive, Arial, sans-serif;
      z-index: 1000;
      transition: transform 0.3s ease;
    }
    .card-info-header {
      background-color: #e3f2fd;
      text-align: center;
      font-weight: bold;
      padding: 0.4em;
      color: #01579b;
    }
    .card-info-content {
      padding: 0.5em;
      font-weight: bold;
    }
    audio {
      display: none;
    }


    .dot {
      transition: all 0.2s ease;
    }
    
    .dot:hover {
      transform: scale(1.1);
      cursor: pointer;
    }
    
    .fuenfer-block {
      padding: 0.3em;
      border-radius: 0.4em;
      background: #f7f7f7;
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.05);
    }
    
    .dot-row {
      transition: background 0.2s ease;
    }
    
    .dot-row:hover {
      background: #f0f0f0;
      border-radius: 0.5em;
    }

    .dot-row {
      margin-bottom: 0.1em;
    }
    
    .dot-row.gruppenabstand {
      margin-bottom: 1em;
    }
    
    body {
      color: black;
      font-family: sans-serif;
    }
    .unterstreichbar {
      cursor: pointer;
      padding: 0.15em 0.3em;
      border-radius: 4px;
      transition: background-color 0.3s;
      font-size: 1em;
      background: none !important;
    }
    .unterstreichbar:hover {
      background-color: #fce8e6;
    }
      
    .unterstreichbar.aktiv {
      text-decoration: underline red;
      background-color: #fbb;
    }
    th {
      white-space: nowrap;
      text-align: center;
      color: black;
    }
    th, td {
vertical-align: middle;
text-align: center;
font-family: 'Comic Neue', Arial, sans-serif;
font-size: 1em;
color: black;
}

.unterstreichbar {
  cursor: pointer;
  display: inline-block;
  padding: 0.2em;
  background: none !important;
}
.unterstreichbar.aktiv {
  text-decoration: underline;
  background-color: #d7ebf9;
}


    .app-frame h2 {
      font-size: 1.3em;
      margin-bottom: 0.3em;
      margin-top: 0.3em;
      color: black;
    }
    .app-frame p {
      font-size: 1.5em;
      color: black;

       .app-frame {
  position: relative;
  overflow: visible;
}
    }


    .instruction div {
      line-height: 1.6em;
    }
    .instruction abbr[title] {
      font-size: 1em;
      color: black;
    }
    .auswertung-only .instruction,
    .auswertung-only .app-frame:not(#auswertungBox) {
      display: none !important;
    }
    .orange-frame {
      border: 4px solid orange !important;
    }
    .auswertung-only #auswertungBox {
      display: block !important;
    }


    .logo-fixed-left {
      position: fixed;
      top: 2em;
      left: 0em;
      height: 18em;
      z-index: 999;
    }
    .logo-fixed-right {
      position: fixed;
      top: 6em;
      right: 0.5em;
      height: 12em;
      z-index: 999;
    }
    audio {
      display: none;
    }

    #abschlussButton {
      position: fixed;
      bottom: 2vh;
      right: 2vw;
      background-color: #4CAF50;
      color: white;
      border: none;
      padding: 0.8em 1.2em;
      border-radius: 0.8em;
      font-size: 1em;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      cursor: pointer;
      z-index: 1000;
    }
  
    #abschlussButton:hover {
      background-color: #45a049;
    }


    .instruction-rot,
.instruction-rot * {
  color: white !important;
  font-size: 1em;
  line-height: 1.2;
}

.instruction-gruen,
.instruction-gruen * {
  color: white !important;
  font-size: 1em;
  line-height: 1.2;
}

.instruction-blau,
.instruction-blau * {
  color: white !important;
  font-size: 1em;
  line-height: 1.2;
}

.instruction-orange,
.instruction-orange * {
  color:  white !important;
  font-size: 1em;
  line-height: 1.2;
}

.reflektieren-row {
  display: flex;
  align-items: flex-start;
  margin-top: 2.5em;
}

.nachgedacht-btn {
  transform: scale(0.7); /* 70% Größe */
  transform-origin: left center;
  display: inline-flex;
  align-items: center;
  background: #bdbdb8;
  border-radius: 0.6em;
  padding: 0.21em 1.1em 0.21em 0.7em;
  font-size: 1.15em !important; /* vorher 1.6em, jetzt ca. 28% kleiner */
  font-family: 'Inter',Arial,sans-serif;
  font-weight: 600;
  color: #484849;
  box-shadow: 0 1px 6px #d4d4cc55;
  margin-right: 1.3em;
  min-width: 2em;
}

.nachgedacht-btn .icon {
  font-size: 1.15em;
  margin-right: 0.35em;
  color: #fff;
  opacity: 0.98;
  font-weight: 400;
  transform: translateY(-1px);
}
.nachgedacht-btn .text-grey { color: #484849; font-weight: 600;}
.nachgedacht-btn .text-white { color: #fff; font-weight: 700;}
.aufgabe-reflektieren-c {
  color: #1976d2;
  font-size: 1.32em;
  font-weight: 700;
  font-family: Georgia,serif;
}

#wissensspeicher-overlay { position: fixed; inset: 0; background: #0007; z-index: 9999; }
#wissensspeicher-content{
  max-width: 900px; width: 92vw; margin: 5vh auto;
  padding: 2em 2.2em; background: #fff; border-radius: 1.1em;
  box-shadow: 0 6px 32px #0002;
  max-height: 90vh;             /* wichtig */
  overflow-y: auto;             /* wichtig */
  position: relative;
}

.teacher-only { display: none; }
body[data-role="teacher"] .teacher-only { display: initial; } /* oder block/inline passend zum Element */




/* Icon-Buttons ohne Umrahmung */
.icon-btn{appearance:none; background:transparent; border:0; padding:.25rem; line-height:0; cursor:pointer}
.icon-btn:focus{outline:none}

/* Info-Dropdown wie bei Koordinaten (Schrift/Look aus deinem style.css) */
.menu-item{position:relative; color:#fff; font-weight:600}
.menu-item::after{content:" ▼"; font-size:.8em; margin-left:.25rem}
.menu-dropdown{position:absolute; top:120%; left:0; background:#fff; border:1px solid #e6e6e6; border-radius:.6rem; box-shadow:0 10px 24px #0002; min-width:180px; display:none}
.menu-dropdown a{display:block; padding:.6rem .8rem; color:#123; text-decoration:none}
.menu-dropdown a:hover{background:#f6f9f8}
.menu-item:hover .menu-dropdown{display:block}

/* Logo-Größe wie im Kapitel */
.brand{height:28px; width:auto}


.lehrer-badge{display:none;position:relative}
.lehrer-chip{height:22px;width:22px;border-radius:999px;background:#fff;color: #09368f;
             display:grid;place-items:center;font-weight:800;letter-spacing:.3px;font-size:.85rem;
             border:2px solid #fff8}
body[data-role="teacher"] .lehrer-badge{display:block}


/* Globale Icon-Buttons (aus Startseite übernommen) */
.icon-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: .25rem;
  cursor: pointer;
  line-height: 0;
}
.icon-btn img { height: 26px; width: auto; vertical-align: middle; }
.icon-btn:focus { outline: none; }
.icon-btn:focus-visible { outline: 2px solid #fff7; outline-offset: 2px; border-radius: 8px; }


.logo-side {
  flex-shrink: 0;
  max-width: 180px;
  position: fixed;
  left: 0;
  top: 5em;
  z-index: 900;
}



.task-card {
  background: #ffffff;
border-radius: 1em;
box-shadow: 0 6px 14px rgba(0,0,0,0.12);
overflow: hidden;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
display: inline-flex;
flex-direction: column;
height: 310px;
width: 260px;
flex-shrink: 0;
}

.task-card:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}

.task-header {
  background-color: #e3f2fd;
  text-align: center;
  font-weight: bold;
  padding: 0.5em;
  font-size: 0.9em;
  color: #01579b;
}

/* Spezielle Farbe für Üben-Karten */
#ueben-strip .task-header {
  background-color: #ee8f29;
  color: white;
}

/* Spezielle Farbe für Merken-Karten */
.scroll-section[data-section="wissen"] .task-header {
  background-color: #0b920f;
  color: white;
}

/* Spezielle Farbe für Erkunden-Karten */
#erkunden-strip .task-header {
  background-color: #01579b;
  color: white;
}

.task-title {
  padding: 0.6em 1em;
  font-size: 1.1em;
  font-weight: bold;
  color: #333;
}

.task-image {
  width: 100%;
  height: auto;
  max-height: 130px;
  object-fit: cover;
  background-color: #f9f9f9;
}

.task-image--ui-shot {
  object-fit: contain;
  object-position: center center;
  background: #f8fafc;
  padding: 0.35rem 0.45rem;
  box-sizing: border-box;
}

.task-footer {
  display: flex;
  justify-content: space-around;
  padding: 0.5em 0.8em;
  font-size: 0.85em;
  color: #555;
}

.footer-item {
  display: flex;
  align-items: center;
  gap: 0.3em;
}

.content-column {
  margin-left: -130px;
  margin-right: -300px;
  display: flex;
flex-direction: column;
gap: 2em;
padding: 1em;
}

.task-row {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
margin: 0em 0;
padding-left: 1em;  /* Abstand zur fixierten Logo-Seite */
padding-right: 2em; /* etwas Puffer am rechten Rand */
}

.task-row2 {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
margin: 0em 0;

padding-left: 1em;  /* Abstand zur fixierten Logo-Seite */
padding-right: 2em; /* etwas Puffer am rechten Rand */
}

.task-row3 {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
margin: 0em 0;

padding-left: 1em;  /* Abstand zur fixierten Logo-Seite */
padding-right: 0em; /* etwas Puffer am rechten Rand */
}

.task-grid {
display: flex;
flex-direction: row;
gap: 1em;
white-space: nowrap;

}

.task-grid2 {
display: flex;
flex-direction: row;
gap: 1em;
white-space: nowrap;
}
.task-grid3 {
display: flex;
flex-direction: row;
gap: 1em;
white-space: nowrap;
}

.section-title {
font-size: 1.5em;
font-weight: bold;
color: #01579b;
margin-bottom: 0.1em;
margin-top: 1em;
}

.task-row,
.task-row2,
.task-row3 {
scrollbar-width: none;      /* Firefox */
-ms-overflow-style: none;   /* IE/Edge */
}

.task-row::-webkit-scrollbar,
.task-row2::-webkit-scrollbar,
.task-row3::-webkit-scrollbar {
display: none;              /* Chrome, Safari */
}


#auswertungBox {
  max-width: 800px;
  margin: 2em auto;
  padding: 1em;
  border: 4px solid #333;
  background: #fff;
  text-align: center;
}

#auswertungBox table {
  width: 100%;
  margin-top: 1em;
  text-align: center;
}

#auswertungBox th,
#auswertungBox td {
  padding: 0.75em;
  border-bottom: 1px solid #ccc;
}

#auswertungBox table {
  table-layout: fixed;
}

#auswertungBox th,
#auswertungBox td {
  word-wrap: break-word;
  max-width: 150px;
}


#reportBackdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.25);
  display:none; align-items: center; justify-content: center; padding: 24px;
  z-index: 9999;
}
#reportBackdrop .modal {
  background:#fff; max-width: 960px; width: 100%;
  max-height: 85vh; overflow: auto; border-radius: 10px; padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.breakdown { font-size: .9em; color: #666; margin-top: 2px; }

/* === Sammelkarten: Breite der Abschnitte begrenzen === */
#a_aufgabe,
#b_aufgabe,
#c_aufgabe,
#d_aufgabe {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* auch dynamische Anweisungsboxen (grün/blau/orange/rot) einkapseln */
.instruction,
.instruction-gruen,
.instruction-blau,
.instruction-orange,
.instruction-rot {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  width: 100%;
}

/* Tabellen in Sammelkarten ebenfalls nicht überziehen lassen */
#a_aufgabe table,
#b_aufgabe table,
#c_aufgabe table,
#d_aufgabe table {
  
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

  /* Avatar-Dialog sicher sichtbar + klickbar */
  dialog#avatarDlg[open] { z-index: 4000; }
  dialog#avatarDlg::backdrop { background: rgba(0,0,0,.35); }
  /* Falls deine Topbar > z-index 1100 nutzt, ist 4000 hier sicher drüber */


  
  dialog#avatarDlg[open]{ z-index:4000; }
  dialog#avatarDlg::backdrop { background: rgba(0,0,0,.35); }
  .av-grid{ display:grid; grid-template-columns: 300px 1fr; gap:14px; }
  .av-preview{ display:flex; flex-direction:column; align-items:center; gap:10px; }
  .av-live{ width:260px; height:260px; border-radius:18px; border:1px solid #e5e7eb; box-shadow:0 4px 16px #0001; display:flex; align-items:center; justify-content:center; background:#f8fafc; }
  .av-actions{ display:flex; gap:.5rem; }
  .av-controls{ max-height:56vh; overflow:auto; padding-right:6px; }
  .av-row{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-bottom:8px; }
  .av-group{ margin:10px 0; }
  .av-label{ font-weight:600; margin-bottom:6px; }
  .av-thumbrow{ display:flex; gap:8px; flex-wrap:wrap; }
  .av-thumb{ width:64px; height:64px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px #0001; }
  .av-thumb.selected{ outline:2px solid #2563eb; }
  .av-footer{ display:flex; justify-content:flex-end; gap:.6rem; margin-top:12px; }



  /* Logo normal */
.tibra-logo {
  height: 2.4em;
  width: auto;
  max-width: 7.5rem;
  object-fit: contain;
  vertical-align: middle;
}

/* Topbar auf Handy optimieren */
@media (max-width: 768px) {
  .menu-button {
    padding: 0.1em 0.2em;
    font-size: 0.9em;
    min-width: 1.4em;
    height: 1.4em;
  }
  
  .menu {
    gap: 0.1em;              /* noch näher zusammen */
  }
  
  .auth {
    gap: 0.1em;              /* noch näher zusammen */
  }
  
  .top-bar-wrapper {
    height: 2.4em; /* noch kompakter */
    padding: 0.2em 0.4em;
    font-size: 0.85em;
  }
  
  .tibra-logo {
    height: 0.9em; /* deutlich kleiner */
    max-height: 1.2em;
    object-fit: contain;
  }

  .top-bar-wrapper .logo-icons img {
    height: 1.2em !important;
    margin-right: 0.2em;
  }
  
  /* Abstände zwischen Topbar-Bereichen reduzieren */
  .top-bar-center, .auth, .top-bar-right {
    gap: 0.2em;
  }
}

@media (max-width: 768px) {
  #kinderBild {
    max-width: 60px;
    height: auto;
  }
}


@media (max-width: 768px) {
  .task-card {
    max-width: 220px;
    font-size: 0.85em;
    margin: 0.5em auto;
  }
  .task-card img {
    max-height: 120px;
    object-fit: cover;
  }
}

/* ===== RESPONSIVE OPTIMIERUNGEN FÜR MOBILE ===== */
@media (max-width: 768px) {
  /* 1. Karten responsive machen */
  .scroll-strip .task-card {
    min-width: 120px;
    max-width: 140px;
    font-size: 0.85em;
    max-height: 200px;
  }
  
  .scroll-strip .task-card img {
    height: 110px;
  }
  
  .task-title {
    font-size: 0.75em;
    padding: 0.25em 0.4em 0.05em;
  }
  
  .task-header {
    padding: 0.25em 0.4em;
    font-size: 0.75em;
  }
  
  .task-footer {
    padding: 0.15em 0.4em 0.2em;
    font-size: 0.7em;
  }
  
  .footer-item {
    padding: 0.1em 0.3em;
    font-size: 0.7em;
  }
  
  /* 2. "Erkunden" Bereich kollapsibel machen */
  .scroll-title {
    flex: 0 0 100px;
    font-size: 0.9em;
    position: relative;
    background: white;
    padding-right: 0.5em;
  }
  
  .filter-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: var(--gruen);
    color: white;
    border: none;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .filter-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    display: none;
    padding: 1em;
    margin-top: 0.5em;
    max-width: 300px;
  }
  
  .filter-menu.active {
    display: block;
  }
  
  .filter-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8em;
  }
  
  .filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
  }
  
  .filter-group label {
    font-size: 0.8em;
    font-weight: 600;
    color: var(--gruen);
  }
  
  .filter-group select {
    padding: 0.4em;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.8em;
  }
  
  /* 3. Scroll-Pfeile anpassen */
  .scroll-arrow {
    width: 32px;
    height: 32px;
    font-size: 18px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* 4. Hero-Bereich kompakter */
  .hero {
    margin: 2em auto 1em;
    padding: 0 1em;
  }
  
  .hero h1 {
    font-size: 1.8em;
    margin: 0.1em 0;
  }
  
  .hero p {
    font-size: 0.9em;
    line-height: 1.4;
  }
  
  .hero-cta {
    gap: 0.6em;
    margin-top: 0.8em;
  }
  
  .btn {
    padding: 0.6em 1em;
    font-size: 0.9em;
  }
}

/* ===== STATUS-KASTEN AUTO-HIDE ===== */
.status-banner {
  animation: fadeOut 5s ease-in-out forwards;
  transition: opacity 0.3s ease;
}

.status-banner:hover {
  animation-play-state: paused;
  opacity: 1;
}

@keyframes fadeOut {
  0% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* Mobile: Status-Kasten kleiner und weniger störend */
@media (max-width: 768px) {
  .status-banner {
    bottom: 5px !important;
    right: 5px !important;
    padding: 6px 10px !important;
    font-size: 0.8em !important;
    max-width: calc(100vw - 20px);
    word-wrap: break-word;
  }
  
  /* Task Card auf Mobile fixiert halten */
  .card-info {
    position: absolute !important;
    top: 2em !important;
    left: 1em !important;
    z-index: 1000 !important;
  }
}


.card-box .speech-controls-compact{
  position: absolute !important;
  top: .6rem; 
  right: 1.2rem;
  z-index: 5;
  translate: 0;              /* verhindert subpixel-wobble */
  pointer-events: auto;
}
@media (max-width: 900px){
  .card-box .speech-controls-compact{ right: .6rem; top: .6rem; }
}

/* am besten in den injizierten Style-Block */
.card-box { position: relative; }


.card-box h2 { padding-right: 4.5rem; }  /* Platz für die drei Buttons */