/* Mañana – Retro-Farbschema: Beige wie alte Heimcomputer, Regenbogen-Streifen, transparente Flächen */
body.ep-retro {
  --rb-red: #D6453D; --rb-orange: #E8843A; --rb-yellow: #E9B940; --rb-green: #5E9E5A; --rb-blue: #3F73B5;
  --rb-stripes: linear-gradient(180deg, var(--rb-red) 0 20%, var(--rb-orange) 20% 40%, var(--rb-yellow) 40% 60%, var(--rb-green) 60% 80%, var(--rb-blue) 80% 100%);
  --rb-stripes-h: linear-gradient(90deg, var(--rb-red) 0 20%, var(--rb-orange) 20% 40%, var(--rb-yellow) 40% 60%, var(--rb-green) 60% 80%, var(--rb-blue) 80% 100%);
}
body.theme-light.ep-retro.ep-retro {
  --rb-red: #D6453D; --rb-orange: #E8843A; --rb-yellow: #E9B940; --rb-green: #5E9E5A; --rb-blue: #3F73B5;
  --rb-stripes: linear-gradient(180deg, var(--rb-red) 0 20%, var(--rb-orange) 20% 40%, var(--rb-yellow) 40% 60%, var(--rb-green) 60% 80%, var(--rb-blue) 80% 100%);
  --rb-stripes-h: linear-gradient(90deg, var(--rb-red) 0 20%, var(--rb-orange) 20% 40%, var(--rb-yellow) 40% 60%, var(--rb-green) 60% 80%, var(--rb-blue) 80% 100%);
  --background-primary: #F3EDDF; --background-primary-alt: #EDE5D2; --background-secondary: rgba(255, 252, 244, .72); --background-secondary-alt: rgba(255, 252, 244, .9);
  --background-modifier-border: rgba(92, 74, 48, .16); --background-modifier-border-hover: rgba(92, 74, 48, .3); --background-modifier-hover: rgba(92, 74, 48, .07); --background-modifier-active-hover: rgba(63, 115, 181, .14);
  --background-modifier-form-field: rgba(255, 255, 255, .78);
  --text-normal: #2E2618; --text-muted: #6B5E48; --text-faint: #9A8C73; --text-accent: #2F5F9E; --text-error: #B8332B;
  --interactive-accent: #3F73B5; --interactive-accent-hover: #335F98; --text-on-accent: #FFFFFF; --interactive-normal: rgba(255, 255, 255, .7); --interactive-hover: rgba(255, 255, 255, .95);
  --color-accent: #3F73B5;
  background: #E9E1CE;
  background-image: radial-gradient(circle at 100% 0, rgba(233, 185, 64, .18), transparent 40%), radial-gradient(circle at 0 100%, rgba(63, 115, 181, .12), transparent 45%);
  background-attachment: fixed; color: var(--text-normal);
}
body.ep-retro::before { content: ''; position: fixed; right: -60px; bottom: 60px; width: 420px; height: 110px; transform: rotate(-28deg); background: var(--rb-stripes); opacity: .10; pointer-events: none; z-index: 0; border-radius: 60px; }
body.ep-retro #app { position: relative; z-index: 1; }
body.ep-retro .ep-top { background: rgba(243, 237, 223, .78); backdrop-filter: blur(12px) saturate(1.2); border-bottom: none; box-shadow: 0 1px 0 rgba(92, 74, 48, .12); }
body.ep-retro .ep-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--rb-stripes-h); opacity: .85; }
body.ep-retro .ep-logo { width: 26px; height: 26px; border-radius: 7px; background: var(--rb-stripes); box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); transform: rotate(-8deg); transition: transform .3s; }
body.ep-retro .ep-brand:hover .ep-logo { transform: rotate(8deg) scale(1.08); }
body.ep-retro .ep-brand span { font-weight: 800; letter-spacing: -.01em; }
body.ep-retro .ep-navlink.is-active { background: rgba(63, 115, 181, .14); color: #1F4E8C; }
body.ep-retro .ep-navlink.is-active .ep-ic { color: var(--rb-red); }
body.ep-retro .ep-pagehead h1 { font-weight: 800; letter-spacing: -.02em; }
body.ep-retro .ep-pagehead h1::after { content: ''; display: block; width: 64px; height: 5px; margin-top: 6px; border-radius: 3px; background: var(--rb-stripes-h); }
/* transparente Karten */
body.ep-retro .ep-panel, body.ep-retro .ep-card, body.ep-retro .ep-matcard, body.ep-retro .ep-mtable, body.ep-retro .ep-table, body.ep-retro .ep-ctable, body.ep-retro .ep-mattable, body.ep-retro .ep-gen, body.ep-retro .mk-ag-card, body.ep-retro .mk-ag-matlist {
  background: rgba(255, 252, 244, .62); backdrop-filter: blur(6px); border-color: rgba(92, 74, 48, .14); box-shadow: 0 1px 2px rgba(92, 74, 48, .06), 0 8px 24px -12px rgba(92, 74, 48, .18);
}
body.ep-retro .ep-card:hover, body.ep-retro .ep-matcard:hover { box-shadow: 0 2px 4px rgba(92, 74, 48, .08), 0 14px 30px -12px rgba(92, 74, 48, .28); }
body.ep-retro .ep-mth, body.ep-retro .ep-th, body.ep-retro .mk-ag-bsth { background: rgba(233, 225, 206, .7); }
body.ep-retro .ep-btn.mod-cta, body.ep-retro button.mod-cta { background: var(--interactive-accent); color: #fff; border-color: transparent; box-shadow: 0 2px 0 #2A5288; }
body.ep-retro .ep-btn.mod-cta:hover, body.ep-retro button.mod-cta:hover { background: var(--interactive-accent-hover); transform: translateY(-1px); }
body.ep-retro .ep-btn, body.ep-retro button { transition: transform .12s, background .12s, box-shadow .12s; }
body.ep-retro input, body.ep-retro textarea, body.ep-retro select { background: var(--background-modifier-form-field); border-color: rgba(92, 74, 48, .2); color: var(--text-normal); }
body.ep-retro input:focus, body.ep-retro textarea:focus, body.ep-retro select:focus { border-color: var(--interactive-accent); box-shadow: 0 0 0 3px rgba(63, 115, 181, .18); outline: none; }
body.ep-retro .ep-kchip.is-on, body.ep-retro .ep-segbtn.is-active { background: var(--interactive-accent) !important; color: #fff !important; }
body.ep-retro .modal { background: rgba(250, 246, 236, .94); backdrop-filter: blur(14px); border: 1px solid rgba(92, 74, 48, .15); box-shadow: 0 24px 60px -20px rgba(46, 38, 24, .45); }
body.ep-retro .modal::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 12px 12px 0 0; background: var(--rb-stripes-h); }
body.ep-retro .modal-bg { background: rgba(46, 38, 24, .35); backdrop-filter: blur(2px); }
body.ep-retro .menu { background: rgba(250, 246, 236, .96); backdrop-filter: blur(10px); border-color: rgba(92, 74, 48, .18); }
body.ep-retro .ep-tip { background: #2E2618; color: #FBF6EA; }
body.ep-retro .ep-notice { background: rgba(46, 38, 24, .92); color: #FBF6EA; border-left: 4px solid var(--rb-yellow); }
body.ep-retro .ep-subtab.is-active { border-bottom-color: var(--rb-red); }
body.ep-retro .ep-login { background: transparent; }
body.ep-retro .ep-loginbox { background: rgba(255, 252, 244, .75); backdrop-filter: blur(10px); position: relative; overflow: hidden; }
body.ep-retro .ep-loginbox::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--rb-stripes-h); }
body.ep-retro ::selection { background: rgba(233, 185, 64, .45); }
body.ep-retro .ep-dragover { outline-color: var(--rb-orange); }
body.ep-retro, body.ep-retro button, body.ep-retro input, body.ep-retro textarea, body.ep-retro select { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
body.ep-retro { font-size: 14px; -webkit-font-smoothing: antialiased; }
/* in der Agenda Eingabefelder ruhig halten – Rahmen erst bei Hover/Fokus */
body.ep-retro .ep-host input:not([type=checkbox]), body.ep-retro .ep-host textarea, body.ep-retro .ep-host select { background: transparent; border-color: transparent; box-shadow: none; }
body.ep-retro .ep-host input:not([type=checkbox]):hover, body.ep-retro .ep-host textarea:hover, body.ep-retro .ep-host select:hover { background: rgba(255, 255, 255, .55); border-color: rgba(92, 74, 48, .16); }
body.ep-retro .ep-host input:not([type=checkbox]):focus, body.ep-retro .ep-host textarea:focus, body.ep-retro .ep-host select:focus { background: #fff; border-color: var(--interactive-accent); box-shadow: 0 0 0 3px rgba(63, 115, 181, .16); }
body.ep-retro .ep-host .mk-ag-slot { background: rgba(255, 252, 244, .55); }
body.ep-retro .ep-host .mk-ag-slot:hover { background: rgba(255, 252, 244, .85); }
body.ep-retro { --background-modifier-border-focus: #3F73B5; --background-modifier-error: #B8332B; --background-modifier-success: #5E9E5A; }
.mk-ag-resp .mk-choice-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: normal; }
body.ep-retro .mk-ag-saved, body.ep-retro .ep-state.is-saved { color: #3E7A3A; }

/* ================= Retro dunkel (Nachtmodus) ================= */
body.ep-retro.ep-dark.ep-dark {
  --background-primary: #1E1A15; --background-primary-alt: #24201A; --background-secondary: rgba(46, 40, 32, .72); --background-secondary-alt: rgba(46, 40, 32, .92);
  --background-modifier-border: rgba(240, 225, 195, .12); --background-modifier-border-hover: rgba(240, 225, 195, .24); --background-modifier-hover: rgba(240, 225, 195, .06); --background-modifier-active-hover: rgba(111, 155, 214, .2);
  --background-modifier-form-field: rgba(20, 17, 13, .6);
  --text-normal: #EFE6D2; --text-muted: #B9AC93; --text-faint: #857A66; --text-accent: #8FB4E8; --text-error: #F08A80;
  --interactive-accent: #5B8FD6; --interactive-accent-hover: #6F9DDD; --text-on-accent: #fff; --interactive-normal: rgba(60, 52, 42, .8); --interactive-hover: rgba(80, 70, 56, .9);
  background: #15120E; color: var(--text-normal);
  background-image: radial-gradient(circle at 100% 0, rgba(233, 185, 64, .10), transparent 40%), radial-gradient(circle at 0 100%, rgba(63, 115, 181, .14), transparent 45%);
}
body.ep-dark::before { opacity: .16; }
body.ep-dark .ep-top { background: rgba(30, 26, 21, .8); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
body.ep-dark .ep-navlink.is-active { background: rgba(91, 143, 214, .2); color: #CFE0F7; }
body.ep-dark .ep-panel, body.ep-dark .ep-card, body.ep-dark .ep-matcard, body.ep-dark .ep-mtable, body.ep-dark .ep-table, body.ep-dark .ep-ctable, body.ep-dark .ep-mattable, body.ep-dark .ep-gen, body.ep-dark .mk-ag-card, body.ep-dark .mk-ag-matlist, body.ep-dark .ep-loginbox {
  background: rgba(46, 40, 32, .62); border-color: rgba(240, 225, 195, .1); box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.6);
}
body.ep-dark .ep-mth, body.ep-dark .ep-th, body.ep-dark .mk-ag-bsth { background: rgba(30, 26, 21, .7); }
body.ep-dark .modal, body.ep-dark .menu { background: rgba(38, 33, 26, .96); border-color: rgba(240, 225, 195, .14); }
body.ep-dark .modal-bg { background: rgba(0, 0, 0, .55); }
body.ep-dark .ep-host .mk-ag-slot { background: rgba(46, 40, 32, .55); } body.ep-dark .ep-host .mk-ag-slot:hover { background: rgba(58, 50, 40, .85); }
body.ep-dark .ep-host input:not([type=checkbox]):focus, body.ep-dark .ep-host textarea:focus, body.ep-dark .ep-host select:focus { background: #14110D; }
body.ep-dark .ep-host input:not([type=checkbox]):hover, body.ep-dark .ep-host textarea:hover { background: rgba(20, 17, 13, .5); }
body.ep-dark .ep-btn.mod-cta, body.ep-dark button.mod-cta { box-shadow: 0 2px 0 #34598F; }
body.ep-dark .ep-tip { background: #EFE6D2; color: #1E1A15; }
body.ep-dark .ep-matthumb, body.ep-dark .ep-qr { background: #fff; }
body.ep-dark .ep-sbitem { background: rgba(30, 26, 21, .8); }
body.ep-dark .ep-pixel-k { background: rgba(30,26,21,.85); color: #EFE6D2; }

/* ================= Tag/Nacht-Schalter ================= */
.ep-daynight { position: relative; width: 60px; height: 30px; flex: none; cursor: pointer; display: inline-block; margin-right: 6px; }
.ep-daynight input { position: absolute; opacity: 0; width: 0; height: 0; }
.ep-dn-track { position: absolute; inset: 0; border-radius: 30px; overflow: hidden; background: linear-gradient(180deg, #8EC5F0, #CFE7F7); box-shadow: inset 0 2px 4px rgba(0,0,0,.18); transition: background .5s; }
.ep-dn-cloud { position: absolute; background: #fff; border-radius: 10px; height: 7px; opacity: .95; transition: transform .5s, opacity .4s; }
.ep-dn-cloud.c1 { width: 18px; left: 30px; top: 7px; } .ep-dn-cloud.c2 { width: 13px; left: 38px; top: 16px; opacity: .8; }
.ep-dn-star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: 0; transform: scale(.2); transition: opacity .4s .15s, transform .4s .15s; }
.ep-dn-star.s1 { left: 10px; top: 8px; } .ep-dn-star.s2 { left: 18px; top: 18px; width: 2px; height: 2px; } .ep-dn-star.s3 { left: 26px; top: 6px; width: 2px; height: 2px; } .ep-dn-star.s4 { left: 13px; top: 22px; width: 2px; height: 2px; }
.ep-dn-knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFE58A, #F2B533 70%); box-shadow: 0 0 0 3px rgba(255, 220, 110, .35), 0 2px 5px rgba(0,0,0,.25); transition: transform .55s cubic-bezier(.5, 1.6, .4, 1), background .4s, box-shadow .4s; }
.ep-dn-knob::before, .ep-dn-knob::after { content: ''; position: absolute; border-radius: 50%; background: rgba(150, 140, 120, .55); opacity: 0; transition: opacity .3s .2s; }
.ep-dn-knob::before { width: 6px; height: 6px; left: 6px; top: 5px; } .ep-dn-knob::after { width: 4px; height: 4px; left: 13px; top: 13px; }
.ep-daynight input:checked + .ep-dn-track { background: linear-gradient(180deg, #1B2550, #3A3F7A); }
.ep-daynight input:checked + .ep-dn-track .ep-dn-cloud { transform: translateY(18px); opacity: 0; }
.ep-daynight input:checked + .ep-dn-track .ep-dn-star { opacity: .95; transform: scale(1); animation: ep-twinkle 2.4s ease-in-out infinite; }
.ep-daynight input:checked + .ep-dn-track .ep-dn-star.s2 { animation-delay: .6s; } .ep-daynight input:checked + .ep-dn-track .ep-dn-star.s3 { animation-delay: 1.2s; }
.ep-daynight input:checked + .ep-dn-track .ep-dn-knob { transform: translateX(30px) rotate(-200deg); background: radial-gradient(circle at 35% 35%, #F4F1E6, #CFC8B4 75%); box-shadow: 0 0 10px 2px rgba(240, 235, 210, .35), 0 2px 5px rgba(0,0,0,.4); }
.ep-daynight input:checked + .ep-dn-track .ep-dn-knob::before, .ep-daynight input:checked + .ep-dn-track .ep-dn-knob::after { opacity: 1; }
.ep-daynight:hover .ep-dn-knob { filter: brightness(1.06); }
.ep-daynight input:focus-visible + .ep-dn-track { outline: 3px solid var(--interactive-accent); outline-offset: 2px; }
@keyframes ep-twinkle { 0%, 100% { opacity: .95; } 50% { opacity: .35; } }
body.ep-themefade, body.ep-themefade * { transition: background-color .45s ease, color .45s ease, border-color .45s ease !important; }

/* ================= Fixierte Tabellenköpfe ================= */
.ep-mtable, .ep-ctable, .ep-mattable, .ep-table { max-height: calc(100vh - 110px); overflow: auto !important; overscroll-behavior: contain; }
.ep-mtable > .ep-mth, .ep-ctable > .ep-mth, .ep-mattable > .ep-th, .ep-table > .ep-th { position: sticky; top: 0; z-index: 4; }
body.ep-retro .ep-mtable > .ep-mth, body.ep-retro .ep-ctable > .ep-mth, body.ep-retro .ep-mattable > .ep-th, body.ep-retro .ep-table > .ep-th { background: #EDE5D2; box-shadow: 0 1px 0 rgba(92, 74, 48, .14); }
body.ep-dark .ep-mtable > .ep-mth, body.ep-dark .ep-ctable > .ep-mth, body.ep-dark .ep-mattable > .ep-th, body.ep-dark .ep-table > .ep-th { background: #262019; box-shadow: 0 1px 0 rgba(0,0,0,.4); }
.mk-ag-colhead { position: sticky; top: 94px; z-index: 6; }
.ep-host .mk-ag-day { overflow: clip; }
.ep-host .mk-ag-scroll.ep-fits { overflow: visible; }
.ep-host .mk-ag-scroll:not(.ep-fits) { max-height: calc(100vh - 120px); overscroll-behavior: contain; }
.ep-host .mk-ag-scroll:not(.ep-fits) .mk-ag-colhead { top: 0; }
body.ep-retro .mk-ag-colhead { background: rgba(237, 229, 210, .95); backdrop-filter: blur(8px); }
body.ep-dark .mk-ag-colhead { background: rgba(38, 32, 25, .95); }
.mk-ag-todotable > .mk-ag-bsth, .mk-ag-loggrid > .mk-ag-bsth, .mk-ag-trackgrid > .mk-ag-bsth { position: sticky; top: 94px; z-index: 5; }
body.ep-retro .mk-ag-todotable > .mk-ag-bsth, body.ep-retro .mk-ag-loggrid > .mk-ag-bsth, body.ep-retro .mk-ag-trackgrid > .mk-ag-bsth { background: #EDE5D2; }
body.ep-dark .mk-ag-todotable > .mk-ag-bsth, body.ep-dark .mk-ag-loggrid > .mk-ag-bsth, body.ep-dark .mk-ag-trackgrid > .mk-ag-bsth { background: #262019; }

/* Zeilen-Werkzeuge horizontal über der Zeile, immer ganz oben */
.ep-host .mk-ag-slot { position: relative; }
.ep-host .mk-ag-slot:hover, .ep-host .mk-ag-slot:focus-within { z-index: 30; }
.ep-host .mk-ag-left > .mk-ag-actions { flex-direction: row !important; top: -15px !important; left: 26px !important; padding: 3px 5px !important; gap: 2px !important; border-radius: 9px !important; z-index: 60 !important; white-space: nowrap; box-shadow: 0 6px 18px -6px rgba(46,38,24,.35) !important; }
.ep-host .mk-ag-left > .mk-ag-actions .mk-ag-iconbtn { padding: 4px 5px !important; }
.ep-host .mk-ag-left > .mk-ag-actions .mk-ag-iconbtn svg { width: 15px !important; height: 15px !important; }
/* Hover-Brücke, damit die Leiste beim Hinfahren nicht verschwindet */
.ep-host .mk-ag-left > .mk-ag-actions::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 18px; }
body.ep-retro .ep-host .mk-ag-left > .mk-ag-actions { background: rgba(250, 246, 236, .97); border-color: rgba(92,74,48,.18); }
body.ep-dark .ep-host .mk-ag-left > .mk-ag-actions { background: rgba(38, 33, 26, .97); }
.ep-host .mk-ag-day { overflow: visible; }