style.css aktualisiert

style.css

@@ -1,5 +1,10 @@
-/* CSS Variablen für ein modernes, konsistentes Design */
+/* Haupt-Container */
-:root {
+.regel-plugin-container {
+    /* 
+     * CSS Variablen für ein modernes, konsistentes Design 
+     * WICHTIG: Diese Variablen sind jetzt hier definiert, NICHT in :root,
+     * damit sie nur dieses Plugin beeinflussen und nicht das globale Theme.
+     */
     --primary-color: #0073aa;
     --primary-hover: #005a87;
     --background-light: #f8f9fa;
@@ -12,10 +17,7 @@
     --shadow-sm: 0 2px 4px rgba(0,0,0,0.06);
     --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
     --shadow-lg: 0 8px 25px rgba(0,0,0,0.12);
-}
 
-/* Haupt-Container */
-.regel-plugin-container {
     max-width: 900px;
     margin: 40px auto;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -27,14 +29,14 @@
 }
 
 /* Tab-Navigation */
-.regel-tabs-nav {
+.regel-plugin-container .regel-tabs-nav {
     display: flex;
     background: var(--background-light);
     border-bottom: 1px solid var(--border-color);
     padding: 8px;
 }
 
-.regel-tab-button {
+.regel-plugin-container .regel-tab-button {
     background: transparent;
     border: none;
     padding: 14px 24px;
@@ -47,24 +49,24 @@
     text-align: center;
 }
 
-.regel-tab-button:hover {
+.regel-plugin-container .regel-tab-button:hover {
     background: rgba(0, 115, 170, 0.05);
 }
 
-.regel-tab-button.active {
+.regel-plugin-container .regel-tab-button.active {
     background: var(--background-lighter);
     box-shadow: var(--shadow-sm);
     border-bottom: 3px solid var(--primary-color);
 }
 
 /* Tab-Panels (Inhalte) */
-.regel-tabs-content .regel-tab-panel {
+.regel-plugin-container .regel-tabs-content .regel-tab-panel {
     display: none;
     padding: 25px;
     animation: fadeInUp 0.5s ease-out;
 }
 
-.regel-tabs-content .regel-tab-panel.active {
+.regel-plugin-container .regel-tabs-content .regel-tab-panel.active {
     display: block;
 }
 
@@ -74,7 +76,7 @@
 }
 
 /* Akkordeon-Items (Regeln) */
-.regel-item {
+.regel-plugin-container .regel-item {
     margin-bottom: 16px;
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius);
@@ -83,17 +85,17 @@
     border-left: 4px solid var(--primary-color);
 }
 
-.regel-item:hover {
+.regel-plugin-container .regel-item:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-md);
 }
 
-.regel-item:last-child {
+.regel-plugin-container .regel-item:last-child {
     margin-bottom: 0;
 }
 
 /* KORREKTUR: Icon-Positionierung */
-.regel-toggle {
+.regel-plugin-container .regel-toggle {
     width: 100%;
     background: var(--background-lighter);
     border: none;
@@ -107,7 +109,7 @@
     position: relative; /* Wichtig für die Positionierung des Icons */
 }
 
-.regel-toggle:hover {
+.regel-plugin-container .regel-toggle:hover {
     background: var(--background-light);
 }
 
@@ -130,35 +132,35 @@
     transform: translateY(-50%);
 }
 
-.regel-item .icon-minus {
+.regel-plugin-container .regel-item .icon-minus {
     opacity: 0;
     transform: translateY(-50%) scale(0.8);
 }
 
-.regel-item.open .icon-plus {
+.regel-plugin-container .regel-item.open .icon-plus {
     opacity: 0;
     transform: translateY(-50%) scale(0.8);
 }
 
-.regel-item.open .icon-minus {
+.regel-plugin-container .regel-item.open .icon-minus {
     opacity: 1;
     transform: translateY(-50%) scale(1);
 }
 
 /* Aufklappbarer Inhalt */
-.regel-content {
+.regel-plugin-container .regel-content {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.4s ease-out, padding 0.4s ease-out;
     background: var(--background-lighter);
 }
 
-.regel-item.open .regel-content {
+.regel-plugin-container .regel-item.open .regel-content {
     max-height: 1000px;
     padding: 0 22px 20px 50px; /* Linker Abstand anpassen */
 }
 
-.regel-content-inner {
+.regel-plugin-container .regel-content-inner {
     padding-top: 5px;
     line-height: 1.7;
 }
@@ -175,24 +177,23 @@
     list-style: none;
 }
 
-
 /* Responsive Design */
 @media (max-width: 768px) {
     .regel-plugin-container {
         margin: 20px;
         border-radius: 0;
     }
-    .regel-tabs-nav {
+    .regel-plugin-container .regel-tabs-nav {
         flex-wrap: wrap;
         padding: 5px;
     }
-    .regel-tab-button {
+    .regel-plugin-container .regel-tab-button {
         flex-basis: 50%;
         margin: 2px;
         font-size: 14px;
         padding: 12px 8px;
     }
-    .regel-tabs-content .regel-tab-panel {
+    .regel-plugin-container .regel-tabs-content .regel-tab-panel {
         padding: 15px;
     }
 }