/* Refactored CSS (v2.0.33): merged duplicate selectors per scope, cleaned tokens */
/* =====================================
   Stärken-Sieb – Design Tokens
   ===================================== */
/*
 * Achtung: CSS-Variablen dürfen sich nicht gegenseitig referenzieren.
 * In v2.0.32 gab es hier eine zyklische Definition (blau/text/border),
 * wodurch Browser die Variablen als "invalid" behandeln und dann viele
 * Farben auf Default/Schwarz fallen.
 *
 * Darum sind die Design-Tokens hier als echte Werte definiert.
 */
:root{
  /* Blau-Abstufungen (reduziert, rollenbasiert) */
  --ss-blue-deep: #356D9F;      /* Primary Blau */
  --ss-blue-muted: #A0BAD2;     /* dezent/disabled */
  --ss-blue-pale: #D7E8FF;      /* große Flächen */
  --ss-blue-verylight: #EEF5FF; /* Buttons/Highlights */

  /* Kreisfarben */
  --ss-blue: var(--ss-blue-deep);
  --ss-blue-light: var(--ss-blue-verylight);

  --ss-red: #E63946;
  --ss-red-light: #FBE7E9;

  --ss-yellow: #F4A261;
  --ss-yellow-light: #FFF2E5;

  --ss-green: #2A9D8F;
  --ss-green-light: #E5F5F1;

  /* Neutrals / UI roles */
  --ss-text: #222222;
  --ss-text-muted: #555555;
  --ss-border: #CBD5E1; /* ehemals --ss-slate-200 */
  --ss-surface: #F4F7FB;
  --ss-surface-2: #F8F9FA;
  --ss-surface-3: #F0F0F0;

  /* Grautöne (Legacy/Bestand: wird schrittweise auf Rollenvariablen umgestellt) */
  --ss-gray-600: #666666;
  --ss-gray-700: #888888;
  --ss-gray-800: #999999;
  --ss-gray-850: #AAAAAA;
  --ss-gray-300: #CCCCCC;
  --ss-gray-200: #DDDDDD;
  --ss-gray-150: #E0E0E0;
  --ss-gray-140: #E5E5E5;
  --ss-gray-130: #E8E8E8;
  --ss-gray-120: #ECECEC;
  --ss-gray-110: #F0F0F0;
  --ss-gray-105: #F8F9FA;
  --ss-gray-104: #F9F9F9;
  --ss-gray-103: #FAFAFA;

  /* Legacy Aliases (für vorhandene Regeln, werden schrittweise ersetzt) */
  --ss-white: var(--ss-surface);

  /* Defaults für Akzent (wird je Kategorie überschrieben) */
  --accent-color: var(--ss-blue);
  --accent-light: var(--ss-blue-light);
}


.staerkensieb-digital-container {
  font-family: sans-serif;
  font-size: 14px;
  color: var(--ss-text);
  padding: 20px 30px 30px 30px;
  box-sizing: border-box;
  background-color: var(--ss-white);
}

.staerkensieb-eval-admin input[type="text"],
.staerkensieb-eval-admin input[type="number"],
.staerkensieb-eval-admin textarea,
.staerkensieb-eval-admin select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.current-cat-A {
  --accent-color: var(--ss-blue);
  --accent-light: var(--ss-blue-light);
}

.current-cat-B {
  --accent-color: var(--ss-red);
  --accent-light: var(--ss-red-light);
}

.current-cat-C {
  --accent-color: var(--ss-yellow);
  --accent-light: var(--ss-yellow-light);
}

.current-cat-D {
  --accent-color: var(--ss-green);
  --accent-light: var(--ss-green-light);
}

.staerkensieb-main-bubble {
  border-color: var(--accent-color);
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background-color: var(--ss-blue-verylight);
  border: 1px solid var(--ss-slate-200);
  margin: 0 auto 1rem auto;
  position: relative;
  overflow: visible;
}

.detail-separator {
  height: 2px;
  width: 100%;
  background-color: var(--accent-color);
}

#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);
}

#staerkensieb-new-strength::placeholder,
.inline-edit-input::placeholder,
textarea::placeholder {
  color: var(--accent-color);
  opacity: 0.8;
}

.staerkensieb-tag,
.detail-strength {
  color: var(--accent-color) !important;
  font-weight: bold !important;
}

.icon-button {
  color: var(--accent-color);
  cursor: pointer;
  font-size: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.5rem;
}

.detail-delete.icon-button {
  margin-right: 1rem;
}

#staerkensieb-detail.staerkensieb-detail-input,
.staerkensieb-detail-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-y: hidden;
  resize: vertical;
  min-height: 80px;
}

.staerkensieb-ai-btn.button,
.ai-chip,
.ai-options button,
#staerkensieb-details-toggle,
.staerkensieb-toolbar button {
  background-color: var(--accent-light);
  border: 1px solid var(--accent-color);
  color: var(--accent-color);
  border-radius: 3px;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-weight: bold;
  font-size: 0.9rem;
}

.staerkensieb-inline-form {
  display: inline;
}

.staerkensieb-ai-btn.button:hover,
.ai-chip:hover,
.ai-options button:hover,
#staerkensieb-details-toggle:hover,
.staerkensieb-toolbar button:hover {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: var(--ss-white) !important;
}

.detail-extra {
  margin-top: 0.2rem;
  font-size: 0.85rem;
  color: inherit;
}

.staerkensieb-question-slider .question-arrow {
  color: var(--accent-color);
  width: 1.2rem;
  height: 1.2rem;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  font-size: 2rem;
  line-height: 1;
  position: relative;
  cursor: pointer;
}

.staerkensieb-question-slider .question-arrow.prev {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBkPSJNMTUgNmwtNiA2IDYgNiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+");
}

.staerkensieb-question-slider .question-arrow.next {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBkPSJNOSAxOGw2LTYtNi02IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=");
}

.staerkensieb-main-bubble.dense-15 .tag-weight-1 {
  font-size: 1.1rem;
}

.staerkensieb-main-bubble.dense-15 .tag-weight-2 {
  font-size: 1.3rem;
}

.staerkensieb-main-bubble.dense-15 .tag-weight-3 {
  font-size: 1.5rem;
}

.staerkensieb-main-bubble.dense-15 .tag-weight-4 {
  font-size: 1.7rem;
}

.staerkensieb-main-bubble.dense-15 .tag-weight-5 {
  font-size: 1.9rem;
}

.staerkensieb-main-bubble.dense-25 .tag-weight-1 {
  font-size: 0.9rem;
}

.staerkensieb-main-bubble.dense-25 .tag-weight-2 {
  font-size: 1.1rem;
}

.staerkensieb-main-bubble.dense-25 .tag-weight-3 {
  font-size: 1.3rem;
}

.staerkensieb-main-bubble.dense-25 .tag-weight-4 {
  font-size: 1.5rem;
}

.staerkensieb-main-bubble.dense-25 .tag-weight-5 {
  font-size: 1.7rem;
}

.staerkensieb-main-bubble.dense-30 .tag-weight-1 {
  font-size: 0.7rem;
}

.staerkensieb-main-bubble.dense-30 .tag-weight-2 {
  font-size: 0.9rem;
}

.staerkensieb-main-bubble.dense-30 .tag-weight-3 {
  font-size: 1.1rem;
}

.staerkensieb-main-bubble.dense-30 .tag-weight-4 {
  font-size: 1.3rem;
}

.staerkensieb-main-bubble.dense-30 .tag-weight-5 {
  font-size: 1.5rem;
}

.staerkensieb-details-wrapper {
  width: 100%;
}

.staerkensieb-menu {
  position: absolute !important;
  display: flex !important;
  gap: 0.9rem !important;
  font-size: 1.6rem;
  margin-left: 0 !important;
  align-items: flex-start !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
}

.staerkensieb-menu .menu-icon {
  color: var(--accent-color);
  cursor: pointer;
  font-size: 2.4rem !important;
}

.staerkensieb-export-submenu {
  position: absolute;
  top: 2.4rem;
  right: 0;
  display: none;
  flex-direction: column;
  background-color: var(--ss-white);
  border: 1px solid var(--accent-color);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 100;
}

#staerkensieb-digital-app {
  position: relative;
  padding-top: 130px;
}

.staerkensieb-version-label {
  position: static;
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--accent-color);
  text-align: right;
}

.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: var(--ss-white);
}

.staerkensieb-eval-items .eval-question-label {
  font-weight: bold;
  margin-bottom: 0.3rem;
  display: block;
}

.staerkensieb-eval-items .eval-user-input {
  width: 100%;
  box-sizing: border-box;
}

.staerkensieb-intro-heading {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.staerkensieb-intro-paragraph {
  margin-bottom: 0.6rem;
  line-height: 1.4;
}

#staerkensieb-greeting {
  display: none;
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: bold;
  font-size: 1rem;
  line-height: 1.3;
}

.staerkensieb-mini-circles,
.staerkensieb-layout .staerkensieb-mini-circles {
  margin-top: 50px;
  margin-bottom: 0 !important;
}

.menu-item-staerkensieb-account a {
  font-size: 1rem !important;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  background-color: var(--ss-blue-deep);
  border-radius: 50%;
  color: var(--ss-white) !important;
  position: relative;
}

#staerkensieb-evaluation-list {
  position: relative;
  padding-bottom: 2.5rem;
}

.staerkensieb-main-container {
  text-align: center;
  margin-bottom: 1rem;
  position: relative;
  overflow: visible;
  margin-left: 30px;
  margin-top: 20px !important;
}

.staerkensieb-lists,
.staerkensieb-layout {
  overflow: visible;
}

.staerkensieb-lists {
  padding-top: 1rem;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  background-color: var(--ss-white);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.staerkensieb-category-title {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
}

.staerkensieb-mobile-title {
  display: none;
}

.staerkensieb-lists > .staerkensieb-category-title {
  flex: 0 0 100%;
  width: 100%;
}

.staerkensieb-circle-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}

.staerkensieb-layout {
  display: flex;
  flex-wrap: nowrap;
  gap: 40px;
  align-items: flex-start;
  overflow-x: auto;
  width: 100%;
}

.staerkensieb-layout .layout-left {
  flex: 0 0 auto;
  overflow: visible;
}

.staerkensieb-layout .layout-right {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 420px;
}

.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;
  color: var(--ss-white);
}

.staerkensieb-layout .mini-bubble.active {
  box-shadow: none;
  border: 3px solid currentColor;
}

.staerkensieb-details {
  margin-top: 50px !important;
  background-color: var(--ss-white);
  padding: 0.5rem 30px 30px 30px;
}

.edit-assignments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.edit-assignments .cat-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--cat-color);
  color: var(--cat-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  cursor: pointer;
  background-color: var(--ss-white);
}

.edit-assignments .cat-icon.active {
  background-color: var(--cat-color);
  color: var(--ss-white);
}

.edit-assignments .cat-weight-select {
  width: 50px;
  padding: 0.2rem;
  border: 1px solid var(--ss-gray-300);
  border-radius: 3px;
  font-size: 1rem;
}

.staerkensieb-add-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 30px;
  margin-bottom: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.staerkensieb-add-question {
  font-weight: bold;
  margin-bottom: 0.3rem;
}

.staerkensieb-add-form input[type="text"] {
  padding: 0.4rem;
  border: 1px solid var(--ss-gray-300);
  border-radius: 3px;
  width: 100%;
}

.staerkensieb-assignments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.assign-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.cat-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--cat-color);
  color: var(--cat-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  cursor: pointer;
  background-color: var(--ss-white);
}

.cat-icon.active {
  background-color: var(--cat-color);
  color: var(--ss-white);
}

.cat-weight-select {
  width: 70px;
  padding: 0.2rem;
  border: 1px solid var(--ss-gray-300);
  border-radius: 3px;
  font-size: 1.6rem;
  font-weight: bold;
}

#staerkensieb-new-add {
  align-self: center;
  margin-left: auto;
  margin-right: auto;
  display: block;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--ss-gray-300);
  border-radius: 3px;
  background-color: var(--ss-white);
  cursor: pointer;
  font-weight: bold;
  font-size: 1.4rem;
}

#staerkensieb-new-add:hover {
  background-color: var(--ss-gray-110);
}

.staerkensieb-mini-circles {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
  margin-top: 0;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin: 0 !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
}

.staerkensieb-layout .layout-left .staerkensieb-mini-circles {
  justify-content: center;
  margin-top: 0.5rem;
}

.mini-bubble {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  cursor: pointer;
  color: var(--ss-white);
}

.mini-bubble.active {
  box-shadow: none;
  border: 3px solid currentColor;
}

.staerkensieb-layout .layout-right .staerkensieb-mini-circles {
  margin-top: 0 !important;
  justify-content: flex-start !important;
}

.staerkensieb-details table {
  width: 100%;
  background-color: var(--ss-white);
}

.staerkensieb-details th,
/* Die Kopfzeile der Detailtabelle erhält einen hellblauen Hintergrund
   (var(--ss-blue-muted)), während die Datenzeilen weiterhin weiss bleiben. Das
   "!important" stellt sicher, dass Theme‑Styles diese Farbe nicht
   überschreiben. */
.staerkensieb-details th {
  background-color: var(--accent-light) !important;
  color: var(--accent-color);
  font-weight: bold;
}

.staerkensieb-details td {
  background-color: var(--ss-white);
}

.deleted-strength {
  text-decoration: line-through;
  color: var(--ss-gray-800);
  font-size: 1.2rem;
  flex-grow: 1;
  margin-left: 1rem;
  margin-right: 1rem;
}

.staerkensieb-question-slider {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.staerkensieb-question-slider .question-text {
  font-size: 20px;
  margin-left: 20px;
  margin-right: 20px;
  white-space: normal;
  font-weight: bold;
  color: var(--accent-color);
}

.staerkensieb-details td:nth-child(1),
.staerkensieb-details th:nth-child(1) {
  width: 15%;
  font-size: 1.4rem;
}

.question-section th {
  background-color: var(--accent-light);
  color: var(--accent-color);
  font-weight: bold;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.staerkensieb-details thead th {
  background-color: var(--accent-light);
  color: var(--accent-color);
  font-weight: bold;
}

.color-A {
  background-color: var(--ss-blue);
  border-color: var(--ss-blue);
  color: var(--ss-white);
}

.color-B {
  background-color: var(--ss-red);
  border-color: var(--ss-red);
  color: var(--ss-white);
}

.color-C {
  background-color: var(--ss-yellow);
  border-color: var(--ss-yellow);
  color: var(--ss-white);
}

.color-D {
  background-color: var(--ss-green);
  border-color: var(--ss-green);
  color: var(--ss-white);
}

.cat-icon.color-A {
  --cat-color: var(--ss-blue);
  border-color: var(--ss-blue);
  color: var(--ss-blue);
}

.cat-icon.color-B {
  --cat-color: var(--ss-red);
  border-color: var(--ss-red);
  color: var(--ss-red);
}

.cat-icon.color-C {
  --cat-color: var(--ss-yellow);
  border-color: var(--ss-yellow);
  color: var(--ss-yellow);
}

.cat-icon.color-D {
  --cat-color: var(--ss-green);
  border-color: var(--ss-green);
  color: var(--ss-green);
}

.staerkensieb-tag {
  font-size: 1rem;
  position: absolute;
  white-space: nowrap;
  color: var(--ss-text);
}

#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;
}

#staerkensieb-add-form .cat-icon {
  background-color: var(--ss-white);
  color: var(--cat-color);
  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;
}

#staerkensieb-add-form .cat-icon.active {
  background-color: var(--cat-color);
  color: var(--ss-white);
}

.lang-flags {
  display: flex;
  gap: 0.4rem;
  margin-left: auto;
}

.lang-flag {
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
}

.lang-flag.active {
  transform: scale(1.2);
}

.staerkensieb-toggle-details {
  padding: 0.4rem 0.6rem;
  border: none;
  border-radius: 3px;
  font-size: 1rem;
  cursor: pointer;
  background-color: transparent;
  color: var(--accent-color);
}

.staerkensieb-toggle-details.active {
  background-color: transparent;
  color: var(--accent-color);
}

.staerkensieb-details th .staerkensieb-toggle-details {
  float: right;
}

.staerkensieb-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  justify-content: flex-end;
}

.staerkensieb-toolbar select,
.staerkensieb-toolbar button,
.staerkensieb-toolbar a {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--ss-gray-300);
  border-radius: 3px;
  background-color: var(--ss-white);
  cursor: pointer;
  text-decoration: none;
  color: var(--ss-text);
}

.staerkensieb-toolbar a {
  display: inline-block;
}

.staerkensieb-column {
  flex: 1 1 220px;
  min-width: 220px;
  background-color: var(--ss-gray-104);
  border: 1px solid var(--ss-gray-200);
  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: var(--ss-white);
  border: 1px solid var(--ss-gray-300);
  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 var(--ss-gray-300);
  border-radius: 3px;
}

.staerkensieb-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.staerkensieb-cat-label {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.85rem;
}

.staerkensieb-delete {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--ss-danger);
  font-size: 1.2rem;
  cursor: pointer;
}

.staerkensieb-delete:hover {
  color: var(--ss-danger-deep);
}

.ui-state-highlight {
  height: 2.2em;
  background: var(--ss-gray-140);
  border: 1px dashed var(--ss-gray-850);
  margin-bottom: 0.4rem;
}

#staerkensieb-new-strength {
  flex: 1 1 auto;
  padding: 0.4rem;
  border: 1px solid var(--ss-gray-300);
  border-radius: 3px;
  width: 100%;
  height: auto;
  min-height: 3.2em;
  font-size: 1.6rem;
}

.staerkensieb-detail-input,
.inline-details-input {
  width: 100%;
  padding: 0.4rem;
  border: 1px solid var(--ss-gray-300);
  border-radius: 3px;
  min-height: 3.2em;
  resize: vertical;
}

.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 var(--ss-gray-300);
  border-radius: 3px;
}

.staerkensieb-input-wrapper {
  position: relative;
  width: 100%;
}

#staerkensieb-delete-edit {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  border: none;
  background: transparent;
  color: var(--ss-red) !important;
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
}

.staerkensieb-buttons-wrapper {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: nowrap;
  margin-bottom: 40px !important;
}

#staerkensieb-cancel-edit {
  border: none;
  background: transparent;
  color: var(--ss-red) !important;
  cursor: pointer;
  font-size: 1.6rem;
  margin-left: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.edit-assignments .cat-icon.active.color-C,
.edit-assignments .cat-icon.active.color-D {
  background-color: var(--ss-white);
  color: var(--cat-color);
}

.tag-edit-icon {
  transform: scaleX(-1);
  display: inline-block;
  margin-left: 0.3rem;
}

.details-body .assignment-bars {
  margin-left: 60px;
}

.details-body .entry-body {
  display: flex;
  align-items: center;
  gap: 40px;
}

.details-body .entry-body .detail-edit {
  margin-left: 0;
  transform: scaleX(-1);
  font-size: 1.2rem;
  display: inline-block;
}

.details-body .entry-body .detail-strength {
  flex-grow: 0;
}

#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 var(--ss-gray-300);
  border-radius: 3px;
  box-sizing: border-box;
}

#staerkensieb-add-form .staerkensieb-assignments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

#staerkensieb-add-form .cat-weight-select {
  width: 50px;
  padding: 0.2rem;
  border: 1px solid var(--ss-gray-300);
  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 var(--ss-gray-300);
  border-radius: 3px;
  background-color: var(--ss-white);
  cursor: pointer;
  font-weight: bold;
}

#staerkensieb-add-form #staerkensieb-new-add:hover {
  background-color: var(--ss-gray-110);
}

.staerkensieb-table {
  width: 100%;
  border-collapse: collapse;
}

.staerkensieb-table th,
.staerkensieb-table td {
  border: 1px solid var(--ss-gray-300);
  padding: 0.4rem;
  text-align: left;
}

.staerkensieb-table th {
  background-color: var(--ss-gray-110);
  font-weight: bold;
}

.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: var(--ss-danger);
}

.staerkensieb-edit-table button.save-entry {
  color: var(--ss-success-deep);
}

.deleted-entry td {
  text-decoration: line-through;
  color: var(--ss-gray-700);
}

.edit-indicator {
  display: inline-block;
  margin-right: 0.4rem;
  font-size: 0.9rem;
  color: var(--ss-gray-600);
  vertical-align: middle;
}

.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: var(--ss-blue-verylight);
  color: var(--ss-text);
  position: relative;
  text-align: center;
  padding: 0.4rem;
  box-sizing: border-box;
  overflow: hidden;
  word-break: break-word;
}

.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: var(--ss-danger);
  font-size: 1rem;
  cursor: pointer;
  display: none;
}

.staerkensieb-bubble:hover .staerkensieb-bubble-delete {
  display: block;
}

.staerkensieb-category-bubble {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background-color: var(--ss-blue-verylight);
  border: 1px solid var(--ss-slate-200);
  position: relative;
  overflow: visible;
  margin-bottom: 1rem;
  padding: 0.5rem;
  box-sizing: border-box;
}

.tag-weight-1 {
  font-size: 1.3rem;
}

.tag-weight-2 {
  font-size: 1.5rem;
}

.tag-weight-3 {
  font-size: 1.7rem;
}

.tag-weight-4 {
  font-size: 1.9rem;
}

.tag-weight-5 {
  font-size: 2.1rem;
}

.details-header {
  font-size: 20px;
}

.details-header-label {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.3;
}

.question-section {
  border-bottom: none;
  padding: 0.3rem 0.5rem;
  margin-top: 0.5rem;
  font-weight: bold;
}

.details-body .detail-entry .detail-edit {
  margin-left: 0;
  transform: scaleX(-1);
  font-size: 1.2rem;
}

.details-body .detail-entry .detail-delete {
  color: var(--ss-danger);
}

.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;
  color: var(--cat-color);
  border: 2px solid var(--cat-color);
  background-color: var(--ss-white);
}

.details-body .inline-edit-assign .cat-icon.active {
  background-color: var(--cat-color);
  color: var(--ss-white);
}

.details-body .inline-edit-assign .cat-weight-select {
  font-size: 0.9rem;
  width: 50px;
}

.details-body .inline-save {
  cursor: pointer;
  color: var(--ss-success);
  font-size: 1.2rem;
}

.details-body .inline-cancel {
  cursor: pointer;
  color: var(--ss-danger);
  font-size: 1.2rem;
}

#staerkensieb-new-strength,
.inline-edit-input {
  font-size: 20px;
  color: var(--accent-color);
}

.details-body:empty::before {
  content: "\A \A ";
  white-space: pre;
}

.staerkensieb-language-menu {
  position: static;
  display: flex;
  gap: 0.5rem;
  font-size: 1.6rem;
  z-index: 100;
}

.staerkensieb-topbar {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000 !important;
  pointer-events: auto !important;
  margin-bottom: 0;
}

.staerkensieb-language-menu .language-flag {
  cursor: pointer;
  transition: transform 0.2s;
}

.staerkensieb-language-menu .language-flag.active {
  transform: scale(1.2);
}

.staerkensieb-dynamic-intro {
  margin-top: 20px;
  font-size: 1rem;
  line-height: 1.5;
}

.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: var(--ss-white);
  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;
}

.staerkensieb-eval-items .eval-disabled h4,
.staerkensieb-eval-items .eval-disabled p {
  text-decoration: line-through;
  opacity: 0.6;
}

.staerkensieb-eval-items {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.staerkensieb-evaluation-list,
.staerkensieb-evaluation-list > li,
.staerkensieb-evaluation-list .staerkensieb-eval-item {
  list-style: none !important;
}

.staerkensieb-eval-items .staerkensieb-eval-item {
  list-style: none;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--ss-white);
  border-radius: 8px;
  background-color: var(--ss-gray-104);
}

.staerkensieb-eval-items .staerkensieb-eval-item h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--accent-color, var(--ss-text));
}

.staerkensieb-eval-items .staerkensieb-eval-item p {
  margin: 0 0 1.25rem 0;
  font-size: 1.1rem;
}

.staerkensieb-eval-items .eval-result {
  margin-top: 0.8rem;
  padding: 0.8rem;
  border: 1px solid var(--ss-gray-150);
  border-radius: 4px;
  background-color: var(--ss-white);
  color: var(--ss-white) !important;
}

.staerkensieb-eval-items .eval-download-btn {
  margin-top: 1rem;
}

.staerkensieb-evaluation-list,
.staerkensieb-eval-items .staerkensieb-eval-item {
  background-color: var(--ss-blue-ice) !important;
}

.staerkensieb-evaluation-list h3,
.staerkensieb-eval-info,
.staerkensieb-eval-info h3,
.staerkensieb-eval-info p {

  color: var(--ss-white) !important;
  text-align: left !important;
  margin-left: 0 !important;
}

.staerkensieb-evaluation-list h3,
.staerkensieb-eval-info {
  padding-left: 1rem;
}

.staerkensieb-evaluation-list h3 {
  font-weight: 700 !important;
}

.staerkensieb-eval-info {
  margin-bottom: 20px !important;
}

.staerkensieb-eval-items .eval-run-btn,
.staerkensieb-eval-items .eval-download-btn {
  background-color: var(--ss-white) !important;
  border-color: var(--ss-white) !important;
  color: var(--ss-white) !important;
  font-size: 1.1rem !important;
  margin-bottom: 1.25rem !important;
}

.staerkensieb-evaluation-list {
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

#staerkensieb-new-add.staerkensieb-new-btn {
  border: none;
  padding: 0.4rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  background-color: var(--accent-light);
  color: var(--ss-text);
}

.details-header-style {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.5rem;
  font-weight: bold;
  font-size: 20px;
  background-color: var(--accent-light);
  color: var(--ss-text);
}

.no-strengths-message {
  padding: 0.6rem 0.5rem;
  font-style: italic;
  color: var(--ss-text-muted);
}

.detail-entry {
  padding: 0.4rem 0.2rem;
  border-bottom: 1px solid var(--ss-gray-120);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.assignment-bars {
  display: flex;
  gap: 2px;
  margin-bottom: 2px;
  margin-left: 60px;
}

.assignment-bar {
  display: inline-block;
  width: 20px;
  height: 3px;
}

.edit-inline-container {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.edit-first-line {
  display: flex;
  align-items: center;
}

.inline-edit-input {
  flex-grow: 1;
  font-size: 1rem;
}

.detail-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: 1rem;
}

.entry-body {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.detail-strength {
  margin-left: 1rem;
  margin-right: 1rem;
}

.detail-restore {
  cursor: pointer;
}

.staerkensieb-evals-export-import {
  margin-top: 20px;
}

.staerkensieb-model-costs {
  border-collapse: collapse;
}

.staerkensieb-model-costs th {
  text-align: left;
  padding-right: 10px;
}

.menu-icon {
  font-size: 24px;
  color: var(--ss-white);
}

.et-pb-icon.divi-icon-size {
  font-size: 20px !important;
  line-height: 1;
}

.eval-image {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.eval-result {
  margin-top: 10px;
}

.eval-history-controls {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.eval-history-label {
  cursor: pointer;
  text-decoration: underline;
}

.eval-history-prev,
.eval-history-next {
  cursor: pointer;
  font-size: 1.4rem;
}

.eval-guest-note {
  margin-top: 0.5rem;
}

.eval-download-btn {
  margin-top: 1rem;
}

.staerkensieb-config-intro {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.staerkensieb-language-menu-shortcode {
  font-size: 1.6rem;
}

.staerkensieb-language-menu-shortcode .staerkensieb-lang-flag {
  cursor: pointer;
  transition: transform 0.2s;
  display: inline-block;
  margin-right: 0.5rem;
}

.staerkensieb-language-menu-shortcode .staerkensieb-lang-flag:last-child {
  margin-right: 20px;
}

.staerkensieb-language-menu-shortcode .staerkensieb-lang-flag:hover {
  transform: scale(1.1);
}

.staerkensieb-language-menu-shortcode .staerkensieb-lang-flag:focus {
  outline: none;
}

.staerkensieb-topbar .staerkensieb-language-menu {
  display: none !important;
}

.staerkensieb-mini-circles .mini-bubble {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.625rem 0.625rem !important;
  margin: 0 0.25rem !important;
  border-radius: 5px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border: 2px solid currentColor !important;
  background-color: transparent !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
  color: currentColor !important;
  text-align: center !important;
  text-decoration: none !important;
}

.staerkensieb-mini-circles .mini-bubble.color-A {
  color: var(--ss-blue) !important;
  border-color: var(--ss-blue) !important;
}

.staerkensieb-mini-circles .mini-bubble.color-B {
  color: var(--ss-red) !important;
  border-color: var(--ss-red) !important;
}

.staerkensieb-mini-circles .mini-bubble.color-C {
  color: var(--ss-yellow) !important;
  border-color: var(--ss-yellow) !important;
}

.staerkensieb-mini-circles .mini-bubble.color-D {
  color: var(--ss-green) !important;
  border-color: var(--ss-green) !important;
}

.staerkensieb-mini-circles .mini-bubble.color-A.active {
  background-color: var(--ss-blue) !important;
  color: var(--ss-white) !important;
}

.staerkensieb-mini-circles .mini-bubble.color-B.active {
  background-color: var(--ss-red) !important;
  color: var(--ss-white) !important;
}

.staerkensieb-mini-circles .mini-bubble.color-C.active {
  background-color: var(--ss-yellow) !important;
  color: var(--ss-white) !important;
}

.staerkensieb-mini-circles .mini-bubble.color-D.active {
  background-color: var(--ss-green) !important;
  color: var(--ss-white) !important;
}

.staerkensieb-mini-circles,
.staerkensieb-mini-circles .mini-bubble {
  pointer-events: auto !important;
}

.account-icon .login-label {
  font-size: 1rem !important;
  font-weight: bold !important;
}

.staerkensieb-account-link .login-label {
  font-size: 1rem !important;
  font-weight: bold !important;
}

.slide-up {
  animation: slideUp 0.5s ease-out forwards;
}

.staerkensieb-ai-panel {
  border: 1px solid var(--accent-color, var(--ss-gray-150));
  background: var(--accent-light, var(--ss-gray-103));
  padding: 1rem;
  border-radius: 4px;
  font-size: 0.9rem;
}

.staerkensieb-ai-panel .staerkensieb-ai-toggle {
  display: inline-block;
  margin-bottom: 0.5rem;
}

.staerkensieb-ai-buttons .staerkensieb-ai-btn {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

.staerkensieb-ai-results {
  margin-top: 0.75rem;
}

.ai-chip {
  background: var(--ss-gray-130);
  border: 1px solid var(--ss-gray-300);
  border-radius: 3px;
  padding: 0.25rem 0.5rem;
  display: inline-block;
  cursor: pointer;
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
  color: var(--accent-color) !important;
}

.ai-chip:hover {
  background: var(--accent-light);
  color: var(--accent-color) !important;
}

.ai-options button.selected {
  background: var(--accent-color);
  color: var(--ss-white);
}

.staerkensieb-ai-panel .staerkensieb-ai-btn,
.staerkensieb-ai-panel .staerkensieb-ai-toggle {
  color: var(--accent-color) !important;
}

.staerkensieb-ai-panel .staerkensieb-ai-btn:hover,
.staerkensieb-ai-panel .staerkensieb-ai-toggle:hover {
  background-color: var(--accent-color);
  color: var(--ss-white) !important;
}

.staerkensieb-ai-results,
.staerkensieb-ai-results *:not(button),
.staerkensieb-ai-panel > strong,
.ai-question,
.ai-question *:not(button),
.staerkensieb-ai-debug {
  color: var(--accent-color) !important;
}

#staerkensieb-new-add,
#staerkensieb-add-form #staerkensieb-new-add {
  background-color: var(--accent-light) !important;
  border: 1px solid var(--accent-color) !important;
  color: var(--accent-color) !important;
}

#staerkensieb-new-add:hover,
#staerkensieb-add-form #staerkensieb-new-add:hover {
  background-color: var(--accent-color) !important;
  color: var(--ss-white) !important;
  border-color: var(--accent-color) !important;
}

.ai-similar-list,
.ai-suggestion-list,
.ai-options {
  margin-left: 0.5rem;
}

.staerkensieb-ai-debug {
  white-space: pre-wrap;
  margin-top: 0.5rem;
  background: var(--ss-gray-105);
  border: 1px dashed var(--ss-gray-300);
  padding: 0.5rem;
  font-size: 0.75rem;
  border-radius: 4px;
}

.ai-target {
  font-weight: bold;
  color: var(--accent-color);
  margin-left: 0.25rem;
}

.ai-question {
  margin-bottom: 0.5rem;
}

.ai-options {
  margin-top: 0.25rem;
}

.ai-options button {
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
}

.staerkensieb-icon {
  color: var(--accent-color);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =====================================
   JS-generierte Elemente (keine Inline-Styles)
   ===================================== */

.staerkensieb-dynamic-intro{
  color: var(--accent-color);
}

.ss-mt-05{ margin-top: 0.5rem; }

/* Frage-Slider Pfeile: Icons via CSS (SVG Data-URI nutzt currentColor) */
.question-arrow{
  width: 1.2rem;
  height: 1.2rem;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  color: var(--accent-color);
  cursor: pointer;
}
.question-arrow.prev{
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBkPSJNMTUgNmwtNiA2IDYgNiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+');
}
.question-arrow.next{
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBkPSJNOSAxOGw2LTYtNi02IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=');
}

/* Details Bereich */
#staerkensieb-details{ background-color: var(--accent-light); color: var(--ss-text); }
#staerkensieb-details .question-section {
  background-color: var(--accent-light);
  color: var(--accent-color);
}

/* Überschriften im Details-Bereich sollen die Kreisfarbe tragen */
#staerkensieb-details h1,
#staerkensieb-details h2,
#staerkensieb-details h3,
#staerkensieb-details .details-header-label{
  color: var(--accent-color);
}

/* Zuordnungsbalken */
.assignment-bar--A{ background-color: var(--ss-blue); }
.assignment-bar--B{ background-color: var(--ss-red); }
.assignment-bar--C{ background-color: var(--ss-yellow); }
.assignment-bar--D{ background-color: var(--ss-green); }

/* Inline Edit (kontextual, um globale Kollisionen zu vermeiden) */
#staerkensieb-details .inline-edit-assign{ display:flex; flex-wrap:wrap; gap:0.4rem; margin-left: 1rem; }
#staerkensieb-details .inline-detail-line{ display:flex; flex-direction:column; margin-left: 1rem; margin-top: 0.4rem; }

/* Hilfe Tooltip */
.staerkensieb-help-tooltip{
  position: absolute;
  left: 10%;
  right: 10%;
  top: 60px;
  z-index: 999;
  padding: 1rem;
  border-radius: 8px;
  width: 80%;
  color: var(--ss-text);
  background: var(--ss-surface);
  border: 1px solid var(--accent-color);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.help-close{
  position:absolute;
  top:4px;
  right:6px;
  cursor:pointer;
  font-weight:bold;
  color: var(--accent-color);
}
.ss-help-icon{ color: var(--accent-color); }

/* Tag Edit Icon */
.tag-edit-icon{ margin-left: 0.3rem; font-size: 0.8em; cursor: pointer; }

@media (max-width: 767px) {
  #staerkensieb-digital-app {
    padding-top: 150px;
  }

  .staerkensieb-intro-section {
    display: none;
  }

  #staerkensieb-greeting {
    display: block;
  }

  /* In der mobilen Ansicht enthält die Topbar nur das Menü mit Login/Export.
       Da die Tabs separat unterhalb des Menüs gerendert werden, ist die
       Topbar niedriger.  Reduziere deshalb den oberen Innenabstand des
       App‑Containers, damit die Lücke nicht zu groß ist. */

}

@media (min-width: 769px) {
  #staerkensieb-greeting {
    display: none;
  }

}

@media (max-width: 767px) {
  #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;
  }

  .staerkensieb-mini-circles {
    justify-content: flex-start !important;
    margin-bottom: 20px !important;
  }

  .staerkensieb-buttons-wrapper {
    justify-content: center;
    width: 100%;
  }

  .staerkensieb-topbar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }

  .staerkensieb-evaluation-list {
    background-color: var(--ss-blue-ice);
    padding: 1rem;
  }

  .staerkensieb-evaluation-list h3,
.staerkensieb-eval-info {
    color: var(--ss-blue-deep);
    text-align: left;
    margin-left: 0;
  }

  .staerkensieb-eval-info {
    margin-bottom: 20px;
  }

  .staerkensieb-eval-items .staerkensieb-eval-item {
    background-color: var(--ss-blue-ice);
  }

  .staerkensieb-eval-items .staerkensieb-eval-item > p {
    margin-bottom: 0.5rem !important;
  }

  .staerkensieb-eval-items .eval-run-btn {
    margin-bottom: 0.5rem !important;
  }

  .staerkensieb-eval-items .eval-run-btn,
.staerkensieb-eval-items .eval-download-btn {
    background-color: var(--ss-blue-deep);
    border-color: var(--ss-blue-deep);
    color: var(--ss-white);
  }

  .staerkensieb-eval-items .eval-result {
    color: var(--ss-blue-deep);
  }

  /* Tabs (Mini‑Kreise) im mobilen Layout linksbündig ausrichten.  Durch
       flex-wrap können sie bei kleineren Bildschirmbreiten umgebrochen
       werden.  Die horizontale Ausrichtung wird vom übergeordneten
       Container (flex-start) gesteuert, daher ist hier keine
       weitere Einstellung notwendig. */

  /* Zentriere die Buttons (Hinzufügen/Speichern und Abbrechen) im mobilen Layout */

  /* Abstand unter den Tabs im mobilen Layout: 20px */

  /* In der mobilen Ansicht soll die Topbar (bestehend aus Menü und
       Tabs) untereinander angeordnet werden.  Dazu wird die
       Flex‑Richtung auf Spaltenansicht umgestellt.  Die Elemente der
       Topbar (Menü, Tabs) erscheinen somit untereinander und nehmen die
       volle Breite ein. */

  /* Default (desktop) styling for the topbar. */

  /*
   * Anpassungen für den Auswertungsbereich
   *
   * Der gesamte Container erhält einen hellblauen Hintergrund.  Die
   * Überschrift und der Informationstext werden mit der Akzentfarbe
   * dargestellt und linksbündig ausgerichtet.  Zwischen dem
   * Informationstext und der Liste der Auswertungen wird ein Abstand
   * geschaffen, damit die Elemente nicht aneinander kleben.  Die
   * Start‑ und Download‑Buttons im Auswertungsbereich übernehmen die
   * Akzentfarbe als Hintergrund, damit sie sich klar vom restlichen
   * Layout abheben.
   */

  /* Füge etwas Abstand unter der Kurzbeschreibung jeder Auswertung hinzu.  Damit wird der
     Text optisch von der Frage oder dem Button getrennt. */

  /* Abstand unter dem Beschreibungstext jeder Auswertung.  Das !important stellt
     sicher, dass Theme‑CSS (z. B. Divi) diese Regel nicht überschreibt. */

  /* Schaffe Abstand unter dem Auswertungs‑Button, um den Button klar vom Ergebnisfeld
     zu trennen. */

  /* Abstand unter dem Auswertungs‑Startknopf.  Das !important sorgt für Priorität. */

  /* Die Ergebnisse der Auswertungen sollen die Akzentfarbe verwenden */

}

@media (max-width: 980px) {
  .staerkensieb-language-menu {
    margin-bottom: 20px;
  }

  .staerkensieb-menu {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  /* Fügt einen vertikalen Abstand zwischen der Sprachleiste und dem Menü ein,
       wenn die Elemente umbrechen (Handy- und Tabletansicht). */

}

@media (max-width: 767px) {
  .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;
    min-height: unset;
  }

  .staerkensieb-main-bubble {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    margin: 0 auto;
    border-radius: 20px;
    min-height: 200px;
    padding: 10px;
  }

  .staerkensieb-main-container {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
  }

  .staerkensieb-circle-title {
    display: none;
  }

  .staerkensieb-mobile-title {
    display: block;
    font-weight: bold;
    font-size: 1.6rem;
    margin-top: 0;
    margin-bottom: 0.3rem;
    text-align: center;
  }

  .staerkensieb-main-bubble .staerkensieb-tag {
    position: static !important;
    display: block;
    margin: 0.2rem 0;
    left: unset !important;
    top: unset !important;
  }

  .staerkensieb-main-bubble .staerkensieb-tag:first-of-type {
    margin-top: 0.4rem;
  }

  .staerkensieb-main-bubble .staerkensieb-tag:last-of-type {
    margin-bottom: 0.4rem;
  }

  .staerkensieb-details {
    display: none;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }

  .staerkensieb-main-bubble .tag-weight-1 {
    font-size: 1.3rem;
  }

  .staerkensieb-main-bubble .tag-weight-2 {
    font-size: 1.5rem;
  }

  .staerkensieb-main-bubble .tag-weight-3 {
    font-size: 1.7rem;
  }

  .staerkensieb-main-bubble .tag-weight-4 {
    font-size: 1.9rem;
  }

  .staerkensieb-main-bubble .tag-weight-5 {
    font-size: 2.1rem;
  }

  #staerkensieb-new-strength {
    font-size: 1.8rem;
  }

  .staerkensieb-add-form {
    width: 100%;
    align-items: center;
  }

  #staerkensieb-new-add {
    margin-top: 0.6rem;
  }

  .staerkensieb-layout .staerkensieb-mini-circles {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    margin-top: 20px !important;
  }

  .staerkensieb-mini-circles .mini-bubble {
    width: 48% !important;
    max-width: 48% !important;
    flex: 0 0 48% !important;
    height: auto !important;
    min-height: 60px !important;
    margin: 0 !important;
    border-radius: 5px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .staerkensieb-menu {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-bottom: 20px !important;
  }

  .staerkensieb-digital-container {
    padding: 20px;
  }

  .staerkensieb-mini-circles {
    margin-bottom: 20px !important;
  }

  /* Stapeln der Spalten übereinander */

  /* Der grosse Kreis füllt die Breite und behält seine Proportionen. */

  /* 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. */

  /* Verstecke den bogenförmigen SVG‑Titel auf kleinen Bildschirmen */

  /* Zeige die mobile Überschrift oberhalb des Rechtecks */

  /* 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. */

  /* Füge vor der ersten und nach der letzten Stärke einen kleinen Abstand ein */

  /* Verberge die Detailansicht vollständig auf kleinen Bildschirmen */

  /* 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. */

  /*
     * Größere Schrift für Tags innerhalb des Rechtecks.
     *
     * Bisher wurde hier pauschal eine Fontgrösse von 1,2 rem für alle
     * Stärken verwendet. Dadurch wurde jedoch die Gewichtung auf
     * kleinen Bildschirmen aufgehoben, denn diese Regel besitzt eine
     * höhere Spezifität als die Gewichtungsklassen .tag-weight‑X. Um
     * dieselbe Logik wie auf dem Desktop zu verwenden, definieren wir
     * stattdessen konkrete Grössen pro Gewichtsklasse innerhalb des
     * mobilen Viewports. So werden kleine Stärken weiterhin klein
     * und grosse Stärken entsprechend grösser dargestellt.
     */

  /* Größere Schrift für das Eingabefeld auf Mobilgeräten */

  /* Eingabeformular nimmt volle Breite ein */

  /* Füge Abstand über dem Hinzufügen-/Speichern‑Button hinzu, damit
       dieser nicht direkt am Zuordnungsbereich klebt */

  /* Mini‑Kreise (Tabs) unter dem Formular.  Links ausrichten und
       umbrechen, damit zwei Tabs nebeneinander Platz finden.  Der
       Abstand zur Kategorie‑Überschrift wird später über margin
       gesteuert. */

  /* Mini‑Kreise in zwei Reihen. Jeder Tab nimmt exakt die Hälfte der
       verfügbaren Breite ein.  Wir definieren keine seitlichen
       Ränder, damit die Tabs bündig am Container beginnen.  Die
       Mindesthöhe stellt sicher, dass die Tabs auch bei kurzen Texten
       ausreichend hoch bleiben, während die Höhe ansonsten vom Inhalt
       abhängt. */

  /* Zentriere das Menü auf kleinen Bildschirmen: Die Menüleiste soll
       horizontal in der Mitte stehen.  Über left:50% und
       translateX(-50%) verschieben wir das Menü mittig.  Zusätzlich
       fügen wir 20px Abstand unterhalb des Menüs ein. */

  /* Reduziere den Innenabstand des Plugins auf Mobilgeräten. Statt 30px
       wird links und rechts sowie oben und unten ein einheitlicher
       Abstand von 15px verwendet. */

  /* Unterhalb der Tabs soll ein Abstand von 20px zur Kategorien‑Überschrift
       entstehen.  Da die Topbar keine Margin-Bottom verwendet, fügen wir
       den Abstand direkt an den Tab‑Container an. */

}

@media (max-width: 767px) {
  .staerkensieb-digital-container {
    padding: 15px;
  }

  .staerkensieb-mini-circles {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .staerkensieb-mini-circles .mini-bubble {
    border-radius: 5px !important;
    padding: 10px !important;
    margin: 0 0.25rem;
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    cursor: pointer;
    flex: 1 1 auto;
    width: 80px;
    min-height: 80px;
    background-color: transparent;
    border-width: 2px;
    border-style: solid;
    box-sizing: border-box;
  }

  .staerkensieb-mini-circles .mini-bubble.color-A {
    border-color: var(--ss-blue);
    color: var(--ss-blue);
  }

  .staerkensieb-mini-circles .mini-bubble.color-B {
    border-color: var(--ss-red);
    color: var(--ss-red);
  }

  .staerkensieb-mini-circles .mini-bubble.color-C {
    border-color: var(--ss-yellow);
    color: var(--ss-yellow);
  }

  .staerkensieb-mini-circles .mini-bubble.color-D {
    border-color: var(--ss-green);
    color: var(--ss-green);
  }

  .staerkensieb-mini-circles .mini-bubble.color-A.active {
    background-color: var(--ss-blue);
    color: var(--ss-white);
    border-color: var(--ss-blue);
  }

  .staerkensieb-mini-circles .mini-bubble.color-B.active {
    background-color: var(--ss-red);
    color: var(--ss-white);
    border-color: var(--ss-red);
  }

  .staerkensieb-mini-circles .mini-bubble.color-C.active {
    background-color: var(--ss-yellow);
    color: var(--ss-white);
    border-color: var(--ss-yellow);
  }

  .staerkensieb-mini-circles .mini-bubble.color-D.active {
    background-color: var(--ss-green);
    color: var(--ss-white);
    border-color: var(--ss-green);
  }

  .staerkensieb-mobile-title {
    font-size: 1.6rem;
    margin-bottom: 0.3rem;
  }

  .staerkensieb-assignments .cat-icon {
    width: 32px;
    height: 32px;
  }

  .staerkensieb-assignments .cat-weight-select {
    width: 60px;
    font-size: 1rem;
  }

  #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 {
    margin-left: 0.5rem;
  }

  .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);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
  }

  .staerkensieb-details {
    padding: 20px;
  }

  .staerkensieb-tag {
    font-size: 1.2rem;
  }

  .staerkensieb-question-slider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .staerkensieb-question-slider .question-text {
    text-align: center;
  }

  /* Einheitlicher Innenabstand für den gesamten Container */

  /*
   * Tabs für die Stärken‑Kategorien (Version 1.9.199).
   * Auf dem Desktop werden die Tabs oberhalb des großen Kreises horizontal
   * angeordnet und nehmen die volle Breite des Kreises ein. Jeder Tab ist
   * rechteckig mit abgerundeten Ecken (5px). Der aktive Tab erhält die
   * kräftige Hintergrundfarbe seiner Kategorie und weiße Schrift; die
   * inaktiven Tabs haben transparenten Hintergrund, farbigen Text und
   * Rand. Auf mobilen Geräten werden die Tabs untereinander gelistet.
   */

  /* Container für die Tabs im Hauptkreis.  Der Container wird innerhalb
     des staerkensieb-main-container erstellt und orientiert sich an
     dessen Breite. */

  /* Container für die Kategorien‑Tabs.  Standardmäßig horizontal in einer
     Zeile.  Der Container wird sowohl in der Topbar (Desktop) als auch im
     Listenbereich (Mobile) verwendet. */

  /* Tabs im Mobil‑Layout: untereinander.  Der Container im
     staerkensieb-lists wird in der Mobilansicht vertikal gestapelt. */

  @media (max-width: 767px) {
    .staerkensieb-mini-circles {
      flex-direction: column;
      justify-content: flex-start;
      align-items: stretch;
      width: 100%;
      margin-bottom: 20px;
    }
  }

  /* Grundlayout der Tabs.  Wir verwenden die bestehenden color‑X
     Klassen, um Text- und Randfarben der Kategorien festzulegen. Die
     Hintergrundfarbe bleibt transparent, bis der Tab aktiv wird. */

  /*
   * Standarddarstellung der Tabs (Mini‑Kreise) innerhalb des Tab‑Containers.
   * Auf dem Desktop erhalten die Tabs eine feste Breite von 100 px und
   * eine Mindesthöhe von 80 px. Die Form ist rechteckig mit leicht
   * abgerundeten Ecken. Der Innenabstand wird auf 10 px gesetzt, so dass
   * der Abstand oben/unten genauso groß ist wie links/rechts.  Die
   * Hintergrundfarbe bleibt transparent, die Rand- und Textfarben
   * richten sich nach der jeweiligen Kategorie (über color‑X Klassen).
   * Frühere Definitionen (z. B. starre 100px-Höhe oder kreisförmige
   * Tabs) werden hiermit überschrieben.
   */

  /*
   * Tabs (Mini‑Kreise): Standardwerte.  Die Breite beträgt 85 px
   * (statt vorher 100 px), damit auch auf schmaleren Geräten zwei Tabs
   * nebeneinander passen.  Die Mindesthöhe bleibt bei 80 px.  Der
   * Innenabstand ist weiterhin 10 px.
   */

  /* Setze Farben für die Tabs basierend auf der Kategorie.  Die
     border- und Textfarbe übernehmen die kräftige Farbe der Kategorie.
     Beim aktiven Tab wird die Hintergrundfarbe gesetzt und der Text
     weiß eingefärbt. */

  /* Tabs im Mobil‑Layout nehmen die volle Breite ein und erhalten
     zusätzlichen Abstand. */

  @media (max-width: 767px) {
    /* Mobile Tabs: zwei Tabs pro Zeile mit gleicher Höhe */
    .staerkensieb-mini-circles {
      /* Im mobilen Layout sollen die Tabs in zwei Spalten dargestellt werden.
         Die flex-wrap-Regel sorgt dafür, dass sie bei Bedarf umbrechen.
         Mit margin-bottom:30px wird ein Abstand zum nachfolgenden Inhalt
         erzeugt, wie vom Benutzer gewünscht. */
      flex-wrap: wrap;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      /* Zwischen Tabs und der Kategorieüberschrift soll 20px Abstand sein */
      margin-bottom: 20px;
    }
    .staerkensieb-mini-circles .mini-bubble {
      /* Im mobilen Layout sollen genau zwei Tabs pro Zeile stehen – die
         Breite beträgt 30 %, so dass zwei Tabs nebeneinander Platz
         finden und Raum für den Abstand bleibt. */
      flex: 0 0 48% !important;
      width: 48% !important;
      min-height: 70px !important;
      margin: 0 !important;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    /* In der mobilen Ansicht ordnen wir die Elemente der Topbar
       (Sprachmenü, Menü-Icons, Tabs) untereinander und geben ihnen eine
       definierte Reihenfolge.  Zuerst sollen die Menü-Icons (Login
       etc.) erscheinen, dann die Tabs, danach das Sprachmenü.  Durch
       position:static wird die Topbar in den normalen Layoutfluss
       integriert. */
    .staerkensieb-topbar {
      position: static !important;
      width: 100% !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 0.5rem !important;
      /* 20px Abstand zu den Rändern des Shortcode-Containers.  Der
         dritte Wert (bottom) bleibt 0, da der Abstand nach den
         Tabs separat über margin-Bottom der Tabs geregelt wird. */
      margin: 20px 20px 0 20px !important;
    }
    /* Reihenfolge der Elemente innerhalb der Topbar: Menü zuerst, dann Tabs, dann Sprache */
    .staerkensieb-topbar .staerkensieb-menu {
      order: 1;
      margin-bottom: 20px !important;
      /* Im mobilen Layout soll das Menü nicht automatisch nach rechts
         wandern.  Setze margin-left zurück, damit es am linken Rand
         innerhalb der Topbar beginnt (der Topbar hat 20px seitlichen Abstand). */
      margin-left: 0 !important;
    }
    .staerkensieb-topbar .staerkensieb-mini-circles { order: 2; }
    .staerkensieb-topbar .staerkensieb-language-menu { order: 3; }
  
    /* Reduziere den zusätzlichen oberen Innenabstand des App‑Containers
       auf Mobilgeräten, da die Topbar nun statisch ist und den
       nachfolgenden Inhalt nach unten schiebt.  Ein kleiner Abstand
       bleibt erhalten, damit Inhalte nicht direkt am Rand kleben. */
    #staerkensieb-digital-app {
      padding-top: 30px;
    }
  }

  /* Größere mobile Überschrift (bereits definiert, aber hier zur Sicherheit) */

  /* Größere Zuordnungs‑Icons und Selects */

  /* 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. */

  /* Mini‑Kreise zweispaltig anordnen */

  /* Füge einen großzügigen Innenabstand im Detailbereich hinzu, damit Inhalte nicht an den Rand stoßen */

  /* Größere Schriftgrößen innerhalb des Rechtecks für mobile Ansicht */

  /* Zentriere den Fragenslider und seinen Text auf kleinen Bildschirmen */

}

@media (max-width: 767px) {
  .details-body .entry-body {
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
  }

  .details-body .entry-body .detail-extra {
    flex: 0 0 100%;
    width: 100%;
    margin-left: 0;
  }

}

@media (max-width: 767px) {
  .staerkensieb-lists {
    margin-top: 50px;
  }

  .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;
  }

  .staerkensieb-question-slider .next {
    margin-left: auto;
  }

  #staerkensieb-add-form .staerkensieb-assignments {
    justify-content: center;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
  }

  #staerkensieb-new-add {
    margin-top: 30px;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    font-size: 1.6rem;
  }

  .staerkensieb-buttons-wrapper {
    justify-content: center;
  }

  .staerkensieb-details {
    margin-bottom: 50px;
  }

  /* Abstand zwischen Menü und Titel */

  /* Erhöhe die Größe und zentriere die Frage im Slider */

  /* Das rechte Pfeilchen rückt ganz nach rechts */

  /* Zentriere den Zuordnungsmechanismus und füge Abstand über dem
       Button ein. */

  /* 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. */

  /* Zentriere die Buttons‑Zeile im mobilen Layout. Dadurch wird
     * der „Neue Stärke“‑Button auch horizontal mittig ausgerichtet,
     * unabhängig von anderen Elementen. */

  /* Fügt der Detailansicht unten einen Abstand hinzu. */

}

@media (min-width: 769px) {
  .staerkensieb-mini-circles .mini-bubble {
    height: 80px !important;
  }

}

@media (min-width: 769px) {
  .staerkensieb-main-bubble {
    width: 420px !important;
    height: 420px !important;
  }

  .staerkensieb-layout .layout-right {
    min-height: 420px !important;
  }

}

@media (max-width: 767px) {
  .staerkensieb-menu {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-bottom: 20px !important;
    position: absolute !important;
    padding-left: 0 !important;
    display: inline-flex !important;
    white-space: nowrap !important;
  }

  .staerkensieb-mini-circles {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  .staerkensieb-mini-circles .mini-bubble {
    flex: 0 0 48% !important;
    width: 48% !important;
    min-height: 60px !important;
    margin: 0 !important;
  }

  #staerkensieb-new-add {
    margin-bottom: 0 !important;
  }

  .staerkensieb-topbar {
    margin: 20px 0 0 0 !important;
  }

  .staerkensieb-lists {
    margin-top: 0 !important;
  }

  /* Zentriere das Menü horizontal in der mobilen Ansicht.  Die
       Positionierung erfolgt absolut relativ zum App‑Container.  Ein
       unterer Abstand sorgt für Luft über den Tabs. */

  /* Tabs im mobilen Layout: Zwei Tabs pro Zeile, reduzierte
       Mindesthöhe und bündiger Start.  Die Breite von 48 % schafft
       Platz für den Zwischenraum. */

  /* Entferne den unteren Abstand des „Neue Stärke“-Buttons auf dem Handy */

  /* Setze den äußeren Rand der Topbar in der mobilen Ansicht: oben 20px,
       rechts 0, unten 0, links 0. */

  /* Entferne den oberen Abstand der Listen im mobilen Layout */

}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =====================================================
   Fragenslider – Kreisfarbige Pfeile & Titel (v2.0.34)
===================================================== */

.question-section {
  color: var(--accent-color);
  font-weight: 600;
}

.question-arrow,
.question-arrow::before {
  color: var(--accent-color);
}

.question-arrow:hover {
  opacity: 0.7;
}


/* =====================================================
   Fragenslider – saubere Kreisfarbe (v2.0.36)
===================================================== */

#staerkensieb-digital-app .question-arrow,
#staerkensieb-digital-app .question-arrow::before {
  color: var(--accent-color);
  transition: opacity 0.2s ease;
}

#staerkensieb-digital-app .question-arrow:hover {
  opacity: 0.7;
}


/* =====================================================
   Fragenslider – Pfeile aus CSS (nur einmal) + Kreisfarbe (v2.0.40)
   Quelle: JS erzeugt leere <span class="question-arrow ..."></span>
   Pfeile werden über background-image (SVG Data URI) gerendert.
   Pseudo-Icons (::before/::after) werden deaktiviert, um Dopplungen zu vermeiden.
===================================================== */

#staerkensieb-digital-app .staerkensieb-question-slider .question-arrow,
#staerkensieb-digital-app .staerkensieb-question-slider .question-arrow::before,
#staerkensieb-digital-app .staerkensieb-question-slider .question-arrow::after {
  color: var(--accent-color);
}

#staerkensieb-digital-app .staerkensieb-question-slider .question-arrow {
  width: 1.2rem;
  height: 1.2rem;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

#staerkensieb-digital-app .staerkensieb-question-slider .question-arrow::before,
#staerkensieb-digital-app .staerkensieb-question-slider .question-arrow::after {
  content: none;
}

#staerkensieb-digital-app .staerkensieb-question-slider .question-arrow.prev {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBkPSJNMTUgNmwtNiA2IDYgNiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+");
}

#staerkensieb-digital-app .staerkensieb-question-slider .question-arrow.next {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBkPSJNOSAxOGw2LTYtNi02IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=");
}


/* =====================================================
   Fix: durchgestrichene color-Regel (v2.0.41)
   Ursache: eine spätere/spezifischere Regel überschreibt die Farbe.
   Lösung: höhere Spezifität + am Dateiende.
===================================================== */

#staerkensieb-digital-app .staerkensieb-question-slider .question-arrow.prev,
#staerkensieb-digital-app .staerkensieb-question-slider .question-arrow.next,
#staerkensieb-digital-app .staerkensieb-question-slider .question-arrow.prev::before,
#staerkensieb-digital-app .staerkensieb-question-slider .question-arrow.next::before {
  color: var(--accent-color);
}
/* =====================================
   Stärken-Sieb – Kreis Bühne Upgrade
   ===================================== */

.staerkensieb-main-bubble{

  /* Weiche Tiefen-Illusion */
 

  /* Innenlicht + Außen-Schatten */
  box-shadow:
    inset 0 2px 10px rgba(0,0,0,0.06),
    0 18px 40px rgba(0,0,0,0.08);

  /* Subtiler Rahmen */
  border: 1px solid rgba(0,0,0,0.06);

  /* Weicher wirken lassen */
  border-radius: 50%;

  /* Minimal mehr Raum für Inhalt */
  padding: 2.5rem;

  /* Sanfte Animation beim Laden */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}


/* =============================================================================
   Evaluation UI – clean, single source of truth
   Colors per element (per requirements)
   ============================================================================= */

/* 1) Evaluation title (white) */
.staerkensieb-eval-item > h4 {
  color: var(--ss-white) !important;
}

/* 2) Evaluation intro text: the FIRST paragraph directly after the h4 (white) */
.staerkensieb-eval-item > h4 + p {
  color: var(--ss-white) !important;
}

/* 3) Button to start evaluation (deep-blue bg, white text) */
.eval-run-btn {
  background-color: var(--ss-blue-deep) !important;
  color: var(--ss-white) !important;
  border: none !important;
}

/* 4) Question label (white) */
.eval-question-label {
  color: var(--ss-white) !important;
}

/* 5) User input (deep-blue bg for input, white text) */
.eval-user-input {
  background-color: var(--ss-white) !important;
  color: var(--blue-deep) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 5px;
  padding: 12px 14px;
}
.eval-user-input::placeholder {
  color: rgba(255,255,255,.75);
}

/* 6) Evaluation output (white bg, deep-blue text) */
.eval-result {
  background: var(--ss-white) !important;
  color: var(--ss-blue-deep) !important;
  border-radius: 6px;
  padding: 18px 18px;
}
.eval-display,
.eval-display p,
.eval-result p {
  color: var(--ss-blue-deep) !important;
}

/* 7) Slider toggle label (deep-blue) */
.eval-history-label {
  color: var(--ss-blue-deep) !important;
}

/* 8) Word download button (deep-blue bg, white text) */
.eval-download-btn {
  background-color: var(--ss-blue-deep) !important;
  color: var(--ss-white) !important;
  border: none !important;
}
.eval-run-btn:hover,
.eval-download-btn:hover {
  opacity: .9;
}

/* 9) Slider arrows: emojis, deep-blue */
.eval-history-prev,
.eval-history-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  line-height: 1;
  font-size: 20px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: var(--ss-blue-deep) !important;
  cursor: pointer;
}
.eval-history-prev:hover,
.eval-history-next:hover {
  opacity: .85;
}


/* ===== 2.0.43 Button visuals (ensure deep-blue background + white text even with Divi .button styles) ===== */
.staerkensieb-evaluation-list .button.eval-run-btn,
.staerkensieb-evaluation-list .button.eval-download-btn,
.staerkensieb-eval-item .button.eval-run-btn,
.staerkensieb-eval-item .button.eval-download-btn {
  background-color: var(--ss-blue-deep) !important;
  color: var(--ss-white) !important;
  border: none !important;
  text-decoration: none !important;
  padding: 10px 14px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

.staerkensieb-evaluation-list .button.eval-run-btn:hover,
.staerkensieb-evaluation-list .button.eval-download-btn:hover {
  opacity: .9;
}