MediaWiki:Common.css

Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.

• Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
• Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
• Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken

/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */

img {
	max-width:90%;
	height:auto;
}

/* Slideshow */
.mw-gallery-slideshow-img-container {
   display:inline-block;
   width: 75% !important; /* Use !important if needed to override defaults */
}

.mw-gallery-slideshow {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    & .gallerytext {
      margin-top: 10px !important;
      margin-bottom: 10px !important;
    }
}

/* Artikelname in Kapitälchen */
.mw-page-title-main {
    font-variant: small-caps;
/*    font-family:arial, "lucida console", sans-serif; */ /* Schriftart */
}

/* Artikelüberschrift für MH und FB etc. (nicht h1, h2, h3, h4 etc.) */
.mw-item-heading {
    font-weight: bold;
    font-size:large;
}

.mw-mh-deckel {
    display:inline-block;
    box-shadow:
/*        inset 0 -3em 3em rgb(0 200 0 / 30%), */
/*                0 0 0 2px white, */
        0.3em 0.3em 1em rgb(200 200 200 / 60%);
}

/* Schlagschatten für Bild oben links */
.timeless-logo img {
    box-shadow:
        0.3em 0.3em 1em rgb(200 200 200 / 60%);
}

.mw-drop-shadow-soft {
    display:inline-block;
/*    box-shadow:                                 */
/*        0.3em 0.3em 1em rgb(200 200 200 / 60%); */
    filter: drop-shadow(5px 5px 12px #c8c8c8);
}

.bild-mittig {
/*    width: 200px; */
/*    height: 200px; */
/*    background-color: #0a0a23; */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Zentriertes Grid für Bilder mit Quellenangabe */
/* Nötig, da die seitliche Quellenangabe auf dem */
/* Handy bei der responsiven Reformatierung      */
/* ursprünglich unter das Bild rutschte. Nun     */
/* bilden Bild, Quelle und Bildunterschrift      */
/* eine Einheit.                                 */
#imagegridc {
margin: 0 0 0 3%;
display: grid;
/* grid-template-rows: repeat(2, 1fr); */
grid-template-rows: min-content min-content;
grid-template-columns: auto min-content;
/* grid-template-columns: repeat(2, 1fr); */
grid-column-gap: 5px;
grid-row-gap: 5px;
align-items: center;
justify-content: center;
}

#igc-image { grid-area: 1 / 1 / 2 / 2; }
#igc-caption { grid-area: 2 / 1 / 3 / 2; justify-self: center;}
#igc-source { grid-area: 1 / 2 / 3 / 3; }

/* Quellenangabe vertikal => span */
.mw-quelle-vertikal {
    vertical-align: middle;
    writing-mode:tb-rl;
    writing-mode:vertical-rl;
    font-size: xx-small;
    letter-spacing:2px;
}

/* Quellenangabe akmh */
/*.quelleakmh img { width: 100%; } */
.quelleakmh { position: relative; }
.quelleakmh::after {
  content: " Quelle: akmh ";
  position: absolute;
  bottom: -5%;
  right: 0;
  opacity: 1;
  font-size: 1em;
  color: gray;
/*  writing-mode: vertical-lr; */
}

.mw-dr-disclaimer-box {
  width: 90%;
/*    height: 150px; */
  padding: 20px;
  border: 2px solid blue;
  border-radius: 15px;
  margin: 10px;
/*  background-color: lightblue; /* Optional: Hintergrundfarbe */ */
  hyphens: auto; 
  text-align: justify;
}

#rectangle11{
    width:50%;
    height:50%;
    border-style: solid;
    border-color: red;
}

.overlayW61 {
  position: absolute;
  display: none;
  width: 50%;
  height: 50%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0,1);
  border-style: solid;
  border-color: red;
  z-index: 2;
  cursor: pointer;
}

.chromo-zd-container:hover .overlayW61 {
  opacity: 1;
}

/*************************/
/* Timeless Skin Changes */
/*************************/
/* Werkzeuge ausblenden */
#site-tools.sidebar-chunk { display: none; }

/* "Druckversion" in 'Mehr' (rechts) ausblenden */
li#t-print { display:none; }

/*** Test ***/

 /* Container holding the image and the text */
.container {
  position: relative;
  text-align: center;
  color: white;
}

/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mygrid{
  margin: 20px auto;
  width:400px;
  height:400px;
  background-color:#fff;
  display:grid;
  grid-template-columns: 200px 200px;
  grid-row: auto auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

#mw-img-src {
    color:#a020f0;
    font-size: x-small;
/*    letter-spacing:2px; */
}

/**** Testsektion ZD ****/
  :root {
    --bg: #f4f3ef;
    --surface: #ffffff;
    --border: #d8d5cc;
    --text: #2a2825;
    --muted: #888480;
    --hl-border: #e05a2b;
    --hl-shadow: #e05a2b55;
    --combo-active-bg: #e05a2b12;
    --combo-active-border: #e05a2b;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    padding: 2.5rem 2rem;
    max-width: 900px;
    margin: 0 auto;
  }

  h1 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    letter-spacing: -0.02em;
  }
  .page-subtitle {
    color: var(--muted);
    font-size: 0.82rem;
    margin-bottom: 2rem;
  }

  /* ─── Bild-Container mit Overlays ─── */
  .figure-section {
    margin-bottom: 3rem;
  }

  .figure-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
  }
  .figure-desc {
    font-size: 0.82rem;
    color: var(--muted);
    margin-bottom: 1rem;
  }

  .image-container {
    position: relative;
    display: inline-block;
    max-width: 100%;
    margin-bottom: 1.5rem;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 3px 16px rgba(0,0,0,0.12);
  }

  .image-container img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* ─── Overlay-Felder ─── */
  .overlay {
    position: absolute;
    border: 3px solid transparent;
    border-radius: 3px;
    pointer-events: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    /* top/left/width/height werden per data-Attribut gesetzt */
  }

  .overlay.highlighted {
    border-color: var(--hl-border);
    box-shadow: inset 0 0 0 2px var(--hl-shadow), 0 0 0 2px var(--hl-shadow);
  }

  /* ─── Kombinationen ─── */
  .combos-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 0.6rem;
  }

  .combos {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-width: 600px;
  }

  .combos > div {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.55rem 0.9rem;
    font-size: 0.87rem;
    cursor: default;
    transition: background 0.15s, border-color 0.15s;
    line-height: 1.5;
  }

  .combos > div:hover,
  .combos > div.active {
    background: var(--combo-active-bg);
    border-color: var(--combo-active-border);
  }

  .combo-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74rem;
    color: var(--hl-border);
    font-weight: 600;
    margin-right: 0.55rem;
  }

  .legend {
    margin-top: 2rem;
    font-size: 0.78rem;
    color: var(--muted);
    border-top: 1px solid var(--border);
    padding-top: 1rem;
    max-width: 600px;
  }
  .legend code {
    font-family: 'JetBrains Mono', monospace;
    background: #e8e5de;
    padding: 0.1em 0.4em;
    border-radius: 3px;
    color: var(--text);
  }