Vorlage:KLAPP: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

Version vom 28. September 2025, 13:35 Uhr

.klpp-toggle { text-align:center; margin:.25rem 0; } .klpp-btn {

 display:inline-block; padding:.55rem 1rem;
 border:2px solid #000; border-radius:12px;
 background:#fff; color:#000; font-weight:700;
 text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,.08);
 cursor:pointer;

} /* Checkbox unsichtbar, aber vorhanden (für Toggle-Logik) */ .klpp-check {

 position:absolute; opacity:0; width:0; height:0; pointer-events:none;

} /* Optional: Button-Style bei geöffnetem Zustand leicht betonen */ .klpp-wrap > input[type="checkbox"]:checked + label .klpp-btn {

 box-shadow:0 2px 6px rgba(0,0,0,.12);

} </style>

 <input class="klpp-check" type="checkbox" >
 <label class="klpp-toggle">
   Details >>
 </label>

@@ Zeile 3: / Zeile 3: @@
    {{KLAPP}}
    … TEXT, BILDER, Wikitext …
-   </details>
+   </div>
 Optionale Parameter:
@@ Zeile 10: / Zeile 10: @@
 -->
-<details {{#ifeq:{{{start|zu}}}|auf|open}}>
+<style>
-  <summary style="
+/* --- Nur innerhalb dieses Templates wirksam --- */
-    list-style:none;                 /* entfernt Standarddreieck */
+.klpp-wrap > :not(.klpp-toggle):not(input[type="checkbox"]) { display: none; }
-    text-align:center;               /* Button mittig */
+.klpp-wrap > input[type="checkbox"]:checked ~ * { display: revert; }
-    cursor:pointer;
-    margin:.25rem 0;
+.klpp-toggle { text-align:center; margin:.25rem 0; }
-   ">
+.klpp-btn {
-    <span style="
+   display:inline-block; padding:.55rem 1rem;
-      display:inline-block;
+  border:2px solid #000; border-radius:12px;
-      padding:.55rem 1rem;
+  background:#fff; color:#000; font-weight:700;
-      border:2px solid #000000;      /* schwarze Linie */
+  text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,.08);
-      border-radius:12px;            /* abgerundete Ecken */
+  cursor:pointer;
-      background:#ffffff;
+}
-      color:#000000;
+/* Checkbox unsichtbar, aber vorhanden (für Toggle-Logik) */
-      font-weight:700;
+.klpp-check {
-      text-decoration:none;
+  position:absolute; opacity:0; width:0; height:0; pointer-events:none;
-      box-shadow:0 1px 2px rgba(0,0,0,.08);
+}
-     ">
+/* Optional: Button-Style bei geöffnetem Zustand leicht betonen */
-      {{{label|Details >>}}}
+.klpp-wrap > input[type="checkbox"]:checked + label .klpp-btn {
-    </span>
+  box-shadow:0 2px 6px rgba(0,0,0,.12);
-   </summary>
+}
-  <div style="padding:.6rem 0;">
+</style>
+<div class="klpp-wrap">
+  <input class="klpp-check" type="checkbox" {{#ifeq:{{{start|zu}}}|auf|checked}}>
+  <label class="klpp-toggle">
+     <span class="klpp-btn">{{{label|Details >>}}}</span>
+   </label>