/* 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. */ /* Oben nur 20px Abstand, seitlich und unten bleiben 30px. Dadurch sitzt die Topbar näher am oberen Rand, wie gewünscht. */ padding: 20px 30px 30px 30px; box-sizing: border-box; /* Weiss als Hintergrund, damit sich das Plugin vom Theme abhebt */ background-color: #ffffff; } /* Volle Breite für Eingabefelder im Auswertungs‑Adminbereich */ .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; } /* * 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 { /* Das Menü wird innerhalb der Topbar platziert und nimmt nicht am absoluten Positionierungsfluss teil. Durch die Topbar (display:flex) ordnen sich die Icons automatisch rechts an. */ position: static; display: flex; gap: 0.6rem; font-size: 1.6rem; /* Richte das Menü am rechten Rand des verfügbaren Raums aus. Durch margin-left:auto schiebt sich das Menü nach rechts, während die Flaggen oder anderen Elemente davor links stehen bleiben. */ margin-left: auto; /* Richte die Icons am oberen Rand des Topbar-Containers aus, damit sie nicht vertikal mittig schweben. */ align-items: flex-start; } .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; } /* Positioniere das Plugin‑Container relativ, damit absolute Elemente darin verankert * werden können (z. B. Versionsnummer). */ #staerkensieb-digital-app { position: relative; /* Füge oben einen zusätzlichen Innenabstand hinzu, damit die absolut positionierte Topbar (Menü + Tabs) nicht über die darunter liegenden Inhalte ragt. Die Höhe setzt sich zusammen aus der geschätzten Höhe der Topbar (ca. 100 px) plus 30 px Abstand. */ padding-top: 130px; } /* Versionsnummer: kleinere Schrift, oben rechts positioniert. Sie soll * stets sichtbar sein und über dem Menü schweben. */ /* Versionsnummer: innerhalb der Auswertungen anzeigen. Sie wird relativ zum Evaluationscontainer positioniert. Die Top‑Position wird deaktiviert, stattdessen orientiert sich die Versionsnummer am unteren Rand. */ .staerkensieb-version-label { /* Die Versionsnummer soll am unteren Rand der Anwendung erscheinen und nicht über die Inhalte gelegt werden. Daher wird die Position statisch gesetzt und sie erhält oben einen Abstand. Durch text-align:right kann sie am rechten Rand ausgerichtet werden. */ position: static; display: block; margin-top: 0.5rem; font-size: 12px; 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: #fff; } /* * Layout für die Fragen und Eingabefelder in der Auswertungsliste. * Die Frage nimmt 20 % der Breite ein, das Textfeld 80 %. Durch Flexbox * können die Elemente auch auf kleinen Bildschirmen umgebrochen werden. */ /* Alte Layoutdefinitionen für eval‑question-wrapper und eval‑question wurden entfernt. Stattdessen steht die optionale Frage in einer separaten Zeile über dem Eingabefeld. Die neue Klasse eval-question-label wird dafür verwendet. */ .staerkensieb-eval-items .eval-question-label { font-weight: bold; margin-bottom: 0.3rem; display: block; } /* Der Eingabebereich für benutzerdefiniertes Feedback nimmt nun die volle Breite ein. */ .staerkensieb-eval-items .eval-user-input { width: 100%; box-sizing: border-box; } /* Stil für den Einleitungsbereich in der Desktop‑Ansicht. Der Überschrift wird eine größere Schriftgröße gegeben, die Absätze erhalten einen moderaten unteren Abstand und eine angenehme Zeilenhöhe. */ .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; } /* Begrüßungstext (nur mobil sichtbar). Standardmäßig ist er verborgen; JavaScript zeigt ihn an und versteckt ihn wieder, wenn eine Stärke eingetragen wird. Margen sorgen für ausreichend Abstand oberhalb und unterhalb des Textes. */ #staerkensieb-greeting { display: none; margin-top: 20px; margin-bottom: 20px; font-weight: bold; font-size: 1rem; line-height: 1.3; } /* Mobile‑Layout: blende den ausführlichen Einleitungstext aus und zeige den Begrüßungstext. So bleibt der erste Eindruck kurz und übersichtlich. */ @media (max-width: 768px) { /* 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. */ #staerkensieb-digital-app { /* Die mobile Topbar (Menü + Tabs) ist höher als auf dem Desktop, insbesondere da die Tabs eine Mindesthöhe von 80px haben und untereinander angeordnet sind. Erhöhe den oberen Innenabstand entsprechend (ca. 150px), damit der nachfolgende Inhalt nicht verdeckt wird. */ padding-top: 150px; } .staerkensieb-intro-section { display: none; } #staerkensieb-greeting { display: block; } } /* Desktop‑Layout: verstecke den Begrüßungstext standardmäßig. Er wird im JavaScript nur für mobile Geräte eingeblendet. */ @media (min-width: 769px) { #staerkensieb-greeting { display: none; } } /* Erhöhe den Abstand des Menüs zum oberen Rand, damit zwischen Menü‑Icons und Überschrift/Seitentitel etwa 50 px liegen. */ .staerkensieb-menu { top: 50px; } /* Mini‑Kreise: platziere sie weiter unterhalb des „Neue Stärke“‑Buttons, indem ein oberer Abstand von 50 px gesetzt wird. Entferne gleichzeitig den unteren Abstand. Dies gilt für alle Gerätegrößen. */ .staerkensieb-mini-circles, .staerkensieb-layout .staerkensieb-mini-circles { margin-top: 50px; margin-bottom: 0 !important; } /* Verkleinere die Schriftgröße des Login‑Links im Menü für eine dezentere Darstellung. */ .menu-item-staerkensieb-account a { font-size: 0.8rem; } /* Der Auswertungs‑Container wird relativ positioniert, damit die Versionsnummer darin absolut positioniert werden kann. Ein zusätzlicher Innenabstand verhindert Überlappungen. */ #staerkensieb-evaluation-list { position: relative; padding-bottom: 2.5rem; } /* 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; } /* 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. */ .staerkensieb-mini-circles { justify-content: flex-start !important; } /* Zentriere die Buttons (Hinzufügen/Speichern und Abbrechen) im mobilen Layout */ .staerkensieb-buttons-wrapper { justify-content: center; width: 100%; } /* Abstand unter den Tabs im mobilen Layout: 20px */ .staerkensieb-mini-circles { margin-bottom: 20px !important; } /* 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. */ .staerkensieb-topbar { flex-direction: column !important; align-items: flex-start !important; gap: 0.5rem !important; } /* * 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. */ .staerkensieb-evaluation-list { background-color: #eff5fc; padding: 1rem; } .staerkensieb-evaluation-list h3, .staerkensieb-eval-info { color: #356d9f; text-align: left; margin-left: 0; } .staerkensieb-eval-info { margin-bottom: 20px; } .staerkensieb-eval-items .staerkensieb-eval-item { background-color: #eff5fc; /* Abstand unter jedem Auswertungseintrag wird über die einzelnen Elemente geregelt */ } /* 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. */ .staerkensieb-eval-items .staerkensieb-eval-item > p { margin-bottom: 0.5rem !important; } /* 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. */ .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: #356d9f; border-color: #356d9f; color: #ffffff; } /* Die Ergebnisse der Auswertungen sollen die Akzentfarbe verwenden */ .staerkensieb-eval-items .eval-result { color: #356d9f; } } /* 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. Erhöhe auf 40px, damit der entlanglaufende Titel nicht abgeschnitten wird, selbst wenn er über die Mitte des Kreises hinausgeht. */ /* Erhöhe den Abstand nach oben auf 50px, damit der kreisförmige Titel genügend Platz hat und nicht abgeschnitten wird. */ margin-top: 50px; } /* 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. */ /* Setze Breite und Höhe des Hauptkreises auf 430px, wie gewünscht. */ width: 430px; height: 430px; 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. */ /* Passe die Mindesthöhe der rechten Spalte an die Größe des Hauptkreises an */ /* Passe die Mindesthöhe der rechten Spalte an die neue Kreisgröße an */ min-height: 420px; } /* Mini‑Kreise im rechten Bereich */ .staerkensieb-layout .staerkensieb-mini-circles { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-start; } /* Abstand unterhalb der Sprachflaggen in der Handyansicht */ @media (max-width: 600px) { .staerkensieb-language-menu { /* Füge unter den Flaggen etwas mehr Abstand ein, damit der Menü-Eintrag nicht an den Flags klebt. */ margin-bottom: 20px; } /* Fügt einen vertikalen Abstand zwischen der Sprachleiste und dem Menü ein, wenn die Elemente umbrechen (Handyansicht). */ .staerkensieb-menu { margin-top: 10px; } } .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. * * 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. */ .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; } /* 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) unter dem Formular. Links ausrichten und umbrechen, damit zwei Tabs nebeneinander Platz finden. Der Abstand zur Kategorie‑Überschrift wird später über margin gesteuert. */ .staerkensieb-layout .staerkensieb-mini-circles { justify-content: flex-start !important; flex-wrap: wrap !important; /* Oberer Abstand zwischen Menü und Tabs: 20px */ margin-top: 20px !important; } /* 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. */ .staerkensieb-mini-circles .mini-bubble { width: 48% !important; max-width: 48% !important; flex: 0 0 48% !important; /* Keine explizite Höhe – verwende stattdessen eine Mindesthöhe, damit die Tabs nicht zu klein werden. */ height: auto !important; min-height: 60px !important; margin: 0 !important; /* Runde die Ecken leicht ab, analog zur Desktop‑Ansicht. */ border-radius: 5px !important; display: flex; align-items: center; justify-content: center; text-align: center; } /* 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. */ .staerkensieb-menu { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; margin-bottom: 20px !important; } /* 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 { /* Verwende 20px Rand rund um den Shortcode‑Container auf Mobilgeräten, damit Menü und Tabs jeweils 20px Abstand zu den Rändern haben. */ padding: 20px; } /* 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. */ .staerkensieb-mini-circles { margin-bottom: 20px !important; } } /* 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; } /* * 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. */ .staerkensieb-mini-circles { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; } /* Tabs im Mobil‑Layout: untereinander. Der Container im staerkensieb-lists wird in der Mobilansicht vertikal gestapelt. */ @media (max-width: 768px) { .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. */ .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; /* Zwei Tabs nebeneinander im flex‑Container. flex:1 erlaubt automatisches Strecken auf Desktop, aber wird unten durch width:100px überstimmt. */ flex: 1 1 auto; width: 80px; min-height: 80px; background-color: transparent; border-width: 2px; border-style: solid; box-sizing: border-box; } /* 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. */ .staerkensieb-mini-circles .mini-bubble.color-A { border-color: #007BFF; color: #007BFF; } .staerkensieb-mini-circles .mini-bubble.color-B { border-color: #E63946; color: #E63946; } .staerkensieb-mini-circles .mini-bubble.color-C { border-color: #F4A261; color: #F4A261; } .staerkensieb-mini-circles .mini-bubble.color-D { border-color: #2A9D8F; color: #2A9D8F; } .staerkensieb-mini-circles .mini-bubble.color-A.active { background-color: #007BFF; color: #fff; border-color: #007BFF; } .staerkensieb-mini-circles .mini-bubble.color-B.active { background-color: #E63946; color: #fff; border-color: #E63946; } .staerkensieb-mini-circles .mini-bubble.color-C.active { background-color: #F4A261; color: #fff; border-color: #F4A261; } .staerkensieb-mini-circles .mini-bubble.color-D.active { background-color: #2A9D8F; color: #fff; border-color: #2A9D8F; } /* Tabs im Mobil‑Layout nehmen die volle Breite ein und erhalten zusätzlichen Abstand. */ @media (max-width: 768px) { /* 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) */ .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; /* Reduziere den unteren Abstand des Buttons auf 30px, sodass die Mini‑Kreise näher am Button stehen. */ margin-bottom: 50px; 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 { /* Das Sprachmenü ist jetzt Teil der Topbar und wird nicht mehr absolut positioniert. Es übernimmt die horizontale Ausrichtung von der Topbar (display:flex). */ position: static; display: flex; gap: 0.5rem; font-size: 1.6rem; z-index: 100; } /* Die Topbar hält Sprachmenü und Emoji‑Menü in einer Zeile und positioniert * sie oben im Plugin. Sie nimmt die volle Breite des Containers ein und * hat einen kleinen Abstand zur Oberkante, sodass die Überschrift darunter * Platz findet. */ .staerkensieb-topbar { /* Die Topbar wird absolut am oberen Rand des Shortcodes positioniert. Dadurch steht sie unabhängig vom restlichen Layout immer ganz oben. Links und rechts sorgen 10px Abstand dafür, dass die Inhalte nicht am Rand kleben. */ position: absolute; top: 20px; /* Seitlicher Abstand auf Desktop: 20px Abstand zum Shortcode-Container */ left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: center; z-index: 100; /* Stelle sicher, dass die Topbar über anderen Elementen liegt und Mausereignisse empfängt. Ein höherer z‑Index verhindert, dass andere Container sie überdecken. */ z-index: 1000 !important; pointer-events: auto !important; /* Kein margin-bottom, da absolute Elemente keinen Einfluss auf den Layoutfluss haben. Der Abstand zum nachfolgenden Inhalt wird über das Padding des App‑Containers hergestellt. */ margin-bottom: 0; } /* 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); } /* Dynamisch eingefügter Einleitungstext. Dieser Container erscheint * einmalig nach dem „Neue Stärke“-Button in allen Layouts. Er * verwendet die Kategorienfarbe (inline gesetzt) und besitzt einen * leichten Abstand zum vorherigen Element. */ .staerkensieb-dynamic-intro { margin-top: 20px; font-size: 1rem; line-height: 1.5; } /* 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; } /* -------------------------- * Auswertungslisten * * Deaktivierte Auswertungen sollen optisch durchgestrichen sein, damit * Benutzer sofort sehen können, dass sie nicht auswählbar sind. Die * aktivierten Einträge behalten die Standarddarstellung. Die Klassen * eval-enabled und eval-disabled werden im HTML gesetzt. */ .staerkensieb-eval-items .eval-disabled h4, .staerkensieb-eval-items .eval-disabled p { text-decoration: line-through; opacity: 0.6; } /* Entfernte Anpassungen an der Hauptblase: Wir nutzen wieder die * ursprüngliche Größe (feste Breite und Höhe) und lassen die * standardmäßigen Styles greifen. Der bogenförmige SVG‑Titel bleibt * sichtbar im Frontend, sodass der farbige Text entlang des Kreises * erscheint. */ /* * Zusätzliche Gestaltung für die Auswertungslisten. * * – Entfernt Aufzählungszeichen und setzt Abstände auf Null für die * Liste der Auswertungen. * – Jeder Listeneintrag erhält einen hellen Hintergrund, einen * sanften Rahmen und großzügige Innenabstände, um sich visuell von * der Umgebung abzuheben. * – Überschriften und Texte werden leicht angepasst und nutzen * die Akzentfarbe, sofern verfügbar. Falls die Variable * --accent-color nicht gesetzt ist (z. B. außerhalb des Kreismoduls), * wird ein neutraler Fallback genutzt. * – Der Ergebnisbereich erhält eine dezente Umrandung und eigenen * Hintergrund. Ein Abstand über dem Download‑Button sorgt für * Luft zwischen Text und Aktion. */ .staerkensieb-eval-items { /* Entferne Aufzählungszeichen sowie Standard‑Padding/Margin. Mit * !important stellen wir sicher, dass Theme‑Styles (z. B. Divi) nicht * die Listeneinstellungen überschreiben. */ list-style: none !important; list-style-type: none !important; margin: 0 !important; padding: 0 !important; } /* Als zusätzliche Absicherung gegen Listensymbole in Themes (z. B. Divi) * setzen wir auch auf den Container der gesamten Auswertungsliste und * dessen direkten Kind‑Elemente list-style auf none. Dies stellt sicher, * dass keine Aufzählungszeichen oder Marker vor den Auswertungen * dargestellt werden, selbst wenn der Shortcode von einem Theme in * ein