MediaWiki:Common.css: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

@@ Zeile 236: / Zeile 236: @@
 }
-/* ===== Feuerwerk / ADOS Canvas-Bereich ===== */
+/* Overlay & Modal (verwende deine bestehende Popup-Optik gern weiter) */
+.mw-popup-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.45);
+  z-index: 10000;
+}
+.mw-popup-modal {
+  position: fixed;
+  top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+  background: #fff;
+  max-width: 96%;
+  width: 760px;
+  padding: 20px 24px 26px;
+  border-radius: 14px;
+  z-index: 10001;
+  text-align: center;
+  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
+  max-height: 94vh;
+  overflow-y: auto;
+}
+/* Whisky-Canvas Bühne */
 .mw-fw-canvas-wrap {
    position: relative;
-   height: 340px; /* leicht vergrößert für mehr Raum */
+   height: 260px;
-   margin: -10px -10px 16px;
+   margin: -8px -8px 14px;
    border-radius: 10px;
    overflow: hidden;
-   background: radial-gradient(ellipse at center, #020617 0%, #000814 70%, #000510 100%);
+   background: radial-gradient(ellipse at center, #0b1c38 0%, #061025 60%, #03060d 100%);
-   box-shadow: inset 0 0 40px rgba(0,0,0,0.8);
+   box-shadow: inset 0 0 30px rgba(0,0,0,0.65);
-}
-.mw-fw-canvas {
-  display: block;
-  width: 100%;
-  height: 100%;
 }
+.mw-fw-canvas { display:block; width:100%; height:100%; }
-/* ===== Text & Buttons ===== */
+/* Headline & Intro */
 .mw-popup-modal h2 {
    margin: 8px 0 6px;
-   font-size: 1.45em;
+   font-size: 1.35em;
-  color: #111;
 }
 .mw-popup-content p {
-   margin: 0.6em 0;
+   margin: 0.5em 0;
-   font-size: 1.08em;
+   font-size: 1.06em;
-   line-height: 1.55;
+   line-height: 1.5;
-  color: #222;
 }
-/* ===== Buttons ===== */
+/* Kartenlayout für die zwei Abfüllungen */
-.mw-popup-button-row {
+.mw-wnews-cards {
-   display: flex;
+  margin-top: 10px;
-   justify-content: center;
+  display: grid;
-   gap: 10px;
+  grid-template-columns: 1fr 1fr;
-   margin-top: 1em;
+  gap: 12px;
-   flex-wrap: wrap;
+}
+.mw-wnews-card {
+  display: grid;
+  grid-template-rows: auto auto;
+  background: #f8f9fa;
+  border: 1px solid #e3e6e8;
+  border-radius: 10px;
+  text-decoration: none;
+  color: inherit;
+  overflow: hidden;
+  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
+}
+.mw-wnews-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 18px rgba(0,0,0,.12);
+  border-color: #d5dadd;
+}
+.mw-wnews-thumb img {
+  display:block;
+  width:100%;
+  height: 220px;
+  object-fit: cover;
+}
+.mw-wnews-meta {
+  padding: 10px 12px;
+   display:flex;
+   flex-direction:column;
+   gap: 6px;
+}
+.mw-wnews-title {
+  font-weight: 700;
+   font-size: 1.02em;
+}
+.mw-wnews-cta {
+  color: #36c;
+   font-weight: 600;
 }
-.mw-popup-close,
+/* Button-Reihe */
-.mw-popup-wiki-button {
+.mw-popup-button-row {
-   flex: 1 1 160px;
+   display:flex; justify-content:center; gap:10px; margin-top: 12px; flex-wrap: wrap;
-  text-align: center;
 }
 .mw-popup-close {
    padding: 10px 16px;
@@ Zeile 290: / Zeile 338: @@
    cursor: pointer;
    font-size: 1em;
-  font-weight: 600;
-  transition: background 0.2s ease;
-}
-.mw-popup-close:hover {
-  background: #258;
 }
+.mw-popup-close:hover { background:#258; }
-.mw-popup-wiki-button {
+/* Mobil */
-  padding: 10px 16px;
+@media (max-width: 640px) {
-   background: #f60;
+  .mw-popup-modal { width: calc(100% - 20px); padding: 16px; }
-  color: #fff;
+   .mw-fw-canvas-wrap { height: 220px; margin: -6px -6px 10px; }
-  border-radius: 6px;
+   .mw-wnews-cards { grid-template-columns: 1fr; }
-   text-decoration: none;
+   .mw-wnews-thumb img { height: 200px; }
-  font-size: 1em;
-  font-weight: 600;
-   transition: background 0.2s ease;
-}
-.mw-popup-wiki-button:hover {
-  background: #d85000;
 }
-/* ===== Mobile ===== */
-@media (max-width: 600px) {
-  .mw-popup-modal {
-    width: calc(100% - 20px);
-    padding: 16px;
-  }
-  .mw-fw-canvas-wrap {
-    height: 260px; /* etwas kleiner mobil */
-    margin: -6px -6px 10px;
-  }
-  .mw-popup-modal h2 {
-    font-size: 1.25em;
-  }
-  .mw-popup-content p {
-    font-size: 1em;
-  }
-}