/* Moin.Moments auf den Bestandsseiten.
   Wortmarke statt Schriftzug, Galerie mit Umschalter hell und dunkel.
   Wird nach den jeweiligen Seiten-Stylesheets geladen. */

/* ------------------------------------------------------- Wortmarke im Kopf */

.nav-logo img,
.footer-logo img,
.gal-brand img {
    display: block;
    width: auto;
    height: 26px;
}
@media (min-width: 1024px) { .nav-logo img { height: 29px; } }
.footer-logo img { height: 26px; }
.gal-brand img   { height: 24px; }

.footer-brand .footer-tagline { margin-top: .6rem; }

/* ==========================================================================
   Galerie: Umschalter hell und dunkel

   Die Galerie war fest dunkel. Dunkel bleibt die Voreinstellung, weil Fotos
   darauf besser stehen. Die Wahl merkt sich der Browser. Das Skript setzt
   data-theme immer, deshalb reichen hier zwei klare Zweige.
   ========================================================================== */

/* Dunkel, aber in der Marke: aus dem alten Blau wird Gold. */
html[data-theme="dark"] body {
    --primary: #c49969;
    --primary-soft: #dcbb93;
}

html[data-theme="light"] body {
    --primary: #05233d;
    --primary-soft: #c49969;
    --bg: #f5f7f8;
    --bg-card: #ffffff;
    --bg-chip: #eaeef1;
    --text: #05233d;
    --text-dim: #4a5c6b;
    --border: rgba(5, 35, 61, .12);
}

/* Wortmarke folgt dem Modus. Beide Fassungen stehen im Markup,
   sichtbar ist immer genau eine. */
/* Gewichtung muss ueber .gal-brand img liegen, sonst gewinnt dessen
   display:block und es stehen beide Fassungen nebeneinander. */
.gal-brand img.mm-marke-hell,   img.mm-marke-hell   { display: none; }
.gal-brand img.mm-marke-dunkel, img.mm-marke-dunkel { display: block; }
html[data-theme="dark"] .gal-brand img.mm-marke-hell,
html[data-theme="dark"] img.mm-marke-hell   { display: block; }
html[data-theme="dark"] .gal-brand img.mm-marke-dunkel,
html[data-theme="dark"] img.mm-marke-dunkel { display: none; }

/* ------------------------------------------------------------- Der Knopf */

.mm-modus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-chip);
    color: var(--text);
    cursor: pointer;
    transition: background-color .2s, border-color .2s, transform .12s;
}
.mm-modus:hover  { border-color: var(--primary); }
.mm-modus:active { transform: translateY(1px); }
.mm-modus svg    { width: 19px; height: 19px; display: block; }

/* Angeboten wird immer der andere Modus: im Dunkeln die Sonne, im Hellen der Mond. */
.mm-modus .mm-sonne { display: none; }
.mm-modus .mm-mond  { display: block; }
html[data-theme="dark"] .mm-modus .mm-sonne { display: block; }
html[data-theme="dark"] .mm-modus .mm-mond  { display: none; }

.gal-topbar { gap: .5rem; }

/* Das CMS hat keinen Kopfbereich. Die Wortmarke steht deshalb frei
   ueber der Anmeldung und der Verwaltung. */
.mm-cms-marke { margin: 0 0 1.5rem; }
.mm-cms-marke a { display: inline-block; }
.mm-cms-marke img { display: block; height: 30px; width: auto; }
@media (min-width: 768px) { .mm-cms-marke { margin-bottom: 2rem; } }

/* Der Farbschleier oben in der Galerie war Blau auf Lila, also genau das
   Verlaufspaar, das jede Baukastenseite benutzt. Jetzt Gold auf Navy. */
.gal-glow {
    background: radial-gradient(ellipse at center,
        rgba(196, 153, 105, .20), rgba(5, 35, 61, .10) 55%, transparent 75%);
}
html[data-theme="light"] .gal-glow {
    background: radial-gradient(ellipse at center,
        rgba(196, 153, 105, .22), rgba(5, 35, 61, .06) 55%, transparent 75%);
}

/* moin.css setzt Ueberschriften auf Navy. In der dunklen Galerie waere die
   Ueberschrift damit unsichtbar. Wo ein Modus gesetzt ist, also nur in der
   Galerie, folgen Ueberschriften der Textfarbe des Modus. */
html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3 { color: var(--text); }

/* Bewerten, Ansage und Sprachgruss haben keinen Kopfbereich.
   Die Wortmarke steht dort ueber der Ueberschrift. */
.mm-seiten-marke { margin: 0 0 1.25rem; }
.mm-seiten-marke a { display: inline-block; }
.mm-seiten-marke img { display: block; height: 26px; width: auto; }