MediaWiki:Common.css: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

@@ Zeile 1.122: / Zeile 1.122: @@
-/* ==== Mobile-Layout für ADOS-Hero ==== */
+/* ==== Mobile-Layout – ADOS-Hero ==== */
 @media (max-width: 900px) {
+  /* der Balken selbst */
    body.page-Hauptseite .ados-hero {
-    /* fast vollbreit wie ConanWiki, ohne „Karten“-Look */
+     margin: -0.3rem -1rem 1rem;
-     margin: -0.3rem -1rem 0.8rem;
+     padding: 1.3rem 1rem 1rem;
-     padding: 1.1rem 1rem 0.9rem;
      border-radius: 0;
-     box-shadow: 0 4px 10px rgba(80, 50, 20, 0.15);
+     box-shadow: 0 4px 12px rgba(80, 50, 20, 0.16);
    }
+  /* alles untereinander, zentriert */
    body.page-Hauptseite .ados-hero__inner {
-     flex-direction: column;
+     display: block;
-     align-items: stretch;
+    max-width: 900px;
+     margin: 0 auto;
+    text-align: center;
+  }
+  body.page-Hauptseite .ados-hero__left {
+    margin-bottom: 1rem;
    }
    body.page-Hauptseite .ados-hero__title {
-     font-size: 1.6rem;
+     font-size: 1.7rem;
-     text-align: center;
+     margin-bottom: 0.4rem;
    }
    body.page-Hauptseite .ados-hero__subtitle {
-     text-align: center;
+     font-size: 0.98rem;
-     margin-bottom: 0.7rem;
+    line-height: 1.5;
+     margin: 0;
    }
+  /* 2 Spalten mit Kategorien – wie beim ConanWiki */
    body.page-Hauptseite .ados-hero__right {
-     /* 2 Spalten auf mittelgroßen Phones */
+     display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
-     gap: 0.5rem 1rem;
+     gap: 0.8rem 1.2rem;
+    margin-top: 1rem;
+    text-align: center;
+    font-size: 0.92rem;
    }
-}
-@media (max-width: 600px) {
+   body.page-Hauptseite .ados-hero__column {
-   body.page-Hauptseite .ados-hero {
+     /* sorgt dafür, dass Überschrift + Links schön zusammenstehen */
-     margin: -0.2rem -0.7rem 0.8rem;
-    padding: 1rem 0.8rem 0.8rem;
    }
-   body.page-Hauptseite .ados-hero__right {
+   body.page-Hauptseite .ados-hero__heading {
-     /* bei schmalen Phones alles untereinander */
+     font-weight: 600;
-     grid-template-columns: 1fr;
+     margin-bottom: 0.25rem;
+    color: #8a7a5c;      /* ähnlich dem grauen „Hauptreihen“ im ConanWiki */
    }
    body.page-Hauptseite .ados-hero__right ul {
-     margin-bottom: 0.3rem;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  body.page-Hauptseite .ados-hero__right li {
+    margin: 1px 0;
+  }
+  body.page-Hauptseite .ados-hero__right a:link,
+  body.page-Hauptseite .ados-hero__right a:visited {
+    color: #7a4b18;
+    text-decoration: none;
+  }
+  body.page-Hauptseite .ados-hero__right a:hover {
+    text-decoration: underline;
+  }
+}
+/* Optional: bei extrem schmalen Geräten etwas enger machen */
+@media (max-width: 500px) {
+  body.page-Hauptseite .ados-hero {
+     margin: -0.2rem -0.7rem 0.9rem;
+    padding: 1.1rem 0.8rem 0.9rem;
    }
 }