/* My-GameZone.de - Mods */

/* ---------- Kopf / oben ---------- */
.mgz-mod-banner { margin: 0 0 12px; padding: 11px 16px; border-radius: 14px; background: linear-gradient(90deg, #D80C0C, #E2457A); color: #fff; font: bold 14px Verdana, sans-serif; text-align: center; box-shadow: 0 4px 12px rgba(216, 12, 12, .2); }
.mgz-mod-ticker { margin: 0 0 12px; overflow: hidden; white-space: nowrap; border-radius: 12px; background: #FEF9BE; border: 2px solid #F2D23C; font: bold 13px Verdana, sans-serif; color: #8F2017; }
.mgz-mod-ticker span { display: inline-block; padding: 7px 0 7px 100%; animation: mgz-ticker 28s linear infinite; }
@keyframes mgz-ticker { to { transform: translateX(-100%); } }
.mgz-mod-gruss { margin: 0 0 12px; padding: 9px 16px; border-radius: 14px; background: linear-gradient(90deg, #FFF3B8, #FDE1E6); color: #8F2017; font: 14px Verdana, sans-serif; }
.mgz-mod-gruss b { color: #D80C0C; }
.mgz-mod-toast { margin: 0 0 12px; padding: 10px 16px; border-radius: 14px; background: #4A1A12; color: #fff; font: 13px Verdana, sans-serif; text-align: center; }
.mgz-mod-toast.fest { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 10001; margin: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); transition: opacity .5s, transform .5s; max-width: 90vw; }
.mgz-mod-toast.fest.weg { opacity: 0; transform: translate(-50%, 20px); }
.mgz-mod-toast a { color: #FCEE4B; }

/* ---------- Seitenleiste ---------- */
.mgz-mod-uhr { text-align: center; padding: 12px 8px; background: linear-gradient(135deg, #D80C0C, #E2457A) !important; border-color: #B00808 !important; color: #fff; }
.mgz-mod-uhr-zeit { font: bold 30px Verdana, sans-serif; letter-spacing: 1px; }
.mgz-mod-uhr-datum { font-size: 11px; opacity: .9; }
.mgz-mod-stimmung { padding: 10px 12px; }
.mgz-mod-emojis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 8px; }
.mgz-mod-emojis button { font-size: 20px; padding: 3px 0; border: 1px solid #F6E59A; border-radius: 10px; background: #fff; cursor: pointer; }
.mgz-mod-emojis button:hover { background: #FEF3B0; transform: scale(1.1); }
.mgz-mod-stimmung input { width: 100%; box-sizing: border-box; padding: 6px 10px; border: 2px solid #F2D23C; border-radius: 10px; font: 12px Verdana, sans-serif; margin-bottom: 6px; }
.mgz-mod-stimmung .ok { width: 100%; padding: 6px; border: 0; border-radius: 10px; background: linear-gradient(#F06054, #D80C0C); color: #fff; font: bold 12px Verdana, sans-serif; cursor: pointer; }
.mgz-mod-stimmung-jetzt { padding: 0 12px 10px; font-size: 12px; color: #8F2017; }
.mgz-mod-stat { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; }
.mgz-mod-stat div { background: #fff; border: 1px solid #F6E59A; border-radius: 10px; text-align: center; padding: 6px 2px; font-size: 10px; color: #8F2017; }
.mgz-mod-stat b { display: block; font-size: 17px; color: #D80C0C; }
.mgz-mod-heute { padding: 8px 14px; border-bottom: 1px dashed #F6E59A; }
.mgz-mod-heute:last-child { border-bottom: 0; }
.mgz-mod-heute small { font: bold 10px Verdana, sans-serif; text-transform: uppercase; letter-spacing: .6px; color: #C08A3E; }
.mgz-mod-heute p { margin: 3px 0 0; font: italic 12px/1.45 Verdana, sans-serif; color: #4A1A12; }
.mgz-mod-merk .mgz-sb-liste a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgz-mod-merk .mgz-sb-liste a b { color: #C9B7A8; font-weight: normal; padding: 0 2px; }
.mgz-mod-merk .mgz-sb-liste a b:hover { color: #D80C0C; }
.mgz-mod-merk-knopf { display: block; width: calc(100% - 20px); margin: 4px 10px 10px; padding: 6px; border: 2px dashed #F2D23C; border-radius: 10px; background: transparent; color: #8F2017; font: bold 11px Verdana, sans-serif; cursor: pointer; }

/* ---------- Startseite ---------- */
.mgz-mod-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 0 0 14px; text-align: center; }
.mgz-mod-karte { background: #FFFDF0; border: 2px solid #F2D23C; border-radius: 18px; padding: 12px; font-family: Verdana, sans-serif; color: #4A1A12; }
.mgz-mod-karte .gross { font-size: 36px; line-height: 1.2; }
.mgz-mod-karte h4 { margin: 4px 0; color: #D80C0C; font-size: 14px; }
.mgz-mod-karte p { margin: 4px 0; font-size: 12px; line-height: 1.45; }
.mgz-mod-karte a { font: bold 11px Verdana, sans-serif; color: #D80C0C; }
.mgz-mod-karte.feiertag { background: linear-gradient(135deg, #FFF3B8, #FDE1E6); }
.mgz-mod-karte.keks [data-keks] { cursor: pointer; transition: transform .3s; display: inline-block; }
.mgz-mod-karte.keks [data-keks]:hover { transform: rotate(-12deg) scale(1.15); }
.mgz-mod-cd { display: flex; justify-content: center; gap: 5px; flex-wrap: wrap; font-size: 12px; color: #8F2017; }
.mgz-mod-cd span { background: #fff; border: 1px solid #F2D23C; border-radius: 8px; padding: 3px 5px; min-width: 34px; font-size: 9px; }
.mgz-mod-cd b { display: block; font-size: 16px; color: #D80C0C; }
.mgz-mod-box { background: #FFFDF0; border: 2px solid #F2D23C; border-radius: 18px; padding: 12px 16px; margin: 0 0 14px; text-align: left; font-family: Verdana, sans-serif; color: #4A1A12; }
.mgz-mod-box h3 { margin: 0 0 10px; padding-bottom: 7px; border-bottom: 2px dotted #F2D23C; color: #D80C0C; font-size: 15px; }
.mgz-mod-box .leer { color: #8F6A5A; font-style: italic; font-size: 12px; }
.mgz-mod-zeile { padding: 7px 0; border-bottom: 1px dashed #F6E59A; font-size: 12px; }
.mgz-mod-zeile:last-child { border-bottom: 0; }
.mgz-mod-zeile a { color: #D80C0C; text-decoration: none; }
.mgz-mod-zeile small { color: #A08070; margin-left: 6px; font-size: 10px; }
.mgz-mod-zeile p { margin: 2px 0 0; line-height: 1.45; word-wrap: break-word; }
.mgz-mod-pw-form { display: flex; gap: 6px; margin-bottom: 8px; }
.mgz-mod-pw-form input { flex: 1; min-width: 0; padding: 7px 12px; border: 2px solid #F2D23C; border-radius: 14px; font: 12px Verdana, sans-serif; }
.mgz-mod-pw-form button, .mgz-mod-antwort { padding: 7px 14px; border: 0; border-radius: 14px; background: linear-gradient(#F06054, #D80C0C); color: #fff; font: bold 12px Verdana, sans-serif; cursor: pointer; }
.mgz-mod-umfrage .frage { font: bold 14px Verdana, sans-serif; margin: 0 0 10px; }
.mgz-mod-antwort { display: block; width: 100%; margin-bottom: 6px; text-align: left; background: #fff; color: #8F2017; border: 2px solid #F2D23C; }
.mgz-mod-antwort:hover { background: #FEF3B0; }
.mgz-mod-balken { position: relative; margin-bottom: 6px; padding: 7px 12px; border: 1px solid #F2D23C; border-radius: 12px; background: #fff; overflow: hidden; font-size: 12px; display: flex; justify-content: space-between; }
.mgz-mod-balken span, .mgz-mod-balken b { position: relative; z-index: 1; }
.mgz-mod-balken i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #FCEE8B, #F6C0CF); }
.mgz-mod-balken.meine { border-color: #D80C0C; font-weight: bold; }
.mgz-mod-umfrage small { color: #A08070; font-size: 11px; }
.mgz-mod-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.mgz-mod-fotos a { position: relative; display: block; border-radius: 12px; overflow: hidden; text-decoration: none; }
.mgz-mod-fotos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; transition: transform .3s; }
.mgz-mod-fotos a:hover img { transform: scale(1.06); }
.mgz-mod-fotos span { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; background: linear-gradient(transparent, rgba(74, 10, 5, .75)); color: #fff; font: bold 10px Verdana, sans-serif; }

/* ---------- Profil ---------- */
.mgz-pr-inline { display: inline; margin: 0; }
.mgz-pr-btn.an { background: #FFE9EF; border-color: #F59AB5; }
.mgz-pr-btn.grau { color: #8F6A5A !important; }
button.mgz-pr-btn { cursor: pointer; }
.mgz-pr-chip.stimmung { background: #FFF6D0; }
.mgz-pr-chip.herzen { background: #FFE9EF; border-color: #F59AB5; color: #B0124E; }
.mgz-pr-chip.serie { background: #FFE8D6; border-color: #F5A65B; color: #A04A00; }
.mgz-pr-motto { margin: -2px 0 10px; font: italic 14px Georgia, serif; color: #8F2017; }
.mgz-mod-geschenke { display: flex; flex-wrap: wrap; gap: 6px; font-size: 30px; }
.mgz-mod-geschenke span { cursor: help; background: #fff; border: 1px solid #F6E59A; border-radius: 12px; padding: 2px 6px; }
.mgz-mod-tb { margin-bottom: 10px; }
.mgz-mod-tb b { color: #D80C0C; font-size: 13px; }
.mgz-mod-tb small { margin-left: 8px; color: #A08070; font-size: 10px; }
.mgz-mod-tb p { margin: 4px 0 0; font-size: 12px; line-height: 1.55; word-wrap: break-word; }

/* Profil-Designs */
.mgz-pr[class*="mgz-th-"] .mgz-pr-kopf { background: var(--tkopf); border-color: var(--tbr); }
.mgz-pr[class*="mgz-th-"] .mgz-pr-kopf:before { background: var(--tleiste); }
.mgz-pr[class*="mgz-th-"] .mgz-pr-karte, .mgz-pr[class*="mgz-th-"] .mgz-pr-zahlen div { background: var(--tbg); border-color: var(--tbr); color: var(--ttext); }
.mgz-pr[class*="mgz-th-"] .mgz-pr-karte h2, .mgz-pr[class*="mgz-th-"] .mgz-pr-daten h1, .mgz-pr[class*="mgz-th-"] .mgz-pr-zahlen b { color: var(--t1); }
.mgz-pr[class*="mgz-th-"] .mgz-pr-karte h2 { border-bottom-color: var(--tbr); }
.mgz-pr[class*="mgz-th-"] .mgz-pr-kurz, .mgz-pr[class*="mgz-th-"] .mgz-pr-steck dt, .mgz-pr[class*="mgz-th-"] .mgz-pr-zahlen span { color: var(--t2); }
.mgz-pr[class*="mgz-th-"] .mgz-pr-btn.haupt { background: var(--t1); border-color: var(--t1); box-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.mgz-pr[class*="mgz-th-"] .mgz-pr-daten, .mgz-pr[class*="mgz-th-"] .mgz-pr-status { color: var(--ttext); }
.mgz-th-ozean    { --t1: #0B6FA4; --t2: #13839B; --tbg: #F0FAFD; --tbr: #7FD0E6; --ttext: #0F3446; --tkopf: linear-gradient(135deg, #E6F8FF, #B8E8F5 60%, #C9F3EC); --tleiste: linear-gradient(90deg, #0B6FA4, #1FB5C9, #7FE0D0); }
.mgz-th-nacht    { --t1: #F2C94C; --t2: #CDB8FF; --tbg: #2A2142; --tbr: #6A55A8; --ttext: #EDE7FF; --tkopf: linear-gradient(135deg, #1B1530, #3A2A66 60%, #4D2E5C); --tleiste: linear-gradient(90deg, #F2C94C, #B78CFF, #F2C94C); }
.mgz-th-wald     { --t1: #2E7D32; --t2: #5D7F2A; --tbg: #F4FAEF; --tbr: #A5D28A; --ttext: #233A1E; --tkopf: linear-gradient(135deg, #EEF8E6, #D4EDC2 60%, #F3EFD6); --tleiste: linear-gradient(90deg, #2E7D32, #8BC34A, #CDDC39); }
.mgz-th-lavendel { --t1: #7B4BB7; --t2: #9C6FCF; --tbg: #F8F3FD; --tbr: #CDB4EC; --ttext: #3B2756; --tkopf: linear-gradient(135deg, #F6F0FD, #E6D6F8 60%, #F8E1F0); --tleiste: linear-gradient(90deg, #7B4BB7, #B98AE6, #F2A8D6); }
.mgz-th-sunset   { --t1: #E0531F; --t2: #C2410C; --tbg: #FFF6EE; --tbr: #F7B58A; --ttext: #4A2312; --tkopf: linear-gradient(135deg, #FFE6C9, #FFC2A1 50%, #F9A8C9); --tleiste: linear-gradient(90deg, #F97316, #EF4444, #EC4899); }
.mgz-th-gold     { --t1: #A67C00; --t2: #8A6A10; --tbg: #FFFBEA; --tbr: #E3C35A; --ttext: #3D2F05; --tkopf: linear-gradient(135deg, #FFF8D6, #F5DF8F 55%, #E9C46A); --tleiste: linear-gradient(90deg, #B8860B, #FFD700, #B8860B); }
.mgz-th-bonbon   { --t1: #E0389A; --t2: #2BA8C8; --tbg: #FFF7FC; --tbr: #F8B8E0; --ttext: #4A1E3A; --tkopf: linear-gradient(135deg, #FFE3F3, #D9F4FF 50%, #FFF5C2); --tleiste: linear-gradient(90deg, #FF7AC6, #7AD7FF, #FFE36E, #9BF2A2); }
.mgz-th-eis      { --t1: #3A7CA5; --t2: #5B8FB0; --tbg: #F7FBFF; --tbr: #BFDDF2; --ttext: #1F3A4D; --tkopf: linear-gradient(135deg, #FFFFFF, #E3F2FD 55%, #D6ECFA); --tleiste: linear-gradient(90deg, #9ED0F0, #FFFFFF, #9ED0F0); }

/* ---------- Extras-Seite ---------- */
.mgz-ex { text-align: left; font-family: Verdana, Arial, sans-serif; color: #4A1A12; }
.mgz-ex-kopf { margin-bottom: 14px; padding: 16px 18px; border-radius: 20px; background: linear-gradient(135deg, #FFFDF0, #FFF3B8 60%, #FDE1E6); border: 2px solid #F2D23C; }
.mgz-ex-kopf h1 { margin: 0; color: #D80C0C; font-size: 24px; }
.mgz-ex-kopf p { margin: 4px 0 0; color: #8F2017; font-size: 13px; }
.mgz-ex-kopf .zurueck { float: right; font: bold 12px Verdana, sans-serif; color: #8F2017; text-decoration: none; background: #fff; border: 1px solid #F2D23C; padding: 5px 12px; border-radius: 16px; }
.mgz-ex-karte { background: #FFFDF0; border: 2px solid #F2D23C; border-radius: 18px; padding: 14px 18px; margin-bottom: 14px; }
.mgz-ex-karte h2 { margin: 0 0 10px; color: #D80C0C; font-size: 16px; }
.mgz-ex-karte h3 { margin: 0 0 6px; color: #D80C0C; font-size: 15px; }
.mgz-ex-karte.meins { border-color: #E2457A; box-shadow: 0 0 0 3px rgba(226, 69, 122, .15); }
.mgz-ex-karte p { font-size: 13px; line-height: 1.55; }
.mgz-ex-info { color: #8F6A5A; font-size: 12px !important; }
.mgz-ex-gross { font: 18px/1.5 Georgia, serif; color: #8F2017; text-align: center; margin: 10px 0 16px; }
.mgz-ex-knopf { padding: 10px 20px; border: 0; border-radius: 22px; background: linear-gradient(#F06054, #D80C0C); color: #fff; font: bold 13px Verdana, sans-serif; cursor: pointer; box-shadow: 0 3px 0 #8F2017; }
.mgz-ex-knopf:hover { filter: brightness(1.07); }
.mgz-ex-meldung { margin: 20px auto; max-width: 560px; padding: 22px; border-radius: 20px; text-align: center; font: 16px Verdana, sans-serif; }
.mgz-ex-meldung.gut { background: #F1FBDA; border: 2px solid #A8D84A; color: #2F5A08; }
.mgz-ex-meldung.schlecht { background: #FFF0EE; border: 2px solid #F06054; color: #8F2017; }
.mgz-ex-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.mgz-ex-kachel { display: block; padding: 16px 14px; background: #fff; border: 2px solid #F2D23C; border-radius: 18px; text-decoration: none !important; color: #4A1A12 !important; transition: transform .15s, box-shadow .15s; }
.mgz-ex-kachel:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(216, 12, 12, .12); }
.mgz-ex-kachel i { display: block; font-style: normal; font-size: 32px; }
.mgz-ex-kachel b { display: block; margin: 6px 0 3px; color: #D80C0C; font-size: 14px; }
.mgz-ex-kachel small { font: 11px/1.4 Verdana, sans-serif; color: #8F6A5A; line-height: 1.4; }
.mgz-ex-kachel.hervor { background: linear-gradient(135deg, #D80C0C, #E2457A); border-color: #B00808; }
.mgz-ex-kachel.hervor b, .mgz-ex-kachel.hervor small { color: #fff; }
.mgz-ex-aktiv { display: flex; flex-wrap: wrap; gap: 6px; }
.mgz-ex-aktiv span { background: #fff; border: 1px solid #F2D23C; border-radius: 16px; padding: 4px 10px; font-size: 12px; color: #8F2017; cursor: help; }
.mgz-ex-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 14px; }
.mgz-ex-felder label, .mgz-ex-zeile { display: block; }
.mgz-ex-felder label.breit { grid-column: 1 / -1; }
.mgz-ex-felder span, .mgz-ex-zeile span { display: block; font: bold 12px Verdana, sans-serif; color: #8F2017; margin-bottom: 4px; }
.mgz-ex input:not([type=radio]):not([type=hidden]), .mgz-ex select, .mgz-ex textarea { width: 100%; box-sizing: border-box; padding: 8px 12px; border: 2px solid #F2D23C; border-radius: 12px; background: #fff; font: 13px Verdana, sans-serif; color: #4A1A12; }
.mgz-ex input:focus, .mgz-ex select:focus, .mgz-ex textarea:focus { outline: none; border-color: #E2457A; }
.mgz-ex-zeile { margin: 10px 0; }
.mgz-ex-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.mgz-ex-design input { position: absolute; opacity: 0; }
.mgz-ex-design span { display: block; padding: 8px; border: 3px solid transparent; border-radius: 16px; background: #fff; text-align: center; font: bold 12px Verdana, sans-serif; color: #4A1A12; cursor: pointer; }
.mgz-ex-design span i { display: block; height: 54px; border-radius: 10px; margin-bottom: 6px; background: var(--tkopf, linear-gradient(135deg, #FFFDF0, #FFF3B8 60%, #FDE1E6)); border: 2px solid var(--tbr, #F2D23C); }
.mgz-ex-design span small { display: block; color: #A67C00; font-size: 10px; }
.mgz-ex-design input:checked + span { border-color: #D80C0C; box-shadow: 0 4px 12px rgba(216, 12, 12, .2); }
.mgz-ex-design.aus span { opacity: .5; cursor: not-allowed; }
.mgz-ex-geschenke { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.mgz-ex-geschenke input, .mgz-ex-gruende input { accent-color: #D80C0C; }
.mgz-ex-geschenke label input { position: absolute; opacity: 0; }
.mgz-ex-geschenke span { display: block; text-align: center; padding: 8px; background: #fff; border: 2px solid #F6E59A; border-radius: 14px; font-size: 12px; cursor: pointer; }
.mgz-ex-geschenke span b { display: block; font-size: 34px; }
.mgz-ex-geschenke input:checked + span { border-color: #D80C0C; background: #FFF0EE; }
.mgz-ex-gruende label { display: block; margin: 5px 0; font-size: 13px; }
.mgz-ex-personen { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.mgz-ex-personen a { text-align: center; background: #fff; border: 2px solid #F2D23C; border-radius: 16px; padding: 10px; text-decoration: none; color: #4A1A12; }
.mgz-ex-personen img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid #FDE1E6; }
.mgz-ex-personen b { display: block; color: #D80C0C; font-size: 12px; }
.mgz-ex-personen small { font-size: 10px; color: #A08070; }
.mgz-ex-top { list-style: none; margin: 0; padding: 0; }
.mgz-ex-top li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px dashed #F6E59A; font-size: 14px; }
.mgz-ex-top .platz { width: 34px; text-align: center; font-size: 20px; }
.mgz-ex-top img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.mgz-ex-top a { flex: 1; color: #8F2017; font-weight: bold; text-decoration: none; }
.mgz-ex-top b { color: #D80C0C; }
.mgz-ex-regeln li { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.mgz-ex-horoskop, .mgz-ex-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mgz-ex-horoskop .mgz-ex-karte, .mgz-ex-raster .mgz-ex-karte { margin: 0; }
.mgz-ex-horoskop h3 small { background: #E2457A; color: #fff; font-size: 10px; padding: 1px 7px; border-radius: 8px; vertical-align: 2px; }
.mgz-ex-horoskop .grau { color: #A08070; font-size: 11px; }
.mgz-ex-horoskop p { margin: 6px 0; font-size: 12px !important; }
.mgz-ex-horoskop .klein { color: #8F6A5A; font-size: 11px !important; }

/* ---------- Tools ---------- */
.mgz-tool-zwei { display: flex; gap: 10px; align-items: center; }
.mgz-tool-zwei > * { flex: 1; }
.mgz-tool-zwei .herz { flex: 0 0 auto; font-size: 28px; }
.mgz-tool-zeile { display: flex; gap: 10px; }
.mgz-tool-zeile input { flex: 1; }
.mgz-tool-breit { margin: 6px 0 12px; }
.mgz-tool-ergebnis { text-align: center; margin-top: 14px; font-size: 14px; }
.mgz-tool-ergebnis h3 { font-size: 20px !important; }
.mgz-tool-gross { font-size: 64px; line-height: 1.1; }
.mgz-tool-prozent span { display: inline-block; font: bold 56px Verdana, sans-serif; color: #D80C0C; animation: mgz-puls 1s ease-in-out infinite; }
@keyframes mgz-puls { 50% { transform: scale(1.08); } }
.mgz-tool-zahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 10px; }
.mgz-tool-zahlen div { background: #fff; border: 2px solid #F2D23C; border-radius: 14px; padding: 10px; font-size: 11px; color: #8F2017; }
.mgz-tool-zahlen b { display: block; font-size: 20px; color: #D80C0C; }
.mgz-tool-liste { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mgz-tool-liste button, .mgz-tool-symbole button { padding: 8px 14px; border: 2px solid #F2D23C; border-radius: 14px; background: #fff; font: 14px Verdana, sans-serif; color: #4A1A12; cursor: pointer; }
.mgz-tool-liste button:hover, .mgz-tool-symbole button:hover { background: #FEF3B0; border-color: #E2457A; }
.mgz-tool-symbole { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mgz-tool-symbole button { font-size: 20px; padding: 4px 10px; min-width: 44px; }
.mgz-tool-meter { height: 14px; border-radius: 8px; background: #F6EFD0; overflow: hidden; }
.mgz-tool-meter.gross { height: 18px; max-width: 380px; margin: 10px auto; }
.mgz-tool-meter i { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, #F2D23C, #F06054, #E2457A); transition: width .3s, background .3s; }
.mgz-tool-legende { display: flex; gap: 14px; justify-content: center; font: bold 12px Verdana, sans-serif; margin-top: 6px; }
.mgz-tool-legende .k { color: #D80C0C; } .mgz-tool-legende .g { color: #E2457A; } .mgz-tool-legende .v { color: #2F8F3A; }
.mgz-tool canvas { border: 2px solid #F2D23C; border-radius: 14px; margin: 10px auto 0; }
.mgz-tool-uhren { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.mgz-tool-uhren div { background: #fff; border: 2px solid #F2D23C; border-radius: 16px; padding: 12px; text-align: center; }
.mgz-tool-uhren b { display: block; color: #8F2017; font-size: 13px; }
.mgz-tool-uhren span { display: block; font: bold 24px Verdana, sans-serif; color: #D80C0C; }
.mgz-tool-uhren small { font-size: 11px; color: #A08070; }

/* ---------- Komfort ---------- */
.mgz-mod-hoch { position: fixed; right: 18px; bottom: 18px; z-index: 9990; width: 46px; height: 46px; border: 0; border-radius: 50%; background: linear-gradient(#F06054, #D80C0C); color: #fff; font-size: 20px; cursor: pointer; box-shadow: 0 4px 12px rgba(216, 12, 12, .35); opacity: 0; transform: translateY(20px); pointer-events: none; transition: .25s; }
.mgz-mod-hoch.da { opacity: 1; transform: none; pointer-events: auto; }
.mgz-mod-zoom { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; background: rgba(40, 10, 5, .85); cursor: zoom-out; }
.mgz-mod-zoom.da { display: flex; }
.mgz-mod-zoom img { max-width: 92vw; max-height: 90vh; border-radius: 14px; border: 4px solid #fff; }
#mgz-seite img[src*="fotos/"]:not(a img), #mgz-seite img[src*="fotoalbum/"]:not(a img) { cursor: zoom-in; }
.mgz-mod-leiste { position: fixed; right: 18px; bottom: 74px; z-index: 9990; display: flex; flex-direction: column; gap: 6px; }
.mgz-mod-leiste button { width: 40px; height: 40px; border: 2px solid #F2D23C; border-radius: 50%; background: #fff; color: #8F2017; font: bold 13px Verdana, sans-serif; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.mgz-mod-ladebalken { position: fixed; left: 0; top: 0; height: 3px; width: 0; z-index: 10002; background: linear-gradient(90deg, #FCEE4B, #F06054, #E2457A); opacity: 0; }
.mgz-mod-ladebalken.laeuft { opacity: 1; width: 80%; transition: width 4s cubic-bezier(.1, .8, .2, 1); }
.mgz-mod-ladebalken.fertig { opacity: 0; width: 100%; transition: width .2s, opacity .4s .2s; }
.mgz-mod-cookie { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 9995; display: flex; gap: 12px; align-items: center; width: min(720px, 92vw); padding: 12px 16px; background: #fff; border: 2px solid #F2D23C; border-radius: 18px; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); font: 12px Verdana, sans-serif; color: #4A1A12; }
.mgz-mod-cookie span { flex: 1; }
.mgz-mod-cookie a { color: #D80C0C; }
.mgz-mod-cookie button { padding: 8px 16px; border: 0; border-radius: 14px; background: linear-gradient(#F06054, #D80C0C); color: #fff; font: bold 12px Verdana, sans-serif; cursor: pointer; }
.mgz-mod-offline { position: fixed; left: 0; right: 0; top: 0; z-index: 10003; padding: 8px; text-align: center; background: #4A1A12; color: #fff; font: bold 13px Verdana, sans-serif; transform: translateY(-100%); transition: transform .3s; }
.mgz-mod-offline.da { transform: none; }
.mgz-mod-hinweis { font: 11px Verdana, sans-serif; color: #2F5A08; background: #F1FBDA; border-radius: 8px; padding: 3px 8px; margin: 2px 0; display: inline-block; }
.mgz-mod-zaehler { font: 10px Verdana, sans-serif; color: #A08070; text-align: right; margin-top: 2px; }
.mgz-mod-pwbox { position: relative; display: inline-block; max-width: 100%; }
.mgz-mod-pwbox input { padding-right: 30px !important; }
.mgz-mod-auge { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; font-size: 14px; padding: 2px; }

/* Dunkelmodus */
html.mgz-dunkel { filter: invert(.92) hue-rotate(180deg); background: #111; }
html.mgz-dunkel img, html.mgz-dunkel video, html.mgz-dunkel iframe, html.mgz-dunkel canvas, html.mgz-dunkel .mgz-fx-leinwand, html.mgz-dunkel [style*="background-image"] { filter: invert(1) hue-rotate(180deg); }

/* ---------- Deko & Effekte ---------- */
.mgz-fx-leinwand { position: fixed; inset: 0; pointer-events: none; z-index: 9980; }
.mgz-mod-fx { position: fixed; left: 12px; bottom: 12px; z-index: 9990; padding: 5px 10px; border: 1px solid #F2D23C; border-radius: 14px; background: rgba(255, 255, 255, .9); color: #8F2017; font: bold 11px Verdana, sans-serif; cursor: pointer; }
.mgz-fx-regenbogen { position: fixed; left: 0; right: 0; top: 0; height: 5px; z-index: 9985; background: linear-gradient(90deg, #ff3b3b, #ff9a3b, #ffe53b, #4bd36b, #3bb3ff, #8a5bff, #ff3b9a, #ff3b3b); background-size: 200% 100%; animation: mgz-regen 6s linear infinite; }
@keyframes mgz-regen { to { background-position: 200% 0; } }
.mgz-fx-lichter { display: flex; justify-content: space-between; height: 18px; padding: 0 6px; background: linear-gradient(#2a6e2a, #2a6e2a) center 3px / 100% 2px no-repeat; overflow: hidden; }
.mgz-fx-lichter i { width: 9px; height: 13px; margin-top: 3px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; animation: mgz-blink 1.4s infinite alternate; }
.mgz-fx-lichter i:nth-child(4n+1) { background: #ff3b3b; } .mgz-fx-lichter i:nth-child(4n+2) { background: #ffe53b; animation-delay: .35s; }
.mgz-fx-lichter i:nth-child(4n+3) { background: #3bb3ff; animation-delay: .7s; } .mgz-fx-lichter i:nth-child(4n) { background: #4bd36b; animation-delay: 1.05s; }
@keyframes mgz-blink { from { opacity: .35; box-shadow: none; } to { opacity: 1; box-shadow: 0 0 8px 2px currentColor; } }
#mgz-kopf { position: relative; }
.mgz-fx-stern { position: absolute; z-index: 2; pointer-events: none; color: #fff; text-shadow: 0 0 6px #FCEE4B, 0 0 12px #fff; font-style: normal; animation: mgz-funkel 2.6s ease-in-out infinite; opacity: 0; }
@keyframes mgz-funkel { 50% { opacity: 1; transform: scale(1.3) rotate(20deg); } }
.mgz-fx-ostern { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 9970; pointer-events: none; display: flex; gap: 22px; font-size: 32px; }
.mgz-fx-ostern span { animation: mgz-huepf 1.8s ease-in-out infinite; display: inline-block; }
.mgz-fx-ostern span:nth-child(2n) { animation-delay: .5s; }
.mgz-fx-ostern span:nth-child(1) { filter: hue-rotate(90deg); } .mgz-fx-ostern span:nth-child(5) { filter: hue-rotate(220deg); }
@keyframes mgz-huepf { 50% { transform: translateY(-10px) rotate(-6deg); } }
.mgz-fx-fledermaus { position: fixed; left: -60px; z-index: 9975; font-size: 30px; pointer-events: none; animation: mgz-flug linear forwards; }
@keyframes mgz-flug { 0% { transform: translate(0, 0); } 25% { transform: translate(28vw, -40px); } 50% { transform: translate(55vw, 30px); } 75% { transform: translate(80vw, -30px); } 100% { transform: translate(110vw, 10px); } }
@media (prefers-reduced-motion: reduce) { .mgz-mod-ticker span, .mgz-fx-regenbogen, .mgz-fx-lichter i, .mgz-fx-stern, .mgz-fx-ostern span { animation: none; } }
@media (max-width: 700px) { .mgz-tool-zwei { flex-direction: column; } .mgz-mod-leiste { bottom: 70px; right: 10px; } .mgz-mod-hoch { right: 10px; } }

/* ---------- Seitenleiste kompakt (v4) ---------- */
.mgz-mod-uhr { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 7px 10px !important; }
.mgz-mod-uhr-zeit { font-size: 20px; }
.mgz-mod-uhr-datum { font-size: 10px; }
details.mgz-mod-stimmung > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; }
details.mgz-mod-stimmung > summary::-webkit-details-marker { display: none; }
.mgz-mod-stimmung .em { font-size: 22px; line-height: 1; }
.mgz-mod-stimmung .tx { flex: 1; min-width: 0; font: bold 12px Verdana, sans-serif; color: #8F2017; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgz-mod-stimmung .aendern { font: 10px Verdana, sans-serif; color: #C08A3E; }
details[open].mgz-mod-stimmung .aendern { visibility: hidden; }
.mgz-mod-stimmung form { padding: 0 10px 10px; }
.mgz-mod-emojis { grid-template-columns: repeat(8, 1fr); gap: 2px; margin-bottom: 6px; }
.mgz-mod-emojis button { font-size: 16px; padding: 2px 0; border-radius: 8px; }
.mgz-mod-stimmung .zeile { display: flex; gap: 4px; }
.mgz-mod-stimmung .zeile input { margin: 0; padding: 5px 8px; font-size: 11px; }
.mgz-mod-stimmung .zeile .ok { width: auto; padding: 0 10px; font-size: 13px; }
.mgz-mod-heute-box { position: relative; }
.mgz-mod-heute-box .mgz-mod-heute { display: none; border: 0; padding: 10px 12px 4px; min-height: 64px; }
.mgz-mod-heute-box .mgz-mod-heute.an, .mgz-mod-heute-box .mgz-mod-heute:only-child { display: block; }
.mgz-mod-heute-box > .mgz-mod-heute:first-child:not(.an):last-of-type { display: block; }
.mgz-mod-punkte { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 2px 6px 6px; }
.mgz-mod-punkte i { width: 6px; height: 6px; border-radius: 50%; background: #F2D23C; }
.mgz-mod-punkte i.an { background: #D80C0C; width: 14px; border-radius: 4px; }
.mgz-mod-punkte button { border: 0; background: transparent; color: #8F2017; font: bold 16px Verdana, sans-serif; cursor: pointer; padding: 0 6px; }
.mgz-mod-stat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 6px 4px; }
.mgz-mod-stat div { border: 0; background: transparent; padding: 2px; font-size: 9px; }
.mgz-mod-stat b { font-size: 14px; }
details.mgz-mod-merk > summary { padding: 8px 12px; cursor: pointer; font: bold 12px Verdana, sans-serif; color: #8F2017; }