MediaWiki:Common.css: Unterschied zwischen den Versionen

Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 1.035: Zeile 1.035:




/* ==== ADOS Hero-Bereich – Whisky-Balken (Desktop + Mobil) ==== */
/* -------------------------------------------------
  HERO-BEREICH (oben, whiskyfarbener ConanWiki-Style)
  ------------------------------------------------- */


body.page-Hauptseitev2 #mw-content-text .ados-hero {
.ados-hero {
   margin: 0 0 1.2rem;
   margin: 0 -1rem 1.5rem;
   padding: 1.6rem 1.8rem 1.2rem;
   padding: 1.5rem 1.75rem 2rem;
 
   border-radius: 18px;
   /* sanfter Whisky-Farbverlauf */
   background: radial-gradient(circle at top left, #f7e4c3 0, #f0d7af 40%, #e8c894 100%);
   background: linear-gradient(
   box-shadow: 0 10px 25px rgba(0,0,0,.07);
    135deg,
    rgba(210, 160, 80, 0.35),
    rgba(248, 235, 206, 0.95)
  );
 
  border-radius: 16px;
  border: 1px solid rgba(145, 104, 38, 0.35);
   box-shadow: 0 8px 20px rgba(80, 50, 20, 0.18);
 
  color: #3a2a16;
}
}


/* Inhalt innen: links Text, rechts Links-Spalten */
.ados-hero__grid {
body.page-Hauptseitev2 #mw-content-text .ados-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
   display: flex;
   display: flex;
   gap: 1.8rem;
  flex-wrap: wrap;
   align-items: flex-start;
   gap: 1.75rem;
  justify-content: space-between;
   align-items: stretch;
}
}


/* linker Block (Titel + Untertitel) */
/* Linke Spalte: großer Titel */
body.page-Hauptseitev2 #mw-content-text .ados-hero__left {
.ados-hero__title {
   flex: 1 1 42%;
  flex: 0 0 230px;
  max-width: 260px;
  font-family: "Georgia","Times New Roman",serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.15;
  color: #4b2b14;
}
.ados-hero__title span {
   display: block;
}
}
 
.ados-hero__title hr {
body.page-Hauptseitev2 #mw-content-text .ados-hero__title {
   margin-top: .75rem;
   font-size: 2rem;
   border: 0;
   font-weight: 700;
   border-top: 1px solid rgba(75,43,20,.35);
   margin: 0 0 .4rem;
  color: #4a2f10;
}
}


body.page-Hauptseitev2 #mw-content-text .ados-hero__subtitle {
/* Mitte: Beschreibung */
   margin: 0;
.ados-hero__center {
   font-size: 0.98rem;
   flex: 1 1 260px;
   line-height: 1.55;
   display: flex;
  align-items: center;
   justify-content: center;
}
}
 
.ados-hero__center-box {
/* rechter Block – 3 Spalten wie bei ConanWiki */
  max-width: 460px;
body.page-Hauptseitev2 #mw-content-text .ados-hero__right {
   padding: 1.2rem 1.6rem;
   flex: 1 1 58%;
   text-align: center;
   display: grid;
   border-radius: 14px;
   grid-template-columns: repeat(3, minmax(0, 1fr));
  background: rgba(255,255,255,.25);
   gap: 0.75rem 1.5rem;
  border: 1px solid rgba(255,255,255,.55);
   font-size: 0.9rem;
   box-shadow: 0 6px 14px rgba(0,0,0,.04);
  font-family: "Courier New",ui-monospace,monospace;
   font-size: 0.95rem;
  line-height: 1.6;
  color: #3b2a1a;
  display: inline-block;
}
}
 
.ados-hero__center-box strong {
body.page-Hauptseitev2 #mw-content-text .ados-hero__heading {
   font-weight: 700;
   font-weight: 600;
   color: #4b2b14;
  margin-bottom: 0.25rem;
   color: #5b3a14;
}
}


body.page-Hauptseitev2 #mw-content-text .ados-hero__right ul {
/* Rechte Spalte: 3 Spalten */
   list-style: none;
.ados-hero__cols {
   margin: 0;
   flex: 0 0 260px;
   padding: 0;
  display: flex;
   flex-wrap: wrap;
   gap: 1.25rem;
}
}
 
.ados-hero__col {
body.page-Hauptseitev2 #mw-content-text .ados-hero__right li {
   flex: 1 1 120px;
   margin: 1px 0;
  font-size: 0.95rem;
}
}
 
.ados-hero__col-title {
body.page-Hauptseitev2 #mw-content-text .ados-hero__right a {
  font-weight: 700;
   text-decoration: none;
  margin-bottom: .35rem;
   color: #4b2b14;
}
}
 
.ados-hero__col ul {
body.page-Hauptseitev2 #mw-content-text .ados-hero__right a:link,
  margin: 0;
body.page-Hauptseitev2 #mw-content-text .ados-hero__right a:visited {
   padding-left: 1.1rem;
   color: #7a4b18;
}
}
 
.ados-hero__col li {
body.page-Hauptseitev2 #mw-content-text .ados-hero__right a:hover {
   margin: .12rem 0;
   text-decoration: underline;
}
}


 
/* Mobil */
/* ============================================
@media (max-width: 720px) {
  Mobile 2-Spalten-Layout
   .ados-hero {
  ============================================ */
     margin: 0 0 1.25rem;
 
  }
@media (max-width: 900px) {
  .ados-hero__grid {
 
  /* Container zentrieren */
   body.page-Hauptseitev2 .ados-hero__inner {
     display: flex;
     flex-direction: column;
     flex-direction: column;
     align-items: center;
     align-items: stretch;
    text-align: center;
    gap: 1.2rem;
   }
   }
 
   .ados-hero__title {
   /* Intro-Text */
     max-width: none;
  body.page-Hauptseitev2 .ados-hero__subtitle {
     font-size: 1.05rem;
    line-height: 1.55;
    margin-bottom: 0.5rem;
     text-align: center;
     text-align: center;
    font-size: 2.1rem;
   }
   }
 
   .ados-hero__title hr {
   /* GRID für Hauptreihen + Serien */
     margin-left: auto;
  body.page-Hauptseitev2 .ados-hero__groups {
     margin-right: auto;
     display: grid;
     width: 50%;
     grid-template-columns: 1fr 1fr;   /* Zwei Spalten – wie ConanWiki */
     width: 100%;
    max-width: 600px;
    gap: 1.5rem 1rem;
    margin-top: 0.3rem;
    text-align: left;
   }
   }
 
   .ados-hero__center {
  /* Jede der beiden Spalten */
     order: 2;
   body.page-Hauptseitev2 .ados-hero__column {
     padding: 0 0.6rem;
   }
   }
 
   .ados-hero__cols {
   body.page-Hauptseitev2 .ados-hero__heading {
     order: 3;
     font-size: 1.1rem;
     justify-content: center;
    margin-bottom: 0.4rem;
    color: #7a5c32;
     font-weight: 700;
   }
   }
 
   .ados-hero__col {
   body.page-Hauptseitev2 .ados-hero__column ul {
     flex: 0 0 150px;
     list-style: none;
    margin: 0;
    padding: 0;
  }
 
  body.page-Hauptseitev2 .ados-hero__column li {
    margin: 2px 0;
  }
 
  /* Specials – eigene Zeile, zentriert */
  body.page-Hauptseitev2 .ados-hero__specials {
    margin-top: 1.2rem;
    width: 100%;
    max-width: 600px;
     text-align: center;
     text-align: center;
  }
  body.page-Hauptseitev2 .ados-hero__specials ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  body.page-Hauptseitev2 .ados-hero__specials li {
    margin: 2px 0;
   }
   }
}
}