MediaWiki:Common.css: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

@@ Zeile 515: / Zeile 515: @@
    .mwnews-card{ width:100%; }
    .mwnews-thumb img{ height:240px; object-fit:contain; background:#000; }
+}
+/* -----------------------------------------
+/* ========= 1) Grundlegende Linksichtbarkeit ========= */
+.mw-parser-output a {
+  color: #2d6ca2;                 /* klarer Blauton */
+  text-decoration: underline;     /* immer erkennbar */
+  text-underline-offset: 2px;
+}
+.mw-parser-output a:hover,
+.mw-parser-output a:focus {
+  color: #1c4d7d;
+  text-decoration-thickness: 2px; /* stärker bei Hover */
+}
+.mw-parser-output a:visited { color: #5a3fa8; }  /* erkennbar „bereits besucht“ */
+/* Tastaturfokus (barrierefrei) */
+.mw-parser-output a:focus-visible {
+  outline: 3px solid #99c2ff;
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+/* Tap-Feedback auf Touch-Geräten */
+@media (hover:none) and (pointer:coarse) {
+  .mw-parser-output a:active {
+    background: rgba(45,108,162,.08);
+    border-radius: 6px;
+  }
+}
+/* ========= 2) Link-Listen / Navigationslisten ========= */
+.list-links { list-style: none; padding-left: 0; margin: .4rem 0; }
+.list-links li {
+  display: flex; align-items: center; gap: .5rem;
+  padding: .45rem .6rem;
+  border: 1px solid #e6e6e6;
+  border-radius: 10px;
+  background: #fff;
+  margin: .35rem 0;
+  transition: transform .06s ease, box-shadow .12s ease, background .12s ease;
+}
+.list-links li::before { content: "›"; font-weight: 700; color: #888; }
+.list-links li:hover { background:#f8fbff; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
+.list-links li a { text-decoration: none; }          /* Kachel-Optik: kein Unterstrich im Kasten */
+.list-links li a:hover { text-decoration: underline; }
+/* ========= 3) „Chips“ / Kategorie-Pillen ========= */
+.pill-row a, .pill-list a {
+  display: inline-block;
+  border: 1px solid #e0e0e0;
+  padding: .35rem .7rem;
+  border-radius: 999px;
+  background: #fff;
+  text-decoration: none;
+  transition: background .12s ease, box-shadow .12s ease, transform .06s ease;
+}
+.pill-row a:hover, .pill-list a:hover { background:#f2f7ff; box-shadow: 0 1px 6px rgba(0,0,0,.06); transform: translateY(-1px); }
+.pill-row a:focus-visible, .pill-list a:focus-visible { outline: 3px solid #99c2ff; outline-offset: 2px; }
+/* ========= 4) Ganze Karten klickbar machen ========= */
+/* Im Wikitext: innerhalb .card den ersten Link mit class="card-link" setzen */
+.card { position: relative; }
+.card .card-link {
+  position: static;               /* normal, falls man sie auch im Text sehen will */
+  font-weight: 600;
+}
+.card.card-clickable { cursor: pointer; }
+.card.card-clickable:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); }
+/* Optional: unsichtbarer Overlay-Link, falls du die ganze Karte klickbar willst:
+   <a class="card-overlay" href="..."></a> */
+.card .card-overlay {
+  position:absolute; inset:0; z-index:1;
+  text-indent:-9999px;            /* sichtbar lassen? dann weglassen */
+  background: transparent;
+}
+/* ========= 5) Kleinere Hinweise-Icons ========= */
+a.external::after { content:" ↗"; font-size:.9em; }
+a.category-link::after { content:" ⟶"; }
+/* ========= 6) Dark-Mode kompatible Farben (nur wenn du Dark-Mode nutzt) ========= */
+@media (prefers-color-scheme: dark) {
+  .mw-parser-output a { color:#86c2ff; }
+  .mw-parser-output a:hover, .mw-parser-output a:focus { color:#c5e1ff; }
+  .list-links li { background:#1c1c1c; border-color:#313131; }
+  .list-links li:hover { background:#20242b; }
+  .pill-row a, .pill-list a { background:#1c1c1c; border-color:#313131; }
 }