Vorlage:KLAPP: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

Version vom 28. September 2025, 13:26 Uhr

 border: 1px solid #e2e8f0;
 border-radius: 12px;
 background: #fff;
 box-shadow: 0 1px 2px rgba(0,0,0,.06);
 margin: .75rem 0;
 overflow: hidden; /* runde Ecken auch für den Inhalt */

}

/* Kopfzeile */ details.klapp > summary.klapp-summary {

 list-style: none;           /* verhindert Standard-Dreieck in manchen Skins/Browsern */
 display: flex;
 align-items: center;
 gap: .5rem;
 padding: .75rem 1rem;
 font-weight: 700;
 cursor: pointer;
 user-select: none;
 background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
 border-bottom: 1px solid #e2e8f0;

}

/* eigenes Pfeil-Icon */ details.klapp > summary.klapp-summary .klapp-arrow {

 display: inline-block;
 transform: rotate(0deg);
 transition: transform .2s ease;
 font-size: 1.1em;
 line-height: 1;
 margin-right: .1rem;
 /* typografischer Pfeil, wirkt „schlanker“ als > */
 content: "›";

}

/* Pfeil drehen, wenn geöffnet */ details.klapp[open] > summary.klapp-summary .klapp-arrow {

 transform: rotate(90deg);

}

/* Inhalt */ details.klapp > .klapp-content {

 padding: 1rem 1.25rem;

}

/* sanftes Einblenden (nur bei unterstützten Browsern sichtbar) */ details.klapp[open] > .klapp-content {

 animation: klappFade .18s ease;

} @keyframes klappFade {

 from { opacity: 0; transform: translateY(-2px); }
 to   { opacity: 1; transform: translateY(0); }

}

/* optionaler Dark-Mode über Systempräferenz */ @media (prefers-color-scheme: dark) {

 details.klapp { background:#0b0f16; border-color:#1f2937; box-shadow: 0 1px 2px rgba(0,0,0,.45); }
 details.klapp > summary.klapp-summary { background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%); border-bottom-color:#1f2937; color:#e5e7eb; }
 details.klapp > .klapp-content { color:#e5e7eb; }

} </style>

 <summary class="klapp-summary">
   ›
   Abschnitt
 </summary>

@@ Zeile 1: / Zeile 1: @@
-<!-- Nutzung:
+<!-- Vorlage:KLAPP
-   {{KLAPP}}
+Nutzung (einfachste Form):
-   … Dein Inhalt (Wikitext, Bilder, Tabellen) …
+   {{KLAPP|Titel=Dein Abschnitt}}
-   </div>
+   … TEXT, BILDER, Wikitext …
+   </details>
 Optionale Parameter:
-   |start=zu   -> startet eingeklappt (Standard)
+   |Titel=…        -> Text in der Kopfzeile
-   |start=auf  -> startet ausgeklappt
+   |start=auf/zu   -> initial offen (auf) oder zu (Standard: zu)
-   |zu=› einblenden      -> Label im zugeklappten Zustand
-  |auf=‹ ausblenden     -> Label im aufgeklappten Zustand
 -->
-<div class="mw-collapsible{{#ifeq:{{{start|zu}}}|zu| mw-collapsed}}"
-     data-expandtext="{{{zu|› einblenden}}}"
+<!-- Inline-Styles nur für .klapp-Namensraum; keine Einträge in Common.css nötig -->
-     data-collapsetext="{{{auf|‹ ausblenden}}}">
+<style>
+/* Container (direkt das <details>-Element) */
+details.klapp {
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0,0,0,.06);
+  margin: .75rem 0;
+  overflow: hidden; /* runde Ecken auch für den Inhalt */
+}
+/* Kopfzeile */
+details.klapp > summary.klapp-summary {
+  list-style: none;           /* verhindert Standard-Dreieck in manchen Skins/Browsern */
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  padding: .75rem 1rem;
+  font-weight: 700;
+  cursor: pointer;
+  user-select: none;
+  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
+  border-bottom: 1px solid #e2e8f0;
+}
+/* eigenes Pfeil-Icon */
+details.klapp > summary.klapp-summary .klapp-arrow {
+  display: inline-block;
+  transform: rotate(0deg);
+  transition: transform .2s ease;
+  font-size: 1.1em;
+  line-height: 1;
+  margin-right: .1rem;
+  /* typografischer Pfeil, wirkt „schlanker“ als > */
+  content: "›";
+}
+/* Pfeil drehen, wenn geöffnet */
+details.klapp[open] > summary.klapp-summary .klapp-arrow {
+  transform: rotate(90deg);
+}
+/* Inhalt */
+details.klapp > .klapp-content {
+  padding: 1rem 1.25rem;
+}
+/* sanftes Einblenden (nur bei unterstützten Browsern sichtbar) */
+details.klapp[open] > .klapp-content {
+  animation: klappFade .18s ease;
+}
+@keyframes klappFade {
+  from { opacity: 0; transform: translateY(-2px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+/* optionaler Dark-Mode über Systempräferenz */
+@media (prefers-color-scheme: dark) {
+  details.klapp { background:#0b0f16; border-color:#1f2937; box-shadow: 0 1px 2px rgba(0,0,0,.45); }
+  details.klapp > summary.klapp-summary { background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%); border-bottom-color:#1f2937; color:#e5e7eb; }
+  details.klapp > .klapp-content { color:#e5e7eb; }
+}
+</style>
+<details class="klapp" {{#ifeq:{{{start|zu}}}|auf|open}}>
+  <summary class="klapp-summary">
+    <span class="klapp-arrow">›</span>
+    <span class="klapp-title">'''{{{Titel|Abschnitt}}}'''</span>
+  </summary>
+  <div class="klapp-content">