:root{
  --bg:#090e12;
  --panel:#11181e;
  --panel2:#172027;
  --line:rgba(255,255,255,.09);
  --text:#f4f7f8;
  --muted:#94a1ab;
  --green:#62c84f;
  --shadow:0 16px 40px rgba(0,0,0,.30);
}

*{box-sizing:border-box}

body.mc-body{
  margin:0;
  background:radial-gradient(circle at top left,#16212a 0,#0b1116 34%,#080c10 100%);
  color:var(--text);
  font-family:Inter,"Segoe UI",Arial,Helvetica,sans-serif;
  font-size:14px;
}

.mc-topbar{
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 20px;
  background:#090e12;
  border-bottom:1px solid var(--line);
}

.mc-brand{display:flex;align-items:center;gap:12px}
.mc-brand-icon{
  width:38px;height:38px;border-radius:9px;display:grid;place-items:center;
  color:#76dc5e;background:rgba(68,151,55,.16);border:1px solid rgba(105,205,82,.4);
}
.mc-brand-title{font-size:19px;font-weight:800}
.mc-brand-subtitle{font-size:12px;color:var(--muted);margin-top:2px}
.mc-userbox{font-size:12px;color:var(--muted);text-align:right}
.mc-userbox strong{display:block;color:#72d558;margin-top:2px}

.mc-layout{
  max-width:1840px;margin:0 auto;padding:16px;
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;
}
.mc-main{min-width:0}
.mc-breadcrumb{font-size:12px;color:var(--muted);margin:0 0 10px 2px}

.mc-sidebar-card,.mc-list-page{
  background:linear-gradient(180deg,rgba(18,25,31,.94),rgba(12,18,23,.96));
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
}
.mc-sidebar-card{padding:12px;overflow:hidden}
.mc-sidebar-card table{width:100%!important;max-width:100%}
.mc-sidebar-card .input{
  background:#192228;color:var(--text);border:1px solid var(--line);
}

.mc-list-page{padding:16px}

.mc-page-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px;
}
.mc-title{margin:0;font-size:26px;line-height:1.15}
.mc-subtitle{font-size:12px;color:var(--muted);margin-top:4px}
.mc-toolbar{display:flex;align-items:center;gap:8px}
.mc-search{
  width:min(360px,34vw);min-height:40px;display:flex;align-items:center;gap:8px;
  padding:0 12px;background:#0b1115;border:1px solid var(--line);border-radius:8px;
}
.mc-search input{width:100%;border:0;outline:0;background:transparent;color:var(--text)}
.mc-filter-toggle,.mc-primary-button,.mc-secondary-button{
  min-height:40px;padding:0 14px;border-radius:8px;font:inherit;font-weight:700;cursor:pointer;
}
.mc-filter-toggle,.mc-primary-button{
  color:#fff;background:linear-gradient(#3c9133,#276b29);border:1px solid #4ba541;
}
.mc-secondary-button{color:#fff;background:#1a232a;border:1px solid var(--line)}

.mc-events{display:grid;gap:5px}

/* category colors */
.mc-event-card{
  --cat:#75818a;--cat-title:#c3cbd0;--cat-glow:rgba(115,129,139,.12);
  display:grid;
  grid-template-columns:92px minmax(260px,300px) minmax(360px,1fr) 170px;
  min-height:94px;
  background:linear-gradient(90deg,var(--cat-glow),rgba(17,24,30,.98) 22%,rgba(17,24,30,.98));
  border:1px solid rgba(255,255,255,.10);
  border-left:5px solid var(--cat);
  border-radius:8px;
  overflow:hidden;
  color:var(--text);
}
.mc-event-card.category1{--cat:#59c94c;--cat-title:#6fd45d;--cat-glow:rgba(48,123,48,.22)}
.mc-event-card.category2{--cat:#ff7a12;--cat-title:#ff8427;--cat-glow:rgba(156,74,22,.22)}
.mc-event-card.category3{--cat:#e0bd00;--cat-title:#e8c800;--cat-glow:rgba(129,112,0,.22)}
.mc-event-card.category4{--cat:#4d84df;--cat-title:#7eabf2;--cat-glow:rgba(54,92,153,.18)}
.mc-event-card.category5{--cat:#2f42ef;--cat-title:#7885ff;--cat-glow:rgba(37,49,167,.18)}

.mc-date-badge{
  min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:7px 4px;border-right:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,color-mix(in srgb,var(--cat) 17%,transparent),
                             color-mix(in srgb,var(--cat) 8%,transparent));
  white-space:nowrap;
}
.mc-badge-weekday{font-size:11px;font-weight:800;color:#eef3f5}
.mc-badge-day{font-size:26px;line-height:1;font-weight:900;color:var(--cat-title);margin:2px 0}
.mc-badge-month{font-size:11px;font-weight:700;color:#e1e7ea}
.mc-badge-year{font-size:10px;color:#b7c0c6;margin-top:2px}

.mc-event-dates{
  min-width:0;display:grid;grid-template-columns:minmax(105px,1fr) 28px minmax(105px,1fr);
  border-right:1px solid rgba(255,255,255,.08);
}
.mc-date-block{
  min-width:0;display:flex;flex-direction:column;justify-content:center;padding:10px 12px;
}
.mc-date-caption{
  font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#87949e;margin-bottom:5px;
}
.mc-date-value{
  display:block;font-size:13px;line-height:1.2;font-weight:800;color:#f4f7f8;white-space:nowrap;
}
.mc-time{font-size:12px;color:#dfe5e8;font-weight:700;margin-top:6px;white-space:nowrap}
.mc-date-arrow{align-self:center;justify-self:center;color:#dbe1e4;font-size:18px}

.mc-event-content{min-width:0;padding:10px 14px;overflow:hidden}
.mc-event-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mc-event-title{
  margin:0;color:var(--cat-title);font-size:17px;line-height:1.2;font-weight:800;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mc-event-meta,.mc-event-description{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mc-event-meta{font-size:12px;line-height:1.45;color:#dbe1e5;margin-top:5px}
.mc-event-description{font-size:12px;line-height:1.4;color:#aeb9c0;margin-top:2px}
.mc-event-description br{display:none}
.mc-event-content b{color:#fff}

.mc-event-actions{
  min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px;border-left:1px solid rgba(255,255,255,.07);
}
.mc-action,.mc-action-slot a{
  width:36px;height:36px;flex:0 0 36px;display:inline-grid;place-items:center;
  border-radius:50%;border:1px solid rgba(255,255,255,.16);
  background:rgba(7,11,14,.3);color:#fff;text-decoration:none;
}
.mc-action-slot{display:inline-flex}
.mc-action-slot img{max-width:17px;max-height:17px;filter:brightness(0) invert(1);opacity:.9}
.mc-action-more .mc-action-symbol{font-size:29px;line-height:1}

.mc-list-footer{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06);
}
.mc-pagination a,.mc-pagination strong,.mc-pagination span{
  display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;
  padding:0 8px;margin:0 2px;border:1px solid var(--line);border-radius:6px;background:#182128;
}

.mc-filter-panel{
  margin-top:14px;padding:16px;background:#0d1419;border:1px solid var(--line);border-radius:10px;
}
.mc-filter-title{font-size:16px;font-weight:800;margin-bottom:12px}
.mc-filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mc-label{
  display:block;margin:8px 0 6px;color:#98a4ad;font-size:11px;text-transform:uppercase;
}
.mc-date-row{display:flex;align-items:center;gap:6px}
.mc-filter-panel .input{
  min-height:34px;background:#192228;color:#fff;border:1px solid var(--line);border-radius:7px;padding:5px 7px;
}
.mc-year{width:70px}
.mc-multiselect{width:100%;min-height:100px!important}
.mc-calendar-button{width:28px;height:28px;object-fit:contain;cursor:pointer}
.mc-filter-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}

/* First compression step: keep everything readable */
@media(max-width:1350px){
  .mc-event-card{
    grid-template-columns:84px minmax(235px,265px) minmax(300px,1fr) 150px;
  }
  .mc-event-title{font-size:16px}
  .mc-event-meta,.mc-event-description{font-size:11px}
}

/* Tablet/narrow desktop: event card becomes two rows */
@media(max-width:1050px){
  .mc-layout{grid-template-columns:1fr}
  .mc-sidebar{order:-1}

  .mc-event-card{
    grid-template-columns:84px minmax(235px,270px) minmax(0,1fr);
    grid-template-areas:
      "badge dates content"
      "badge actions actions";
  }
  .mc-date-badge{grid-area:badge}
  .mc-event-dates{grid-area:dates}
  .mc-event-content{grid-area:content}
  .mc-event-actions{
    grid-area:actions;justify-content:flex-end;border-left:0;border-top:1px solid rgba(255,255,255,.06);
    padding:7px 10px;
  }
}

/* Phone: fully stacked, no overlap possible */
@media(max-width:720px){
  .mc-topbar{padding:10px 12px}
  .mc-brand-subtitle,.mc-userbox{display:none}
  .mc-layout{padding:10px}
  .mc-list-page{padding:11px}
  .mc-page-head{flex-direction:column;align-items:stretch}
  .mc-toolbar{width:100%}
  .mc-search{width:100%}
  .mc-title{font-size:21px}

  .mc-event-card{
    grid-template-columns:72px minmax(0,1fr);
    grid-template-areas:
      "badge content"
      "dates dates"
      "actions actions";
  }
  .mc-date-badge{grid-area:badge;min-height:88px}
  .mc-event-content{grid-area:content}
  .mc-event-title{white-space:normal;font-size:15px}
  .mc-event-meta,.mc-event-description{white-space:normal}

  .mc-event-dates{
    grid-area:dates;border-right:0;border-top:1px solid rgba(255,255,255,.07);
    grid-template-columns:1fr 28px 1fr;
  }
  .mc-event-actions{
    grid-area:actions;border-top:1px solid rgba(255,255,255,.07);
  }

  .mc-filter-grid{grid-template-columns:1fr}
  .mc-list-footer{flex-direction:column;align-items:stretch}
}

/* =========================================================
   V3.2 – Aktionssymbole besser lesbar
   ========================================================= */
.mc-action-symbol {
    color: #ffffff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-shadow: 0 0 1px #ffffff;
}

.mc-action-detail .mc-action-symbol {
    font-size: 17px !important;
    font-weight: 900 !important;
}

.mc-action-more .mc-action-symbol {
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 0.8 !important;
}

.mc-action {
    color: #ffffff !important;
    background: #121a20 !important;
    border: 1px solid #53616b !important;
}

.mc-action:hover {
    background: #26323a !important;
    border-color: #ffffff !important;
}

/* =========================================================
   V3.3 – Moderne Hauptnavigation
   Aktueller Tag / Woche / Monat / Jahr / Terminliste
   Registrieren / Anmelden
   ========================================================= */

/* Nur die sieben alten Haupt-Navigationsbuttons anfassen */
.mc-main a.button110-16[href*="day.php"],
.mc-main a.button110-16[href*="week.php"],
.mc-main a.button110-16[href*="month.php"],
.mc-main a.button110-16[href*="year.php"],
.mc-main a.button110-16[href*="list.php"],
.mc-main a.button110-16[href*="register.php"],
.mc-main a.button110-16[href*="login.php"] {
    width: auto !important;
    min-width: 132px !important;
    height: 38px !important;
    min-height: 38px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;

    margin: 0 6px 7px 0 !important;
    padding: 0 14px !important;

    box-sizing: border-box !important;
    overflow: visible !important;

    background: linear-gradient(180deg, #172128 0%, #121a20 100%) !important;
    color: #eef3f5 !important;

    border: 1px solid #31424a !important;
    border-radius: 7px !important;

    font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: left !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 2px 7px rgba(0,0,0,.14) !important;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease !important;
}

/* Kleines Icon-Feld links */
.mc-main a.button110-16[href*="day.php"]::before,
.mc-main a.button110-16[href*="week.php"]::before,
.mc-main a.button110-16[href*="month.php"]::before,
.mc-main a.button110-16[href*="year.php"]::before,
.mc-main a.button110-16[href*="list.php"]::before,
.mc-main a.button110-16[href*="register.php"]::before,
.mc-main a.button110-16[href*="login.php"]::before {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 23px !important;
    height: 23px !important;
    flex: 0 0 23px !important;

    color: #79d9b4 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

/* Icons bewusst als schlichte Zeichen – keine Emoji-Optik */
.mc-main a.button110-16[href*="day.php"]::before   { content: "▦"; }
.mc-main a.button110-16[href*="week.php"]::before  { content: "▥"; }
.mc-main a.button110-16[href*="month.php"]::before { content: "▦"; }
.mc-main a.button110-16[href*="year.php"]::before  { content: "▣"; }
.mc-main a.button110-16[href*="list.php"]::before   { content: "☷"; }
.mc-main a.button110-16[href*="register.php"]::before { content: "♙"; }
.mc-main a.button110-16[href*="login.php"]::before    { content: "⇥"; }

/* Hover */
.mc-main a.button110-16[href*="day.php"]:hover,
.mc-main a.button110-16[href*="week.php"]:hover,
.mc-main a.button110-16[href*="month.php"]:hover,
.mc-main a.button110-16[href*="year.php"]:hover,
.mc-main a.button110-16[href*="list.php"]:hover,
.mc-main a.button110-16[href*="register.php"]:hover,
.mc-main a.button110-16[href*="login.php"]:hover {
    background: linear-gradient(180deg, #223139 0%, #19252c 100%) !important;
    border-color: #4b665f !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* Aktive Terminliste auf list.php dezent hervorheben */
body .mc-main a.button110-16[href*="list.php"] {
    border-color: #356d48 !important;
}

/* Tastaturfokus */
.mc-main a.button110-16:focus-visible {
    outline: 2px solid #58c84d !important;
    outline-offset: 2px !important;
}

/* Auf etwas schmaleren Desktops kompakter */
@media (max-width: 1250px) {
    .mc-main a.button110-16[href*="day.php"],
    .mc-main a.button110-16[href*="week.php"],
    .mc-main a.button110-16[href*="month.php"],
    .mc-main a.button110-16[href*="year.php"],
    .mc-main a.button110-16[href*="list.php"],
    .mc-main a.button110-16[href*="register.php"],
    .mc-main a.button110-16[href*="login.php"] {
        min-width: 118px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 11px !important;
        font-size: 12px !important;
    }
}

/* =========================================================
   V3.5 – Rechte Sidebar: Legacy-Buttons direkt überschreiben
   Funktioniert ohne Änderungen an master.tpl
   ========================================================= */

/* Alte grüne Button-Klassen und Form-Buttons in der Sidebar */
.mc-sidebar-card a.button110-16,
.mc-sidebar-card a.button100-16,
.mc-sidebar-card a.button,
.mc-sidebar-card input[type="submit"],
.mc-sidebar-card input[type="button"],
.mc-sidebar-card button {
    width: 100% !important;
    max-width: 220px !important;
    min-height: 36px !important;
    height: 36px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 4px auto !important;
    padding: 0 12px !important;

    box-sizing: border-box !important;

    background: linear-gradient(180deg, #172128 0%, #121a20 100%) !important;
    background-color: #172128 !important;
    background-image: linear-gradient(180deg, #172128 0%, #121a20 100%) !important;

    color: #eef3f5 !important;
    border: 1px solid #3b4c55 !important;
    border-radius: 7px !important;

    font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-align: center !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 2px 6px rgba(0,0,0,.14) !important;

    cursor: pointer !important;
    transition: all .18s ease !important;
}

.mc-sidebar-card a.button110-16:hover,
.mc-sidebar-card a.button100-16:hover,
.mc-sidebar-card a.button:hover,
.mc-sidebar-card input[type="submit"]:hover,
.mc-sidebar-card input[type="button"]:hover,
.mc-sidebar-card button:hover {
    background: linear-gradient(180deg, #223139 0%, #19252c 100%) !important;
    background-color: #223139 !important;
    border-color: #58c84d !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* Die kleinen Monatssteuerungen sollen kompakt bleiben */
.mc-sidebar-card input[value="OK"],
.mc-sidebar-card input[value="Ok"],
.mc-sidebar-card input[value="ok"] {
    width: auto !important;
    min-width: 46px !important;
    max-width: 60px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 0 0 5px !important;
}

/* Suchbutton etwas breiter, aber nicht vollflächig */
.mc-sidebar-card input[value="Suchen"],
.mc-sidebar-card button[value="Suchen"] {
    max-width: 220px !important;
}

/* Alte grüne Inline-Farben zuverlässig neutralisieren */
.mc-sidebar-card a[style*="background"],
.mc-sidebar-card input[style*="background"],
.mc-sidebar-card button[style*="background"] {
    background-color: #172128 !important;
}

/* Dropdowns und Suchfeld passend zum MOG */
.mc-sidebar-card select,
.mc-sidebar-card input[type="text"],
.mc-sidebar-card input[type="search"] {
    min-height: 34px !important;
    box-sizing: border-box !important;
    background: #141d23 !important;
    color: #eef3f5 !important;
    border: 1px solid #31424a !important;
    border-radius: 7px !important;
    padding: 5px 8px !important;
    font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
}

/* Checkbox */
.mc-sidebar-card input[type="checkbox"] {
    accent-color: #58c84d !important;
}

/* Kategorie-Farbflächen ausdrücklich NICHT überschreiben */
.mc-sidebar-card option,
.mc-sidebar-card .category,
.mc-sidebar-card [class*="category"] {
    /* keine globale Hintergrundfarbe hier */
}