/* Basisschrift und Layout des Stärken‑Sieb‑Digital‑Plugins */
.staerkensieb-digital-container {
  font-family: sans-serif;
  font-size: 14px;
  color: #333;
  /* Der Gesamtcontainer erhält rundum einen Innenabstand von 30 px,
     damit Inhalte nicht an den Seiten kleben. */
  padding: 30px;
  box-sizing: border-box;
  /* Weiss als Hintergrund, damit sich das Plugin vom Theme abhebt */
  background-color: #ffffff;
}

/*
 * Globale Farbvariablen für die einzelnen Kategorien.  Über die Klasse
 * `current-cat-A` (bzw. -B, -C, -D) wird auf dem App‑Container eine
 * CSS‑Variable `--accent-color` gesetzt. Alle Elemente, die auf diese
 * Variable zugreifen, nehmen automatisch die dunkle Farbe des
 * aktuellen Kreises an.  Dadurch lässt sich das Farbschema komplett
 * über das Stylesheet steuern, ohne in das JavaScript eingreifen zu
 * müssen.  Weitere Anpassungen (z. B. Hell‑Töne) können bei Bedarf
 * ebenfalls als Variable definiert werden.
 */
.current-cat-A { --accent-color: #007BFF; }
.current-cat-B { --accent-color: #E63946; }
.current-cat-C { --accent-color: #F4A261; }
.current-cat-D { --accent-color: #2A9D8F; }

/*
 * Hauptkreis: der Rand soll immer die aktuelle Akzentfarbe verwenden.
 * Statt hart verdrahteter Farben nutzen wir die CSS‑Variable
 * `--accent-color`. Dadurch passen sich die Ränder beim
 * Kategorienwechsel an.  Das gleiche gilt für die kleinen Tabs.
 */
.staerkensieb-main-bubble {
  border-color: var(--accent-color);
}

/* Farben der dünnen Trennlinien (Detailbereich und Abschnitte). Diese
 * Linien werden im JavaScript mit der Klasse `detail-separator`
 * versehen.  Die Höhe und Breite werden im CSS definiert, sodass das
 * Markup schlank bleibt.  Durch die Verwendung der Akzentfarbe
 * erhalten alle Separatoren die dunkle Farbe des aktuellen Kreises.
 */
.detail-separator {
  height: 2px;
  width: 100%;
  background-color: var(--accent-color);
}

/*
 * Formularfelder (Text, Textarea und Select) im Eingabe‑ und
 * Bearbeitungsmodus: Grenzen und Schriftfarbe orientieren sich an
 * `--accent-color`. So wird der graue Standardrand durch eine
 * farbige Kontur ersetzt und die Texte übernehmen ebenfalls die
 * Akzentfarbe.  Für deaktvierte Selects reicht der Rahmen, die
 * Hintergrundfarbe bleibt weiss.
 */
#staerkensieb-new-strength,
.inline-edit-input,
.cat-weight-select,
#staerkensieb-add-form .cat-weight-select,
#staerkensieb-add-form textarea {
  border: 1.5px solid var(--accent-color);
  color: var(--accent-color);
}

/* Platzhalterfarbe global über die Akzentfarbe steuern.  Durch die
 * Verwendung der CSS‑Variable lässt sich die Farbe dynamisch ändern,
 * ohne JavaScript einzusetzen.  Hinweis: die Opazität sorgt für
 * einen leicht abgeschwächten Platzhalter.
 */
#staerkensieb-new-strength::placeholder,
.inline-edit-input::placeholder,
textarea::placeholder {
  color: var(--accent-color);
  opacity: 0.8;
}

/* Stärken‑Tags im grossen Kreis: Farbe und Schriftgewicht richten
 * sich an der Akzentfarbe aus.  Das gleiche gilt für die
 * Stärken‑Bezeichnungen in der Detailansicht.  So erscheinen alle
 * Stärken durchgehend fett und farbig.
 */
/*
 * Stärken sowohl in der Wortwolke als auch in der Detailansicht
 * übernehmen die Akzentfarbe und werden fett dargestellt.  Durch
 * Platzierung der Regel am Ende des Stylesheets überschreiben wir
 * ältere Definitionen und stellen sicher, dass immer die aktuelle
 * Kreisfarbe genutzt wird.  Die Schriftgröße wird separat über
 * .tag-weight-X Klassen geregelt.
 */
.staerkensieb-tag,
.detail-strength {
  color: var(--accent-color) !important;
  font-weight: bold !important;
}

/* Alle Icon‑Buttons (Papierkorb, Stift, Speichern, Abbrechen und Menü)
 * sollen die Akzentfarbe nutzen.  Mit der Klasse `icon-button` wird
 * ausserdem eine vergrößerte Schrift für den Bearbeitungsmodus
 * erreicht.  Zusätzliche Klassen definieren spezifische Puffer und
 * Hover‑Effekte können hier zentral hinzugefügt werden.
 */
.icon-button {
  color: var(--accent-color);
  cursor: pointer;
  font-size: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Abstand rechts, damit der Text im Bearbeitungsmodus bündig
     ausgerichtet bleibt.  Bei Save- und Cancel‑Icons reduziert sich
     der Abstand automatisch, falls sie am Ende stehen. */
  margin-right: 0.5rem;
}

/* Spezieller Abstand für das Papierkorb‑Icon in der Inline‑Bearbeitung. */
.detail-delete.icon-button {
  margin-right: 1rem;
}

/* Das Menü in der oberen rechten Ecke besteht aus Emoji‑Icons.  Wir
 * positionieren es absolut im Container, damit es nicht am
 * Layoutfluss teilnimmt.  Die Icons erhalten denselben Abstand und
 * greifen auf die Akzentfarbe zu.
 */
.staerkensieb-menu {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 0.6rem;
  font-size: 1.6rem;
}
.staerkensieb-menu .menu-icon {
  color: var(--accent-color);
  cursor: pointer;
}

/* Untermenü für Exportoptionen.  Es erscheint unter dem Export‑Icon
 * und ist standardmäßig versteckt.  Mit einer absoluten Position
 * wird es rechts am Menü ausgerichtet.  Die Optionen sind fett,
 * groß geschrieben und erhalten bei Hover einen farbigen Hintergrund. */
.staerkensieb-export-submenu {
  position: absolute;
  top: 2.4rem;
  right: 0;
  display: none;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid var(--accent-color);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 100;
}
.staerkensieb-export-submenu .export-option {
  padding: 0.4rem 0.8rem;
  font-weight: bold;
  font-size: 1rem;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--accent-color);
  white-space: nowrap;
}
.staerkensieb-export-submenu .export-option:hover {
  background-color: var(--accent-color);
  color: #fff;
}

/* Zentriere das „Neue Stärke“‑Formular in der mobilen Ansicht und
 * vergrößere den Button. Durch `margin: auto` wird der Button
 * horizontal zentriert.  Ferner wird die Schriftgröße in den
 * Mini‑Kreisen leicht angehoben.
 */
@media (max-width: 768px) {
  #staerkensieb-new-add {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.4rem;
    padding: 0.5rem 1rem;
    display: block;
  }
  .mini-bubble {
    font-size: 1rem;
  }
  /* Zentriere die Mini‑Kreise im mobilen Layout vollständig */
  .staerkensieb-mini-circles {
    justify-content: center !important;
  }

  /* Zentriere die Buttons (Hinzufügen/Speichern und Abbrechen) im mobilen Layout */
  .staerkensieb-buttons-wrapper {
    justify-content: center;
    width: 100%;
  }

  /* Füge einen Abstand von 50px unter den Mini-Kreisen hinzu, um die
     Kategorien-Tabs vom nachfolgenden Inhalt abzusetzen. */
  .staerkensieb-mini-circles {
    margin-bottom: 50px;
  }
}

/* Neues Layout für Version 1.5: ein großer Kreis (Main-Bubble) und Mini-Kreise als Tabs */
.staerkensieb-main-container {
  text-align: center;
  margin-bottom: 1rem;
  /* Ermöglicht absolute Positionierung von SVG‑Titeln um den Kreis */
  position: relative;
  /* Erlaube, dass SVG‑Titel über den Container hinausragen */
  overflow: visible;
  /* Etwas Abstand zum linken Rand einfügen, damit der Bogen‑Text
     nicht abgeschnitten wird. */
  margin-left: 30px;
  /* Etwas Abstand nach oben, damit die geschwungene Überschrift
     oberhalb des Kreises nicht abgeschnitten wird. */
  margin-top: 30px;
}

/* Erlaube Überlauf von Titeln über die Container hinweg. Dies verhindert,
   dass der Bogen‑Text abgeschnitten wird, wenn er außerhalb des
   Listenbereichs verläuft. */
.staerkensieb-lists,
.staerkensieb-layout {
  overflow: visible;
}

/* Füge etwas Innenabstand hinzu, damit der kreisförmige Titel nicht über den
   Rand des Shortcodes hinausragt. Dadurch erhält der Text mehr Platz,
   insbesondere am linken und oberen Rand. */
/* Innenabstand des Shortcodes: 30px links und rechts, damit Kreistitel
   und andere Elemente nicht abgeschnitten werden. Oben bleibt ein kleiner
   Abstand für die Überschrift. */
.staerkensieb-lists {
  /* Der Listenbereich benötigt oben einen kleinen Abstand.  Die
     horizontalen und unteren Abstände werden bereits durch den
     Gesamtcontainer gesetzt. */
  padding-top: 1rem;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  background-color: #ffffff;
}
.staerkensieb-category-title {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
}

/* Überschrift in mobiler Ansicht: Standardmäßig ausblenden, erst in
   der Media Query sichtbar machen. */
.staerkensieb-mobile-title {
  display: none;
}

/* Mobile Titel wird standardmäßig ausgeblendet und nur auf kleinen
   Bildschirmen angezeigt. */
.staerkensieb-mobile-title {
  display: none;
}

/* Wenn die Überschrift direkt im Listen‑Container steht, soll sie
   eine ganze Flex‑Zeile einnehmen, damit das Layout darunter neu
   beginnt. */
.staerkensieb-lists > .staerkensieb-category-title {
  flex: 0 0 100%;
  width: 100%;
}
.staerkensieb-main-bubble {
  /* Die Größe des Hauptkreises wird etwas reduziert, damit der restliche Inhalt in der Bildschirmhöhe Platz findet. */
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-color: #eef5ff;
  border: 1px solid #cbd5e1;
  margin: 0 auto 1rem auto;
  position: relative;
  overflow: visible;
}

/* SVG‑Titel, der den Kategorienamen entlang eines Pfades um den Kreis anzeigt */
.staerkensieb-circle-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Der Text wird oberhalb des Kreises angezeigt; die Ausrichtung erfolgt
     über das SVG selbst. */
  overflow: visible;
  z-index: 1;
}

/* Layout: Hauptkreis links, Eingabe und Mini‑Kreise rechts */
.staerkensieb-layout {
  display: flex;
  /* Verhindert, dass die rechte Spalte unter den Kreis rutscht.
     Stattdessen bleibt die Spalte neben dem Kreis, auch wenn der
     verfügbare Platz knapp ist. Auf kleinen Bildschirmen kann der
     Benutzer horizontal scrollen. */
  flex-wrap: nowrap;
  /* Abstand zwischen dem Kreis und der rechten Spalte beträgt 40 px. */
  gap: 40px;
  align-items: flex-start;
  overflow-x: auto;
  /* Nutze die gesamte verfügbare Breite für den Kreis und die rechte Spalte */
  width: 100%;
}
.staerkensieb-layout .layout-left {
  flex: 0 0 auto;
  /* sorgt dafür, dass der Kreis nicht zu breit wird */
  /* Erlaube Überlauf des SVG‑Titels außerhalb des Containers. */
  overflow: visible;
}
.staerkensieb-layout .layout-right {
  /* Die rechte Spalte nimmt den restlichen Platz neben dem Hauptkreis ein.
     Durch flex: 1 wächst sie mit dem verfügbaren Raum.  Sie hat keine
     fixe maximale Breite mehr, damit das Eingabefeld und die Tabs bis
     zum rechten Rand des Detailbereichs reichen können. Ein Mindestmaß
     sorgt dafür, dass das Formular nicht zu schmal wird. */
  flex: 1 1 auto;
  /* Beschränke die rechte Spalte so, dass sie nicht über die Breite der Detailansicht hinausreicht. */
  width: 100%;
  max-width: 100%;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* Die rechte Spalte soll mindestens so hoch sein wie der große Kreis,
     damit die Mini‑Kreise am unteren Rand ausgerichtet werden können. */
  min-height: 400px;
}

/* Mini‑Kreise im rechten Bereich */
.staerkensieb-layout .staerkensieb-mini-circles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-start;
}

.staerkensieb-layout .mini-bubble {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.8rem;
  padding: 0.5rem;
  box-sizing: border-box;
  cursor: pointer;
  /* Ensure text is always visible on coloured backgrounds */
  color: #fff;
}
.staerkensieb-layout .mini-bubble.active {
  /* Hervorhebung für die aktuelle Kategorie falls dargestellt */
  /* Verwende keinen grauen Schatten; stattdessen erhält der aktive Tab
     einen farbigen Rand. Die Farbe wird durch currentColor (Textfarbe)
     bestimmt, die über JS gesetzt wird. */
  box-shadow: none;
  border: 3px solid currentColor;
}

/* Farbe und Schrift für Mini‑Kreise wird inline via JS gesetzt */

/* Detailansicht unterhalb des Layouts */
/* Detailbereich unterhalb des Layouts */
.staerkensieb-details {
  margin-top: 1rem;
  /* Weisser Hintergrund für die Detailansicht.  Durch einen
     zusätzlichen Innenabstand wird verhindert, dass Inhalte zu
     nahe an den Rand rücken. */
  background-color: #ffffff;
  padding: 0.5rem 30px 30px 30px;
}

/* Edit assignments in der Detailansicht (Icons und Gewichte) */
.edit-assignments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.edit-assignments .cat-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  /* Der Rand und die Schriftfarbe passen sich der Kategoriefarbe an. */
  border: 2px solid var(--cat-color);
  color: var(--cat-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  cursor: pointer;
  /* Standardhintergrund für die Zuordnungs‑Icons in der Detailansicht:
     weiss, damit nicht zugeordnete Icons klar erkennbar sind. */
  background-color: #fff;
}
.edit-assignments .cat-icon.active {
  /* Fülle das aktive Icon mit der Kategorie‑Farbe und setze den Text
     weiß. Die Farbe wird über --cat-color bereitgestellt. */
  background-color: var(--cat-color);
  color: #fff;
}

.edit-assignments .cat-weight-select {
  /* Größere Gewichtungs‑Selects in der Detailansicht */
  width: 50px;
  padding: 0.2rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 1rem;
}

/* Eingabebereich */
.staerkensieb-add-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 30px;
  margin-bottom: 1rem;
  align-items: stretch;
}
.staerkensieb-add-question {
  font-weight: bold;
  margin-bottom: 0.3rem;
}
.staerkensieb-add-form input[type='text'] {
  padding: 0.4rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  width: 100%;
}
.staerkensieb-assignments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* Wrapper für jedes Zuordnungs‑Icon mit zugehörigem Gewichtungs‑Select */
.assign-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.cat-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  /* Setze Rand und Schriftfarbe abhängig von der definierten
     Kategorie‑Farbe (--cat-color). Dies sorgt dafür, dass nicht
     zugeordnete Icons die korrekte Konturfarbe anzeigen. */
  border: 2px solid var(--cat-color);
  color: var(--cat-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  cursor: pointer;
  /* Standardhintergrund: weiss, damit nicht zugeordnete Icons klar
     erkennbar sind. */
  background-color: #fff;
}
/* Wenn eine Kategorie aktiv ist, soll der Hintergrund mit der
   entsprechenden Kategorie‑Farbe gefüllt werden und der Text weiß
   erscheinen. Die Farbe wird über die CSS‑Variable --cat-color
   bereitgestellt. */
.cat-icon.active {
  background-color: var(--cat-color);
  color: #fff;
}
.cat-weight-select {
  width: 50px;
  padding: 0.2rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: bold;
}
#staerkensieb-new-add {
  /* Zentriere die Schaltfläche horizontal, sowohl im Desktop- als auch im Mobil-Layout */
  align-self: center;
  margin-left: auto;
  margin-right: auto;
  display: block;
  padding: 0.4rem 0.8rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
  cursor: pointer;
  font-weight: bold;
}
#staerkensieb-new-add:hover {
  background-color: #f0f0f0;
}

/* Mini-Kreise unterhalb des Formulars */
.staerkensieb-mini-circles {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  /* Keine zusätzliche Höhe am oberen Rand – die Position wird durch die Flexbox
     der rechten Spalte bestimmt. */
  margin-top: 0;
}

/* Wenn die Mini‑Kreise innerhalb des linken Bereichs platziert werden,
   sollen sie sich unter dem Hauptkreis ausrichten. Durch "justify-content:
   center" und "margin-top" erhalten sie einen ruhigen Abstand zum Kreis. */
.staerkensieb-layout .layout-left .staerkensieb-mini-circles {
  /* Richte die Mini‑Kreise zentriert aus, wenn sie im linken Bereich stehen. */
  justify-content: center;
  margin-top: 0.5rem;
}
.mini-bubble {
  /* Mini‑Kreise als Tabs, ca. 100 px breit */
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  cursor: pointer;
  /* Text mittig platzieren und weiss einfärben, Farbe des Hintergrunds via JS */
  color: #fff;
}
/* Die Hervorhebung der aktiven Mini‑Blase wird per JavaScript mit einer
   aufgehellten Hintergrundfarbe gesetzt. Daher wird hier kein fester
   Hintergrund definiert. */
/* Aktiver Tab: hebe ihn durch einen zusätzlichen Rand hervor, ohne die
   Hintergrundfarbe zu verändern. Der Rand kann über CSS angepasst
   werden. */
.mini-bubble.active {
  /* Der aktive Mini‑Kreis soll einen farbigen Rand haben, der sich
     an der Textfarbe orientiert. Verwende currentColor, damit
     JavaScript die Farbe bei Aktivierung setzen kann. Es wird kein
     grauer Schatten mehr verwendet. */
  box-shadow: none;
  border: 3px solid currentColor;
}

/* Wenn die Mini‑Kreise in der rechten Spalte angezeigt werden, sollen sie am
   unteren Rand der Spalte ausgerichtet und nach rechts geschoben werden. */
.staerkensieb-layout .layout-right .staerkensieb-mini-circles {
  margin-top: auto;
  justify-content: flex-end;
}

/* Weisser Hintergrund für Tabellen in der Detailansicht */
.staerkensieb-details table {
  width: 100%;
  background-color: #ffffff;
}
.staerkensieb-details th,
/* Die Kopfzeile der Detailtabelle erhält einen hellblauen Hintergrund
   (#a0bad2), während die Datenzeilen weiterhin weiss bleiben. Das
   "!important" stellt sicher, dass Theme‑Styles diese Farbe nicht
   überschreiben. */
.staerkensieb-details th {
  background-color: #a0bad2 !important;
  color: #333;
  font-weight: bold;
}
.staerkensieb-details td {
  background-color: #ffffff;
}

/* Durchgestrichener Text für gelöschte Stärken in der Detailansicht */
.deleted-strength {
  text-decoration: line-through;
  color: #999;
  font-size: 1.2rem;
}

/* Fragen‑Slider: ordne Pfeile und Frage nebeneinander an und definiere Abstand */
.staerkensieb-question-slider {
  display: flex;
  align-items: center;
  /* Auf kleinen Bildschirmen zentrieren wir die Frage und Pfeile */
}
.staerkensieb-question-slider .question-text {
  font-size: 20px;
  margin-left: 20px;
  margin-right: 20px;
  white-space: normal;
  font-weight: bold;
}

/* Erhöhe die Schriftgröße für die erste Spalte (Stärke) und reduziere die Breite */
/* Erste Spalte (Stärke) schmaler und größere Schrift */
.staerkensieb-details td:nth-child(1),
.staerkensieb-details th:nth-child(1) {
  width: 15%;
  font-size: 1.4rem;
}

/* Abschnittsüberschrift innerhalb der Detailansicht (Fragen) */
.question-section th {
  background-color: #d7e8ff;
  color: #333;
  font-weight: bold;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Tabellenkopf (Stärke / Kategorien / Gewichtung) mit hellblauem Hintergrund */
.staerkensieb-details thead th {
  background-color: #a0bad2;
  color: #333;
  font-weight: bold;
}

/* Farbklassen für Kategorien (Hintergrundfarbe für Mini‑Kreise und
   aktive Icons). Die Werte lassen sich zentral anpassen. */
.color-A {
  background-color: #007BFF;
  border-color: #007BFF;
  color: #fff;
}
.color-B {
  background-color: #E63946;
  border-color: #E63946;
  color: #fff;
}
.color-C {
  background-color: #F4A261;
  border-color: #F4A261;
  color: #fff;
}
.color-D {
  background-color: #2A9D8F;
  border-color: #2A9D8F;
  color: #fff;
}

/* Farbklassen für Icons: nur der Rand bekommt die Farbe, der Hintergrund
   bleibt transparent. Der Text übernimmt ebenfalls die Farbe für die
   aktive Darstellung. */
/*
 * Farbklassen für Zuordnungs‑Icons. Jede Farbe setzt eine CSS‑Variable
 * --cat-color, die später für das Ausfüllen der aktiven Icons benutzt
 * wird. Die Farbe wird sowohl für die Rahmenfarbe als auch für die
 * Textfarbe gesetzt. Der Hintergrund bleibt transparent, bis das Icon
 * aktiv wird.
 */
.cat-icon.color-A {
  --cat-color: #007BFF;
  border-color: #007BFF;
  color: #007BFF;
}
.cat-icon.color-B {
  --cat-color: #E63946;
  border-color: #E63946;
  color: #E63946;
}
.cat-icon.color-C {
  --cat-color: #F4A261;
  border-color: #F4A261;
  color: #F4A261;
}
.cat-icon.color-D {
  --cat-color: #2A9D8F;
  border-color: #2A9D8F;
  color: #2A9D8F;
}

/* Größere Basisschrift für Tags in Kreis/Rechteck. Die speziellen
   Gewichtungsklassen (.tag-weight-1 … .tag-weight-5) bauen auf
   diesem Grundwert auf und erhöhen die Größe jeweils weiter. */
.staerkensieb-tag {
  font-size: 1rem;
}

/* Spezifische Anpassungen für das Zuordnungsformular: verwende die gleichen Größen
   wie in der Detailansicht. Diese Regeln überschreiben die allgemeinen
   .cat-icon und .cat-weight-select Definitionen, wenn das Formular
   verwendet wird. */
#staerkensieb-add-form .edit-assignments .cat-icon {
  width: 24px;
  height: 24px;
  font-size: 0.7rem;
}
#staerkensieb-add-form .edit-assignments .cat-weight-select {
  width: 40px;
  font-size: 0.75rem;
}

/* Im Eingabeformular: Zeige die Icons standardmäßig nur mit Kontur.
   Wenn aktiv, werden sie gefüllt. Diese Regeln setzen das
   Standardverhalten der .cat-icon Klassen außer Kraft. */
#staerkensieb-add-form .cat-icon {
  /* Nicht zugeordnete Kategorie‑Icons im Eingabeformular: weisser Hintergrund,
     der Rand und die Schriftfarbe werden über die Farbklasse (color‑A/B/C/D)
     gesetzt. Dadurch ist der Kontrast auch auf bunten Hintergründen gut erkennbar. */
  background-color: #fff;
  color: inherit;
}
#staerkensieb-add-form .cat-icon.active {
  /* Aktives Icon im Eingabeformular: fülle den Hintergrund mit der
     Kategorie‑Farbe und setze die Schrift weiß. */
  background-color: var(--cat-color);
  color: #fff;
}

/* Sprach-Flags im Toolbar */
.lang-flags {
  display: flex;
  gap: 0.4rem;
  margin-left: auto;
}
.lang-flag {
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
}

/* Hervorhebung der aktiven Sprache */
.lang-flag.active {
  transform: scale(1.2);
}

/*
 * Stil für den Button zum Ein‑ und Ausblenden der Detailansicht.
 * Standardmäßig wird ein Pfeil angezeigt, dessen Hintergrund
 * hellgrau ist, solange die Details verborgen sind.  Sobald die
 * Detailansicht geöffnet wird, wechselt der Hintergrund auf weiss.
 */
.staerkensieb-toggle-details {
  padding: 0.4rem 0.6rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 1rem;
  cursor: pointer;
  /* Der Toggle selbst bleibt transparent; die Kopfzeile (th) ist eingefärbt */
  background-color: transparent;
  color: #333;
}
.staerkensieb-toggle-details.active {
  background-color: transparent;
  color: #333;
}

/* Der Toggle‑Button innerhalb der Tabellenüberschrift soll am
   rechten Rand stehen. */
.staerkensieb-details th .staerkensieb-toggle-details {
  float: right;
}

/*
 * Responsive Layout für Smartphones (bis 768 px Breite).
 * Auf kleinen Bildschirmen werden alle Elemente untereinander
 * angeordnet: der grosse Kreis, das Eingabefeld, die Zuordnung mit
 * Gewichtung, die kleinen Kreise (Tabs) und danach der Detailbereich.
 */
@media (max-width: 768px) {
  /* Stapeln der Spalten übereinander */
  .staerkensieb-layout {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .staerkensieb-layout .layout-left,
  .staerkensieb-layout .layout-right {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* Auf Smartphones ist die Spalte flexibel in der Höhe */
    min-height: unset;
  }
  /* Der grosse Kreis füllt die Breite und behält seine Proportionen. */
  .staerkensieb-main-bubble {
    /* Verwende 95% der Breite des Containers und zentriere das Rechteck */
    /* Fülle die Breite vollständig aus, damit links und rechts der gleiche
       Abstand zum Rand bleibt.  Die Breite und maximale Breite sind auf
       100 % gesetzt; der Innenabstand des Containers sorgt für die
       Ränder. */
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    margin: 0 auto;
    /* Verwandle den Kreis in ein abgerundetes Rechteck in der mobilen Ansicht */
    border-radius: 20px;
    /* Sorge für eine Mindesthöhe, damit mindestens sieben Zeilen Platz haben */
    min-height: 200px;
    /* Innenabstand, damit die Stärken nicht am Rand kleben */
    padding: 10px;
  }

  /* Die umgebende Containerbox für den Kreis erhält keinen zusätzlichen
     linken Rand in der mobilen Ansicht. Setze margin-left und -right
     auf 0, damit der Abstand gleich verteilt ist. */
  .staerkensieb-main-container {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
  }

  /* Verstecke den bogenförmigen SVG‑Titel auf kleinen Bildschirmen */
  .staerkensieb-circle-title {
    display: none;
  }

  /* Zeige die mobile Überschrift oberhalb des Rechtecks */
  .staerkensieb-mobile-title {
    display: block;
    font-weight: bold;
    /* Größere Schrift für die mobile Überschrift */
    font-size: 1.6rem;
    margin-top: 0;
    margin-bottom: 0.3rem;
    text-align: center;
  }

  /* In der mobilen Darstellung sollen die Tags im Rechteck im normalen
     Dokumentenfluss erscheinen. Wir setzen sie auf static und geben
     einen kleinen Abstand nach unten. */
  .staerkensieb-main-bubble .staerkensieb-tag {
    position: static !important;
    display: block;
    margin: 0.2rem 0;
    left: unset !important;
    top: unset !important;
  }
  /* Füge vor der ersten und nach der letzten Stärke einen kleinen Abstand ein */
  .staerkensieb-main-bubble .staerkensieb-tag:first-of-type {
    margin-top: 0.4rem;
  }
  .staerkensieb-main-bubble .staerkensieb-tag:last-of-type {
    margin-bottom: 0.4rem;
  }

  /* Verberge die Detailansicht vollständig auf kleinen Bildschirmen */
  .staerkensieb-details {
    display: none;
  }

  /* Entferne seitliche Polsterung aus der Detailansicht auf mobilen
     Geräten, falls sie doch sichtbar wird (z.B. durch Theme‑Overrides).
     Die Tabelle darf die volle Breite des Bildschirms nutzen. */
  .staerkensieb-details {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }

  /* Größere Schrift für Tags innerhalb des Rechtecks */
  .staerkensieb-main-bubble .staerkensieb-tag {
    font-size: 1.2rem;
  }

  /* Größere Schrift für das Eingabefeld auf Mobilgeräten */
  #staerkensieb-new-strength {
    font-size: 1.8rem;
  }
  /* Eingabeformular nimmt volle Breite ein */
  .staerkensieb-add-form {
    width: 100%;
    /* Zentriere Inhalte im Formular (Icons, Button) */
    align-items: center;
  }

  /* Füge Abstand über dem Hinzufügen-/Speichern‑Button hinzu, damit
     dieser nicht direkt am Zuordnungsbereich klebt */
  #staerkensieb-new-add {
    margin-top: 0.6rem;
  }
  /* Mini‑Kreise (Tabs) zentriert unter dem Formular */
  .staerkensieb-layout .staerkensieb-mini-circles {
    justify-content: center;
    margin-top: 1rem;
  }

  /* Mini‑Kreise in zwei Reihen und als echte Kreise. Jeder Tab nimmt
     etwa die Hälfte der Breite ein. Die Höhe wird der Breite
     gleichgesetzt, sodass sich auf allen Geräten echte Kreise ergeben. */
  .staerkensieb-mini-circles .mini-bubble {
    width: calc(50% - 0.5rem);
    height: calc(50% - 0.5rem);
    margin: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* Reduziere den Innenabstand des Plugins auf Mobilgeräten. Statt 30px
     wird links und rechts sowie oben und unten ein einheitlicher
     Abstand von 15px verwendet. */
  .staerkensieb-digital-container {
    padding: 15px;
  }
}

/* Werkzeugleiste: Sprache, Details, Export */
.staerkensieb-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.staerkensieb-toolbar select,
.staerkensieb-toolbar button,
.staerkensieb-toolbar a {
  padding: 0.4rem 0.6rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
  cursor: pointer;
  text-decoration: none;
  color: #333;
}
.staerkensieb-toolbar a {
  display: inline-block;
}

/* Listenbereich */
.staerkensieb-lists {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
.staerkensieb-column {
  flex: 1 1 220px;
  min-width: 220px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.5rem;
}
.staerkensieb-column h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: bold;
}
.staerkensieb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 30px;
}
.staerkensieb-item {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 0.5rem;
  margin-bottom: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.staerkensieb-title {
  font-weight: bold;
  flex: 1 1 100%;
  word-break: break-word;
}
.staerkensieb-weight {
  width: 56px;
  padding: 0.2rem;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.staerkensieb-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.staerkensieb-cat-label {
  display: flex;
  align-items: center;
  /* etwas Platz zwischen Pfeilen und Text */
  gap: 0.3rem;
  gap: 0.15rem;
  font-size: 0.85rem;
}
.staerkensieb-delete {
  margin-left: auto;
  background: none;
  border: none;
  color: #c00;
  font-size: 1.2rem;
  cursor: pointer;
}
.staerkensieb-delete:hover {
  color: #900;
}

/* Drag‑&‑Drop Platzhalter */
.ui-state-highlight {
  height: 2.2em;
  background: #e5e5e5;
  border: 1px dashed #aaa;
  margin-bottom: 0.4rem;
}

/* Formular zum Hinzufügen neuer Einträge */
.staerkensieb-add-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}
#staerkensieb-new-strength {
  flex: 1 1 auto;
  padding: 0.4rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  /* Zweizeiliges Eingabefeld mit voller Breite der rechten Spalte */
  width: 100%;
  height: auto;
  min-height: 3.2em;
}
.staerkensieb-new-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.staerkensieb-new-cat-label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9rem;
}
.staerkensieb-add-form select {
  padding: 0.3rem;
  border: 1px solid #ccc;
  border-radius: 3px;
}
#staerkensieb-new-add {
  padding: 0.4rem 0.8rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
  cursor: pointer;
}
#staerkensieb-new-add:hover {
  background-color: #f0f0f0;
}

/* Detailtabelle */
.staerkensieb-details {
  margin-top: 1rem;
}

/*
 * Zusätzliche Anpassungen für Version 1.9.21 und höher
 * Diese Regeln überschreiben frühere Definitionen, um die
 * Schriftgrößen für Gewichtungen zu vergrößern und den
 * Abbrechen‑Button sowie weitere Layoutänderungen zu unterstützen.
 */

/* Größere Schrift und Breite für die Gewichtungs‑Selects */
.cat-weight-select {
  /* Erhöhe Breite und Schriftgröße für Gewichtungs‑Selektoren */
  width: 70px;
  font-size: 1.6rem;
}

/* Größere Schrift für das Eingabefeld */
#staerkensieb-new-strength {
  /* Noch größere Schrift im Eingabefeld */
  /* Noch größere Schrift im Eingabefeld (zwei Nummern grösser) */
  font-size: 1.6rem;
}

/* Stil für den Lösch‑Button im Bearbeitungsmodus.  Das Papierkorb‑Symbol
   erscheint rechts neben dem Eingabefeld und ist in rot gehalten. */
/* Eingabe‑Wrapper: positioniert den Löschbutton über dem Eingabefeld */
.staerkensieb-input-wrapper {
  position: relative;
  width: 100%;
}
#staerkensieb-delete-edit {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  border: none;
  background: transparent;
  /* Rote Farbe für den Papierkorb – mit !important, um Theme‑Styles
     zu überschreiben */
  color: #E63946 !important;
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
}

/* Buttons‑Wrapper: ordnet Hinzufügen/Speichern und Abbrechen in einer Zeile an */
.staerkensieb-buttons-wrapper {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: nowrap;
}


/* Größere Schrift für die Hinzufügen/Änderung‑Schaltfläche */
#staerkensieb-new-add {
  font-size: 1.4rem;
}

/* Stil für den Abbrechen‑Button neben dem Hinzufügen‑Button */
#staerkensieb-cancel-edit {
  border: none;
  background: transparent;
  /* Kräftig rote Farbe für das Abbrechen‑Kreuz */
  color: #E63946 !important;
  cursor: pointer;
  font-size: 1.6rem;
  margin-left: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* In der Detailansicht nur Kategorien A und B farbig füllen */
.edit-assignments .cat-icon.active.color-C,
.edit-assignments .cat-icon.active.color-D {
  background-color: #fff;
  color: var(--cat-color);
}

/* Farbige Darstellung des Details‑Toggles im eingeklappten Zustand */
/* Style für den Details‑Toggle‑Button: Standardmäßig transparent,
   kein Hintergrund. Der Pfeil selbst wird über JavaScript gesetzt. */
.staerkensieb-toggle-details {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

/* Responsive Anpassungen für Smartphones */
@media (max-width: 768px) {
  /* Einheitlicher Innenabstand für den gesamten Container */
  .staerkensieb-digital-container {
    padding: 15px;
  }
  /* Größere mobile Überschrift (bereits definiert, aber hier zur Sicherheit) */
  .staerkensieb-mobile-title {
    font-size: 1.6rem;
    margin-bottom: 0.3rem;
  }
  /* Größere Zuordnungs‑Icons und Selects */
  .staerkensieb-assignments .cat-icon {
    width: 32px;
    height: 32px;
  }
  .staerkensieb-assignments .cat-weight-select {
    width: 60px;
    font-size: 1rem;
  }
  /* Button „Neue Stärke“: in der mobilen Ansicht vollflächig (100 %) darstellen,
     zentrieren und mit größerer Schrift und Innenabstand versehen, damit er
     nicht abgeschnitten wird. */
  #staerkensieb-new-add {
    width: 100%;
    margin: 1rem auto 0 auto;
    text-align: center;
    font-size: 1.2rem;
    padding: 0.6rem 1rem;
    white-space: normal;
    display: block;
  }
  #staerkensieb-cancel-edit {
    /* positioniere das Abbrechen‑Icon rechts vom Speichern/Hinzufügen‑Button */
    margin-left: 0.5rem;
  }
  /* Mini‑Kreise zweispaltig anordnen */
  .staerkensieb-layout .staerkensieb-mini-circles {
    flex-wrap: wrap;
    justify-content: center;
  }
  .staerkensieb-layout .staerkensieb-mini-circles .mini-bubble {
    flex: 0 0 calc(50% - 1rem);
    max-width: calc(50% - 1rem);
    width: calc(50% - 1rem);
    /* Erhalte eine perfekte Kreisform durch Verwendung eines Seitenverhältnisses von 1:1 */
    aspect-ratio: 1 / 1;
    border-radius: 50%;
  }

  /* Füge einen großzügigen Innenabstand im Detailbereich hinzu, damit Inhalte nicht an den Rand stoßen */
  .staerkensieb-details {
    padding: 20px;
  }

  /* Größere Schriftgrößen innerhalb des Rechtecks für mobile Ansicht */
  .staerkensieb-tag {
    font-size: 1.2rem;
  }

  /* Zentriere den Fragenslider und seinen Text auf kleinen Bildschirmen */
  .staerkensieb-question-slider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  .staerkensieb-question-slider .question-text {
    text-align: center;
  }
}

/* Spiegelung für Stift‑Icon bei Hover in der Wortwolke */
.tag-edit-icon {
  transform: scaleX(-1);
  display: inline-block;
  margin-left: 0.3rem;
}

/* Anpassungen für die neue Listen‑Detailansicht */
.details-body .assignment-bars {
  /* Die farbigen Balken sollen erst über dem Text beginnen, nicht über dem Papierkorb.
     Verschiebe sie um die Breite des Papierkorb‑Icons (ca. 24px) plus den Abstand zum Text (40px). */
  margin-left: 60px;
}
.details-body .entry-body {
  display: flex;
  align-items: center;
  /* Abstand zwischen Papierkorb, Text und Stift: etwas reduziert (40px) */
  gap: 40px;
}
.details-body .entry-body .detail-edit {
  /* Stift direkt neben der Stärke anzeigen, nicht am Ende der Zeile */
  margin-left: 0;
  /* Spiegel den Stift horizontal, damit er zur Stärke zeigt */
  transform: scaleX(-1);
  /* Größere Schrift für den Stift, damit er deutlicher sichtbar ist */
  font-size: 1.2rem;
  display: inline-block;
}
.details-body .entry-body .detail-strength {
  flex-grow: 0;
}

/*
 * Override und Erweiterung für das neue Eintragsformular (Version 1.6.0).
 * Wir verwenden den ID‑Selektor für #staerkensieb-add-form, um ältere
 * Definitionen zu übersteuern. Das Formular wird vertikal strukturiert,
 * zeigt die Hauptfrage, ein Eingabefeld, die Zuordnungsicons mit
 * Gewichtungs‑Drop‑downs und eine Hinzufügen‑Schaltfläche.
 */
#staerkensieb-add-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
  align-items: flex-start;
  width: 100%;
}
#staerkensieb-add-form .staerkensieb-add-question {
  font-weight: bold;
  margin-bottom: 0.2rem;
}
#staerkensieb-add-form input[type='text'] {
  width: 100%;
  padding: 0.4rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
}
#staerkensieb-add-form .staerkensieb-assignments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
/* Im Eingabeformular: Standard‑Icons mit Kontur in der jeweiligen
   Farbe. Der Hintergrund ist weiss, damit unzugeordnete Icons
   deutlich erkennbar sind. */
#staerkensieb-add-form .cat-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--cat-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  cursor: pointer;
  background-color: #fff;
  color: var(--cat-color);
}
#staerkensieb-add-form .cat-icon.active {
  /* Aktives Icon im Eingabeformular: kompletter Kreis in der
     Kategorie‑Farbe und weisse Schrift */
  background-color: var(--cat-color);
  color: #fff;
}
#staerkensieb-add-form .cat-weight-select {
  width: 50px;
  padding: 0.2rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 0.8rem;
}
#staerkensieb-add-form #staerkensieb-new-add {
  align-self: flex-start;
  padding: 0.4rem 0.8rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
  cursor: pointer;
  font-weight: bold; /* Make the button text bold */
}
#staerkensieb-add-form #staerkensieb-new-add:hover {
  background-color: #f0f0f0;
}

/* Positioniere die Toolbar rechtsbündig: die Flags und Links erscheinen am rechten Rand */
.staerkensieb-toolbar {
  justify-content: flex-end;
}
.staerkensieb-table {
  width: 100%;
  border-collapse: collapse;
}
.staerkensieb-table th,
.staerkensieb-table td {
  border: 1px solid #ccc;
  padding: 0.4rem;
  text-align: left;
}
.staerkensieb-table th {
  background-color: #f0f0f0;
  font-weight: bold;
}

/* Aktionen in der Bearbeitungstabelle */
.staerkensieb-edit-table button.save-entry,
.staerkensieb-edit-table button.delete-entry {
  border: none;
  background: none;
  font-size: 1rem;
  cursor: pointer;
  margin-right: 0.3rem;
}
.staerkensieb-edit-table button.delete-entry {
  color: #c00;
}
.staerkensieb-edit-table button.save-entry {
  color: #007700;
}

/*
 * Kennzeichnung gelöschter Einträge in der Detailtabelle.  Gelöschte
 * Einträge werden im Kreis nicht mehr angezeigt, sollen im
 * Detailbereich aber noch mit durchgestrichenem Text und grauer
 * Schrift sichtbar bleiben, bis sie endgültig entfernt oder
 * wiederhergestellt werden.
 */
.deleted-entry td {
  text-decoration: line-through;
  color: #888;
}

/* Bearbeitungsindikator in der Detailtabelle (Pencil Icon) */
.edit-indicator {
  display: inline-block;
  margin-right: 0.4rem;
  font-size: 0.9rem;
  color: #666;
  vertical-align: middle;
}

/* Schlagwortwolke / Bubble View */
.staerkensieb-bubble-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-start;
}

.staerkensieb-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #eef5ff;
  color: #333;
  position: relative;
  text-align: center;
  padding: 0.4rem;
  box-sizing: border-box;
  overflow: hidden;
  word-break: break-word;
}

/* Gewichtungsgrößen für Kreise (1–5) */
.weight-1 {
  width: 80px;
  height: 80px;
  font-size: 12px;
}
.weight-2 {
  width: 100px;
  height: 100px;
  font-size: 14px;
}
.weight-3 {
  width: 120px;
  height: 120px;
  font-size: 16px;
}
.weight-4 {
  width: 140px;
  height: 140px;
  font-size: 18px;
}
.weight-5 {
  width: 160px;
  height: 160px;
  font-size: 20px;
}

.staerkensieb-bubble-text {
  display: block;
  pointer-events: none;
  padding: 0 0.3rem;
}

.staerkensieb-bubble-delete {
  position: absolute;
  top: 2px;
  right: 4px;
  background: transparent;
  border: none;
  color: #c00;
  font-size: 1rem;
  cursor: pointer;
  display: none;
}
.staerkensieb-bubble:hover .staerkensieb-bubble-delete {
  display: block;
}

/* ===== Kategorie-Bubble (eine pro Kategorie) ===== */
/* Container für die Wortwolke jeder Kategorie */
/*
 * Jede Kategorie besitzt genau einen runden Bereich (Bubble), in dem alle
 * zugeordneten Stärken als Wörter erscheinen. Wir positionieren die
 * Wörter absolut innerhalb des Kreises, daher muss der Container
 * relative sein und ein Überlaufen verhindern. Die Größe des Kreises
 * wird per CSS festgelegt und kann bei Bedarf angepasst werden.
 */
.staerkensieb-category-bubble {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background-color: #eef5ff;
  border: 1px solid #cbd5e1;
  position: relative;
  /* Wir setzen overflow sichtbar, damit lange Wörter auch außerhalb des Kreises sichtbar sind. */
  overflow: visible;
  margin-bottom: 1rem;
  padding: 0.5rem;
  box-sizing: border-box;
}

/* Tags (Wörter) innerhalb der Kategorie-Bubble */
/*
 * Jedes Wort in der Bubble wird absolut positioniert. Durch
 * translate(-50%, -50%) wird es mittig an der berechneten
 * Position ausgerichtet. Die weiße Schriftfarbe wurde bewusst
 * entfernt, damit die Farben aus den Gewichtungsklassen wirken können.
 */
/* Tags innerhalb der Kategorie‑Bubble werden absolut positioniert. Da wir die
   exakte linke und obere Position berechnen, verzichten wir hier auf einen
   CSS‑Transform. Dadurch berechnet jQuery UI die Position korrekt beim
   Draggen und verhindert eine ungewollte Begrenzung nach rechts. */
.staerkensieb-tag {
  position: absolute;
  white-space: nowrap;
  color: #333;
}

/* Schriftgrößen der Tags je nach Gewichtung (1 = klein, 5 = groß) */
.tag-weight-1 {
  /* Noch größere Schrift für das kleinste Gewicht. */
  font-size: 1.3rem;
}
.tag-weight-2 {
  /* Noch größere Schrift für Gewicht 2 */
  font-size: 1.5rem;
}
.tag-weight-3 {
  /* Noch größere Schrift für Gewicht 3 */
  font-size: 1.7rem;
}
.tag-weight-4 {
  /* Noch größere Schrift für Gewicht 4 */
  font-size: 1.9rem;
}
.tag-weight-5 {
  /* Noch größere Schrift für Gewicht 5 */
  font-size: 2.1rem;
}

/* === Detailbereich Listenansicht Anpassungen (Version 1.9.36) === */
/* Überschrift im Detailbereich größer */
.details-header {
  font-size: 20px;
}

/* Größere Schrift für die Überschrift im Detailbereich */
.details-header-label {
  font-size: 20px;
  font-weight: bold;
}

/* Fragenabschnitte: keine Trennlinie direkt unter der Frage. Die Trennlinie wird per JS nach den Stärken eingefügt. */
.question-section {
  border-bottom: none;
}

/* Edit‑Stift 60px rechts neben der Stärke und horizontal gespiegelt */
.details-body .detail-entry .detail-edit {
  /* Kein zusätzlicher Einzug: die Position wird allein durch den Gap definiert */
  margin-left: 0;
  /* Spiegel den Stift horizontal, damit er zur Stärke zeigt */
  transform: scaleX(-1);
  /* Größere Schrift für den Stift, damit er deutlicher sichtbar ist */
  font-size: 1.2rem;
}

/* Zuordnungsbalken beginnen auf Höhe des ersten Buchstabens */
.details-body .assignment-bars {
  /* Die farbigen Balken werden entsprechend der Breite des Papierkorb‑Symbols
     und des Abstandes eingerückt. Dadurch beginnen sie bündig mit dem
     ersten Buchstaben der Stärke. */
  margin-left: 60px;
}

/* Papierkorb-Icon im Detailbereich rot einfärben */
.details-body .detail-entry .detail-delete {
  color: #c00;
}

/* Inline‑Editierelemente im Detailbereich */
.details-body .inline-edit-input {
  width: 100%;
  padding: 0.3rem 0.4rem;
  font-size: 1rem;
  box-sizing: border-box;
}

.details-body .inline-edit-assign .cat-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  /* Die Farbe wird über die CSS‑Variable --cat-color gesetzt, die in den
     Klassen color-A/B/C/D definiert ist. Verwende diese sowohl für die
     Schriftfarbe als auch für den Rand. */
  color: var(--cat-color);
  border: 2px solid var(--cat-color);
  background-color: #ffffff;
}
.details-body .inline-edit-assign .cat-icon.active {
  background-color: var(--cat-color);
  color: #ffffff;
}
.details-body .inline-edit-assign .cat-weight-select {
  font-size: 0.9rem;
  width: 50px;
}
.details-body .inline-save {
  cursor: pointer;
  color: #008000;
  font-size: 1.2rem;
}
.details-body .inline-cancel {
  cursor: pointer;
  color: #c00;
  font-size: 1.2rem;
}

/* Größe der Header-Beschriftung im Detailbereich */
.details-header-label {
  font-size: 20px;
}

/* ------------------------------------------------------------------
 * Zusätzliche Styles für Version 1.9.53
 *
 * Tooltip‑Darstellung, größere Pfeile im Fragen‑Slider und
 * umfassende Anpassungen für die mobile Ansicht.  Diese Regeln
 * überschreiben vorangegangene Definitionen.
 */

/* Gemeinsame Tooltipdefinition für Menü‑Icons und Fragepfeile.
 * Die Tooltip‑Box erscheint beim Hover unterhalb des Icons mit
 * der im title‑Attribut angegebenen Beschriftung.  Die Schriftgröße
 * beträgt 16px, wie gewünscht.
 */

/* Vergrößere die Pfeile und die Frage im Fragen‑Slider.  Die
 * Pfeile werden etwa drei Größen größer und die Frage zwei Größen
 * größer.  Die Pfeile nehmen die Akzentfarbe an.
 */
.staerkensieb-question-slider .question-arrow {
  font-size: 2rem;
  line-height: 1;
  position: relative;
  cursor: pointer;
  color: var(--accent-color);
}
.staerkensieb-question-slider .question-text {
  font-size: 24px;
}

/* Einheitliche Schriftgröße für Eingabefelder und Inline‑Inputs.
 * Die Texte im Formular und in der Inline‑Bearbeitung erscheinen
 * jetzt gleich groß wie die Beschriftung der Buttons.  Die
 * Textfarbe nutzt die Akzentfarbe.
 */
#staerkensieb-new-strength,
.inline-edit-input {
  /* Schriftgröße 20px für das Eingabefeld.  Damit wird der Text sowohl
     beim Hinzufügen als auch beim Inline‑Bearbeiten vergrößert. */
  font-size: 20px;
  color: var(--accent-color);
}

/* Detailansicht: Wenn keine Stärken vorhanden sind, füge zwei
 * Leerzeilen (durch Zeilenumbrüche) ein, damit der Bereich nicht
 * gequetscht wirkt.  Wird über :empty::before umgesetzt.
 */
.details-body:empty::before {
  content: '\A\A';
  white-space: pre;
}

/* Mobile‑Optimierungen für Bildschirme bis 768px Breite.  Diese
 * Regeln ordnen Abstand, Zentrierung und Größen an, wie vom
 * Nutzer beschrieben.
 */
@media (max-width: 768px) {
  /* Abstand zwischen Menü und Titel */
  .staerkensieb-lists {
    margin-top: 50px;
  }
  /* Erhöhe die Größe und zentriere die Frage im Slider */
  .staerkensieb-question-slider {
    display: flex;
    align-items: center;
    width: 100%;
  }
  .staerkensieb-question-slider .question-text {
    flex: 1;
    text-align: center;
    font-size: 26px;
  }
  .staerkensieb-question-slider .question-arrow {
    font-size: 2.4rem;
  }
  /* Das rechte Pfeilchen rückt ganz nach rechts */
  .staerkensieb-question-slider .next {
    margin-left: auto;
  }
  /* Zentriere den Zuordnungsmechanismus und füge Abstand über dem
     Button ein. */
  #staerkensieb-add-form .staerkensieb-assignments {
    justify-content: center;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
  }
  /* Button mittig platzieren und mit Abständen oben (30px) und unten (80px)
     versehen.  Vermeide Seitenabstände.  Dies sorgt dafür, dass der
     „Neue Stärke“‑Button klar vom Zuordnungsmechanismus und den
     darunterliegenden Inhalten getrennt ist. */
  #staerkensieb-new-add {
    margin-top: 30px;
    margin-bottom: 80px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    /* Erhöhe die Schriftgröße des Buttons (zwei Nummern größer) */
    font-size: 1.6rem;
  }
  /* Zentriere die Buttons‑Zeile im mobilen Layout. Dadurch wird
   * der „Neue Stärke“‑Button auch horizontal mittig ausgerichtet,
   * unabhängig von anderen Elementen. */
  .staerkensieb-buttons-wrapper {
    justify-content: center;
  }
  /* Fügt der Detailansicht unten einen Abstand hinzu. */
  .staerkensieb-details {
    margin-bottom: 50px;
  }
}

/*
 * --------------------------------------------------------------------
 * Erweiterungen für Version 1.9.54
 *
 * Dieses Stylesheet fügt eine Sprachauswahl, erhöhte Tooltip‑Schriftgröße
 * und zusätzliche Abstände ein.  Darüber hinaus werden die
 * standardmäßigen System‑Tooltips durch eigene Elemente ersetzt, die eine
 * grössere Schrift (20px) nutzen und in der Akzentfarbe gehalten sind.
 */

/* Sprachmenü in der linken oberen Ecke.  Die Flags werden als Emoji
 * dargestellt und können per CSS skaliert werden.  Das Menü ist
 * absolut positioniert und nimmt nicht am Layoutfluss teil. */
.staerkensieb-language-menu {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 0.5rem;
  font-size: 1.6rem;
  z-index: 100;
}
/* Sprache‑Flaggen sind klickbar und nehmen die Akzentfarbe an, wenn
 * sie aktiv sind.  Die Schriftgröße wird geerbt. */
.staerkensieb-language-menu .language-flag {
  cursor: pointer;
  transition: transform 0.2s;
}
.staerkensieb-language-menu .language-flag.active {
  transform: scale(1.2);
}

/* Eigenes Tooltip für Elemente mit einem title‑Attribut (ausgenommen Menü-Icons und Sprachflags).
 * Beim Hover wird ein helles Feld mit der Akzentfarbe angezeigt. Dies
 * ermöglicht größere Schriftgrößen und Umbrüche, falls der System‑Tooltip
 * nicht ausreichend ist. Wir schließen Menü‑Icons und Sprachflags aus,
 * damit diese das Standard‑Tooltip verwenden. */
.staerkensieb-digital-app [title]:not(.menu-icon):not(.language-flag):hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border: 1px solid var(--accent-color);
  color: var(--accent-color);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 20px;
  max-width: 90vw;
  white-space: normal;
  word-break: break-word;
  z-index: 1000;
  pointer-events: none;
}

/* Abstand oberhalb der Detailansicht.  Dadurch rutscht die Liste
 * weiter nach unten und erzeugt den gewünschten Zwischenraum. */
.staerkensieb-details {
  margin-top: 50px;
}