/*
 * SG KMH Mitglieder – Registrierung, Mein Konto, Geburtstage
 *
 * Farben und Schriften nach der CI der SG KMH. Alle SG-KMH-Plugins verwenden
 * dieselben Variablennamen (--sgkmh-*) und bringen die CI-Werte als Standard
 * selbst mit. Zentral ändern lässt sich das im Theme.
 */
.sgkmh-mg {
    --_text: var(--sgkmh-anthrazit, #1E2229);
    --_accent: var(--sgkmh-blau, #3A9BE3);
    --_dark: var(--sgkmh-blau-dark, #1F6FB8);
    --_ice: var(--sgkmh-eisblau, #F2F8FC);
    --_line: var(--sgkmh-steel, #A5ADB8);
    --_white: var(--sgkmh-weiss, #FFFFFF);
    --_font-head: var(--sgkmh-font-head, inherit);
    --_font-text: var(--sgkmh-font-text, inherit);
    --_error: #B32D2E;
    --_ok: #1E7B34;

    display: grid;
    gap: 1rem;
    max-width: 40rem;
    color: var(--_text);
    font-family: var(--_font-text);
    line-height: 1.5;
}
.sgkmh-mg h2,
.sgkmh-mg h3 { margin: 0 0 .75rem; font-family: var(--_font-head); color: var(--_text); letter-spacing: normal; text-transform: none; line-height: 1.25; }
.sgkmh-mg h2 { font-size: 1.5em; padding-left: .6rem; border-left: 4px solid var(--_accent); }
.sgkmh-mg h3 { font-size: 1.15em; }
.sgkmh-mg p { margin: 0 0 .75rem; }

.sgkmh-mg .mg-box { padding: 1.25rem; border: 1px solid var(--_line); border-top: 3px solid var(--_accent); border-radius: .5rem; background: var(--_white); }
.sgkmh-mg .mg-box > :last-child { margin-bottom: 0; }

.sgkmh-mg .mg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 1rem; }
.sgkmh-mg .mg-field { display: grid; gap: .25rem; }
.sgkmh-mg .mg-field label { font-weight: 600; font-size: .95em; }
.sgkmh-mg .mg-opt { font-weight: 400; opacity: .75; }
.sgkmh-mg .mg-field small { font-size: .85em; opacity: .8; }
.sgkmh-mg .mg-field input { box-sizing: border-box; width: 100%; min-height: 2.75rem; padding: .45rem .6rem; border: 1px solid var(--_line); border-radius: .35rem; background: var(--_white); color: var(--_text); font: inherit; }
.sgkmh-mg .mg-field input:focus { outline: 2px solid var(--_accent); outline-offset: 1px; border-color: var(--_dark); }
.sgkmh-mg .mg-check label { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.sgkmh-mg .mg-check input { flex: none; width: 1.15rem; height: 1.15rem; margin: .2rem 0 0; accent-color: var(--_dark); }
.sgkmh-mg .mg-check a { color: var(--_dark); }
.sgkmh-mg .mg-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sgkmh-mg .mg-btn { display: inline-block; padding: .7rem 1.2rem; border: 0; border-radius: .4rem; background: var(--_dark); color: #fff; font: inherit; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; }
.sgkmh-mg .mg-btn:hover,
.sgkmh-mg .mg-btn:focus { background: var(--_text); color: #fff; }
.sgkmh-mg .mg-btn.is-light { background: var(--_ice); color: var(--_text); border: 1px solid var(--_line); }
.sgkmh-mg .mg-btn.is-light:hover,
.sgkmh-mg .mg-btn.is-light:focus { background: var(--_white); border-color: var(--_text); }
.sgkmh-mg .mg-actions { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
.sgkmh-mg .mg-actions a { color: var(--_dark); }

.sgkmh-mg .mg-note { padding: .6rem .9rem; border-radius: .4rem; border-left: 4px solid var(--_accent); background: var(--_ice); }
.sgkmh-mg .mg-note.is-ok { border-left-color: var(--_ok); background: #EAF5EC; }
.sgkmh-mg .mg-note.is-error { border-left-color: var(--_error); background: #FBEAEA; }
.sgkmh-mg .mg-muted { font-size: .9em; opacity: .8; }

.sgkmh-mg .mg-dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0 0 .75rem; }
.sgkmh-mg .mg-dl dt { font-weight: 600; }
.sgkmh-mg .mg-dl dd { margin: 0; overflow-wrap: anywhere; }

.sgkmh-mg .mg-bdays { list-style: none; margin: 0; padding: 0; }
.sgkmh-mg .mg-bdays li { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; padding: .5rem 0; border-top: 1px solid var(--_ice); }
.sgkmh-mg .mg-bdays li:first-child { border-top: 0; }
.sgkmh-mg .mg-bdays .mg-month { padding-top: 1rem; border-top: 0; font-family: var(--_font-head); font-weight: 600; color: var(--_dark); }
.sgkmh-mg .mg-bdays .mg-month:first-child { padding-top: 0; }
.sgkmh-mg .mg-date { min-width: 6.5rem; font-variant-numeric: tabular-nums; }
.sgkmh-mg .mg-name { font-weight: 600; }
.sgkmh-mg .mg-name small { font-weight: 400; opacity: .8; }
.sgkmh-mg .is-today { margin: 0 -.5rem; padding: .5rem; border-radius: .4rem; background: var(--_ice); }
.sgkmh-mg .mg-tag { padding: .05rem .55rem; border-radius: 999px; background: var(--_dark); color: #fff; font-size: .8em; }

@media (max-width: 30rem) {
    .sgkmh-mg .mg-box { padding: 1rem; }
    .sgkmh-mg .mg-dl { grid-template-columns: 1fr; gap: 0; }
    .sgkmh-mg .mg-dl dd { margin-bottom: .5rem; }
}