/* Erntefeste-Kalender Styles */
/* ── CSS-Variablen: LIGHT MODE ── */
  :root {
    --bg:            transparent;
    --bg-card:       rgba(0,0,0,0.04);
    --bg-inner:      rgba(0,0,0,0.05);
    --bg-detail:     rgba(0,0,0,0.04);
    --text:          #1a1a1a;
    --text-muted:    #666666;
    --accent:        #b89200;
    --border:        rgba(0,0,0,0.13);
    --border-card:   rgba(0,0,0,0.14);
    --sep:           linear-gradient(90deg,transparent,#c8a000 35%,#6655cc 65%,transparent);
    --shadow:        0 3px 16px rgba(0,0,0,0.08);
    --shadow-hover:  0 6px 28px rgba(0,0,0,0.15);
    --badge-ja:      #155724; --badge-ja-bg:   #d4edda;
    --badge-nein:    #721c24; --badge-nein-bg: #f8d7da;
    --badge-unk:     #383d41; --badge-unk-bg:  #e2e3e5;
    --tag-hover:     rgba(0,0,0,0.05);
    --nodate-bg:     rgba(0,0,0,0.03);
    --nodate-border: rgba(0,0,0,0.09);
    --link-color:    #b89200;
    --link-hover:    #d4a800;
    --maps-color:    #1a73e8;
    --maps-hover:    #1557b0;
    --loader-bg:     rgba(255,255,255,0.88);
    --error-bg:      #fff3f3;
    --error-border:  #ffcccc;
    --error-text:    #cc0000;
  }

  /* ── DARK MODE: nur Text- und Akzentfarben wechseln, Hintergrund bleibt transparent ── */
  body.darkmode #ef-root {
    --bg-card:       rgba(255,255,255,0.07);
    --bg-inner:      rgba(255,255,255,0.05);
    --bg-detail:     rgba(255,255,255,0.06);
    --text:          #f0f0f0;
    --text-muted:    #aaaaaa;
    --accent:        #f5c518;
    --border:        rgba(255,255,255,0.12);
    --border-card:   rgba(255,255,255,0.14);
    --sep:           linear-gradient(90deg,transparent,#6666ee 35%,#9999ff 65%,transparent);
    --shadow:        0 3px 16px rgba(0,0,0,0.40);
    --shadow-hover:  0 6px 28px rgba(0,0,0,0.60);
    --badge-ja:      #75e096; --badge-ja-bg:   rgba(21,87,36,0.35);
    --badge-nein:    #ff8a8a; --badge-nein-bg: rgba(114,28,36,0.35);
    --badge-unk:     #cccccc; --badge-unk-bg:  rgba(255,255,255,0.10);
    --tag-hover:     rgba(255,255,255,0.07);
    --nodate-bg:     rgba(255,255,255,0.04);
    --nodate-border: rgba(255,255,255,0.10);
    --link-color:    #f5c518;
    --link-hover:    #ffd740;
    --maps-color:    #5ca8ff;
    --maps-hover:    #80bfff;
    --loader-bg:     rgba(0,0,0,0.75);
    --error-bg:      rgba(204,0,0,0.12);
    --error-border:  rgba(204,0,0,0.30);
    --error-text:    #ff8a8a;
  }

  /* ── Reset ── */
  html, body { margin: 0; padding: 0; background: transparent; }
  #ef-root *, #ef-root *::before, #ef-root *::after {
    box-sizing: border-box; margin: 0; padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
  /* Smooth scrolling auf iOS */
  #ef-root { -webkit-overflow-scrolling: touch; }

  /* ── Reduzierte Bewegung respektieren (Barrierefreiheit) ── */
  @media (prefers-reduced-motion: reduce) {
    #ef-root *, #ef-root *::before, #ef-root *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* ── Wrapper ── */
  #ef-root {
    font-family: 'Segoe UI', system-ui, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    max-width: 920px;
    margin: 0 auto;
    padding: 44px 22px 56px;
    transition: color .25s;
    position: relative;
    min-height: 200px;
  }

  /* ── Loader ── */
  #ef-loader {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 14px;
    background: var(--loader-bg);
    border-radius: 14px; z-index: 10;
    transition: opacity .4s;
  }
  #ef-loader.hidden { opacity: 0; pointer-events: none; }
  .ef-spinner {
    width: 38px; height: 38px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: ef-spin .7s linear infinite;
  }
  @keyframes ef-spin { to { transform: rotate(360deg); } }
  #ef-loader p { font-size: .88rem; color: var(--text-muted); }

  /* ── Fehler-Box ── */
  #ef-error {
    display: none;
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    color: var(--error-text);
    border-radius: 10px;
    padding: 18px 22px;
    margin-bottom: 20px;
    font-size: .9rem;
    line-height: 1.7;
  }
  #ef-error.visible { display: block; }
  #ef-error code {
    background: rgba(0,0,0,0.07);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: .82rem;
  }

  /* ── Header ── */
  #ef-root .ef-header { text-align: center; margin-bottom: 36px; }
  #ef-root .ef-header h2 {
    font-size: clamp(1.8rem,4vw,2.5rem);
    font-weight: 800; color: var(--text);
    letter-spacing: 1px; margin-bottom: 8px;
  }
  #ef-root .ef-header p { font-size: 1rem; color: var(--text-muted); }

  /* ── Monats-Akkordeon ── */
  #ef-root .ef-month {
    border: 1.5px solid var(--border-card);
    border-radius: 14px; margin-bottom: 14px;
    overflow: hidden; box-shadow: var(--shadow);
    transition: box-shadow .3s, border-color .3s;
    animation: ef-slidein .4s ease both;
  }
  #ef-root .ef-month:hover  { box-shadow: var(--shadow-hover); }
  #ef-root .ef-month.open   { border-color: var(--accent); }

  @keyframes ef-slidein {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  #ef-root .ef-month-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 17px 22px;
    background: var(--bg-card);
    cursor: pointer; user-select: none;
    transition: background .2s;
    border-radius: 12px;
    touch-action: manipulation;
  }
  #ef-root .ef-month-header:hover       { background: var(--bg-inner); }
  #ef-root .ef-month.open .ef-month-header { border-radius: 12px 12px 0 0; }

  #ef-root .ef-month-title {
    font-size: 1.1rem; font-weight: 700;
    color: var(--text); letter-spacing: .4px;
  }
  #ef-root .ef-month-meta {
    font-size: .78rem; color: var(--text-muted);
    font-weight: 400; margin-left: 8px;
  }
  #ef-root .ef-toggle-icon {
    font-size: 1.4rem; color: var(--text-muted);
    font-weight: 300; line-height: 1;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    transform: translateZ(0);
  }
  #ef-root .ef-month.open .ef-toggle-icon { transform: rotate(45deg) translateZ(0); }

  /* ── Monats-Body ── */
  #ef-root .ef-month-body {
    max-height: 0; overflow: hidden;
    transition: max-height .45s cubic-bezier(.4,0,.2,1);
    background: var(--bg);
    will-change: max-height;
  }
  #ef-root .ef-month.open .ef-month-body { max-height: 6000px; }
  #ef-root .ef-month-inner { padding: 16px 16px 8px; }

  /* ── Kein-Datum-Label ── */
  #ef-root .ef-nodate-label {
    font-size: .72rem; text-transform: uppercase;
    letter-spacing: .9px; color: var(--text-muted);
    font-weight: 600; margin: 16px 0 8px 4px; opacity: .7;
  }

  /* ── Einzelnes Fest ── */
  #ef-root .ef-item {
    border: 1px solid var(--border); border-radius: 9px;
    margin-bottom: 8px; overflow: hidden;
    scroll-margin-top: 18px;
    transition: border-color .2s, box-shadow .2s;
  }
  #ef-root .ef-item:hover   { border-color: var(--accent); }
  #ef-root .ef-item.open    { box-shadow: 0 2px 10px rgba(200,160,0,.15); }
  #ef-root .ef-item.no-date {
    background: var(--nodate-bg);
    border-color: var(--nodate-border); opacity: .75;
  }

  /* Kopfzeile */
  #ef-root .ef-item-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center; gap: 10px;
    padding: 13px 16px; cursor: pointer;
    transition: background .2s;
    touch-action: manipulation;
  }
  #ef-root .ef-item-row:hover { background: var(--tag-hover); }

  /* ── Festival-Name: Link-Styling ── */
  #ef-root .ef-item-name {
    font-weight: 700; font-size: .95rem;
    display: flex; align-items: center; gap: 5px;
    overflow: hidden; white-space: nowrap; min-width: 0;
  }
  #ef-root .ef-item-name > a,
  #ef-root .ef-item-name > span:not(.ef-sug-indicator) {
    color: var(--accent);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  #ef-root .ef-item-name a:hover {
    color: var(--link-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  #ef-root .ef-item-name a:hover .ef-ext-icon { opacity: .9; }
  /* Ketten-Icon neben dem Festivalnamen (Website-Link) */
  #ef-root .ef-ext-icon {
    display: inline-block; width: 12px; height: 12px;
    flex-shrink: 0; opacity: .45;
    transition: opacity .2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b89200' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-size: contain;
  }
  body.darkmode #ef-root .ef-ext-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5c518' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
  }
  #ef-root .ef-item.no-date .ef-item-name a,
  #ef-root .ef-item.no-date .ef-item-name span { color: var(--text-muted); }
  #ef-root .ef-item.no-date .ef-ext-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
  }

  #ef-root .ef-item-date {
    font-size: .85rem; color: var(--text);
    white-space: nowrap; font-variant-numeric: tabular-nums;
    display: flex; align-items: center; gap: 6px;
  }
  /* Wochentag-Pill neben dem Datum */
  #ef-root .ef-day-pill {
    font-size: .72rem; font-weight: 700;
    background: var(--tag-hover);
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 4px;
    padding: 1px 5px;
    letter-spacing: .3px;
    opacity: .85;
  }
  #ef-root .ef-item-chevron {
    font-size: .7rem; color: var(--text-muted);
    transition: transform .25s cubic-bezier(.4,0,.2,1); flex-shrink: 0;
    transform: translateZ(0);
  }
  #ef-root .ef-item.open .ef-item-chevron { transform: rotate(180deg) translateZ(0); }

  /* Trennlinie */
  #ef-root .ef-sep { height: 1px; border: none; background: var(--sep); }

  /* Detail-Bereich */
  #ef-root .ef-item-detail {
    max-height: 0; overflow: hidden;
    transition: max-height .35s cubic-bezier(.4,0,.2,1);
    will-change: max-height;
  }
  #ef-root .ef-item.open .ef-item-detail { max-height: 900px; }

  #ef-root .ef-detail-grid {
    padding: 13px 16px 16px;
    background: var(--bg-detail);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px 20px;
  }
  #ef-root .ef-detail-block {
    display: flex; flex-direction: column; gap: 3px;
  }
  #ef-root .ef-detail-label {
    font-size: .68rem; text-transform: uppercase;
    letter-spacing: .7px; color: var(--text-muted); font-weight: 600;
  }
  #ef-root .ef-detail-value {
    font-size: .88rem; color: var(--text); font-weight: 500;
  }

  /* ── Google-Maps-Link ── */
  #ef-root .ef-maps-link {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--maps-color);
    text-decoration: none;
    font-size: .88rem; font-weight: 500;
    transition: color .2s;
  }
  #ef-root .ef-maps-link:hover { color: var(--maps-hover); text-decoration: underline; }
  #ef-root .ef-maps-icon {
    display: inline-block; width: 14px; height: 14px; flex-shrink: 0;
    /* SVG-Pin als data-URI */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231a73e8'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5 14.5 7.62 14.5 9 13.38 11.5 12 11.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-size: contain;
  }
  body.darkmode #ef-root .ef-maps-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235ca8ff'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5 14.5 7.62 14.5 9 13.38 11.5 12 11.5z'/%3E%3C/svg%3E");
  }

  /* ── Aktions-Leiste (Kalender + Vorschlag) ── */
  #ef-root .ef-suggest-bar {
    padding: 10px 16px 14px;
    background: var(--bg-detail);
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid var(--border);
    gap: 8px; flex-wrap: wrap;
  }
  /* Vorschlag-Button */
  #ef-root .ef-suggest-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 12px;
    cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
    font-family: inherit; margin-left: auto;
  }
  #ef-root .ef-suggest-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--tag-hover);
  }
  /* Text-Varianten: normal = "vorschlagen", admin = "vornehmen" */
  .ef-lbl-edit { display: none; }
  body.ef-editmode .ef-lbl-suggest { display: none; }
  body.ef-editmode .ef-lbl-edit    { display: inline; }
  /* Interesse-Button im Admin-Modus ausblenden */
  body.ef-editmode .ef-interest-wrap { display: none; }
  /* Kalender-Button */
  #ef-root .ef-cal-btn {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .78rem; font-weight: 600;
    color: var(--maps-color);
    background: transparent;
    border: 1px solid var(--maps-color);
    border-radius: 6px;
    padding: 5px 12px;
    cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
    font-family: inherit; opacity: .85;
  }
  #ef-root .ef-cal-btn:hover {
    background: rgba(26,115,232,0.08);
    opacity: 1;
  }
  body.darkmode #ef-root .ef-cal-btn {
    color: var(--maps-color); border-color: var(--maps-color);
  }
  body.darkmode #ef-root .ef-cal-btn:hover {
    background: rgba(92,168,255,0.1);
  }

  /* ── Vorschlag (unbestätigt) ── */
  #ef-root .ef-sug-field {
    display: flex; align-items: center; gap: 6px;
    margin-top: 5px; flex-wrap: wrap;
  }
  #ef-root .ef-sug-badge {
    font-size: .6rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; padding: 1px 6px; border-radius: 10px;
    background: rgba(240,165,0,0.15); color: #b07000;
    border: 1px solid rgba(240,165,0,0.4);
    white-space: nowrap; flex-shrink: 0;
  }
  body.darkmode #ef-root .ef-sug-badge {
    color: #f0c040; background: rgba(240,165,0,0.12);
    border-color: rgba(240,165,0,0.3);
  }
  #ef-root .ef-sug-val {
    font-size: .82rem; color: var(--text-muted); font-style: italic;
  }

  /* Eintrag mit ausstehendem Vorschlag – subtile Markierung */
  #ef-root .ef-item.ef-has-suggestion {
    border-color: rgba(240,165,0,0.45);
  }
  /* Glühbirne als SVG-Icon – vertikal zentriert */
  #ef-root .ef-sug-indicator {
    display: inline-flex; align-items: center; flex-shrink: 0;
    color: var(--accent); opacity: .8;
  }
  #ef-root .ef-sug-icon {
    width: 13px; height: 13px; flex-shrink: 0;
  }

  /* Admin-Bar: Bestätigen / Ablehnen – nur im Edit-Modus */
  #ef-root .ef-sug-admin-bar {
    display: none;
    padding: 9px 16px;
    background: rgba(240,165,0,0.07);
    border-top: 1px solid rgba(240,165,0,0.25);
    align-items: center; gap: 8px; flex-wrap: wrap;
  }
  body.ef-editmode #ef-root .ef-sug-admin-bar { display: flex; }
  #ef-root .ef-sug-notice {
    font-size: .75rem; color: #b07000; font-weight: 600; flex: 1;
  }
  body.darkmode #ef-root .ef-sug-notice { color: #f0c040; }
  #ef-root .ef-sug-confirm-btn, #ef-root .ef-sug-reject-btn {
    padding: 5px 12px; border-radius: 6px;
    font-size: .75rem; font-weight: 700;
    cursor: pointer; border: none; font-family: inherit;
    transition: opacity .15s;
  }
  #ef-root .ef-sug-confirm-btn { background: #155724; color: #d4edda; }
  #ef-root .ef-sug-confirm-btn:hover { opacity: .82; }
  #ef-root .ef-sug-reject-btn  { background: #721c24; color: #f8d7da; }
  #ef-root .ef-sug-reject-btn:hover  { opacity: .82; }

  /* ── Anmeldungs-Badge ── */
  #ef-root .ef-badge {
    display: inline-block; font-size: .7rem;
    font-weight: 700; padding: 2px 9px;
    border-radius: 20px; text-transform: uppercase; letter-spacing: .5px;
  }
  #ef-root .ef-badge.ja   { background: var(--badge-ja-bg);   color: var(--badge-ja);   }
  #ef-root .ef-badge.nein { background: var(--badge-nein-bg); color: var(--badge-nein); }
  #ef-root .ef-badge.unk  { background: var(--badge-unk-bg);  color: var(--badge-unk);  }

  /* ── Admin: offene neue Erntefest-Vorschläge ── */
  #ef-root .ef-newsug-block {
    margin: 0 0 22px;
    padding: 14px 16px 12px;
    background: rgba(240,165,0,0.08);
    border: 1.5px solid rgba(240,165,0,0.4);
    border-radius: 12px;
  }
  body.darkmode #ef-root .ef-newsug-block {
    background: rgba(240,165,0,0.10);
    border-color: rgba(240,165,0,0.35);
  }
  #ef-root .ef-newsug-title {
    font-size: .85rem; font-weight: 700;
    color: #b07000; margin-bottom: 10px;
    letter-spacing: .3px;
  }
  body.darkmode #ef-root .ef-newsug-title { color: #f0c040; }
  #ef-root .ef-newsug-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
  }
  #ef-root .ef-newsug-card:last-child { margin-bottom: 0; }
  #ef-root .ef-newsug-name {
    font-weight: 700; color: var(--text); font-size: .92rem;
    margin-bottom: 4px;
  }
  #ef-root .ef-newsug-meta {
    font-size: .78rem; color: var(--text-muted); line-height: 1.6;
    margin-bottom: 8px;
  }
  #ef-root .ef-newsug-meta strong { color: var(--text); font-weight: 600; }
  #ef-root .ef-newsug-actions {
    display: flex; gap: 8px; flex-wrap: wrap;
  }

  /* "Erntefest fehlt?"-Button im Footer */
  #ef-root .ef-footer-add-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent;
    border: 1.5px solid var(--accent);
    color: var(--accent);
    border-radius: 10px;
    padding: 9px 18px;
    font-size: .88rem; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: background .2s, color .2s, transform .15s;
    touch-action: manipulation;
  }
  #ef-root .ef-footer-add-btn:hover { background: var(--accent); color: #111; }
  body.darkmode #ef-root .ef-footer-add-btn:hover { color: #111; }
  #ef-root .ef-footer-add-btn:active { transform: scale(.97); }
  #ef-root .ef-footer-add-icon {
    font-size: 1.2rem; font-weight: 800; line-height: 1;
  }

  /* ── Footer ── */
  #ef-root .ef-footer {
    margin-top: 40px;
    padding: 28px 16px 12px;
    display: flex; flex-direction: column;
    align-items: center; gap: 18px;
    border-top: 1px solid var(--border);
    text-align: center;
  }
  #ef-root .ef-footer-info {
    font-size: .9rem; color: var(--text-muted); line-height: 1.6;
  }
  #ef-root .ef-footer-info a {
    color: var(--accent); text-decoration: none; font-weight: 600;
  }
  #ef-root .ef-footer-info a:hover { text-decoration: underline; }
  #ef-root .ef-footer-meta {
    font-size: .72rem; color: var(--text-muted); opacity: .7;
    line-height: 1.6;
  }
  #ef-root .ef-footer-meta strong { color: var(--text-muted); font-weight: 600; }

  /* ── Jahr-Navigation: segmentierter Pill-Switch ── */
  #ef-root .ef-year-nav {
    display: inline-flex; align-items: stretch;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 14px;
    padding: 4px;
    gap: 2px;
    box-shadow: var(--shadow);
    user-select: none;
  }
  #ef-root .ef-year-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 40px;
    background: transparent; border: none;
    border-radius: 10px;
    padding: 6px 14px;
    font-size: 1.2rem; font-weight: 700; line-height: 1;
    color: var(--text-muted);
    cursor: pointer; font-family: inherit;
    transition: background .2s, color .2s, transform .15s;
    touch-action: manipulation;
  }
  #ef-root .ef-year-btn:hover {
    background: var(--tag-hover); color: var(--accent);
  }
  #ef-root .ef-year-btn:active { transform: scale(.94); }
  #ef-root .ef-year-current {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: #111;
    padding: 8px 22px;
    border-radius: 10px;
    font-weight: 800; font-size: 1rem;
    min-width: 76px; letter-spacing: .5px;
    font-variant-numeric: tabular-nums;
  }
  body.darkmode #ef-root .ef-year-current { color: #111; }

  /* ── Interesse-Zähler neben dem Namen ── */
  #ef-root .ef-item-interest {
    display: inline-flex; align-items: center; gap: 3px;
    flex-shrink: 0;
    font-size: .72rem; font-weight: 700;
    color: #1a73e8;
    background: rgba(26,115,232,0.10);
    border: 1px solid rgba(26,115,232,0.25);
    border-radius: 10px;
    padding: 1px 7px;
    line-height: 1.4;
  }
  body.darkmode #ef-root .ef-item-interest {
    color: #5ca8ff; background: rgba(92,168,255,0.12); border-color: rgba(92,168,255,0.28);
  }

  /* ── LJ-Mitfahrt-Pill ── */
  #ef-root .ef-mitfahrt-pill {
    font-size: .65rem; font-weight: 700; letter-spacing: .3px;
    background: rgba(26,115,232,0.12); color: #1a73e8;
    border: 1px solid rgba(26,115,232,0.3);
    border-radius: 10px; padding: 2px 10px; white-space: nowrap;
  }
  body.darkmode #ef-root .ef-mitfahrt-pill { background: rgba(92,168,255,0.15); color: #5ca8ff; border-color: rgba(92,168,255,0.3); }

  /* ── Interesse-Button ── */
  #ef-root .ef-interest-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: 600;
    color: #1a73e8; background: transparent;
    border: 1px solid rgba(26,115,232,0.4);
    border-radius: 6px; padding: 5px 12px;
    cursor: pointer; font-family: inherit;
    transition: all .2s;
  }
  #ef-root .ef-interest-btn:hover:not(:disabled) {
    background: rgba(26,115,232,0.08); border-color: #1a73e8;
  }
  #ef-root .ef-interest-btn.ef-interest-done {
    color: #155724; border-color: rgba(21,87,36,0.3);
    background: rgba(21,87,36,0.06); cursor: default;
  }
  .ef-interest-count {
    background: rgba(26,115,232,0.15); color: #1a73e8;
    border-radius: 10px; padding: 1px 6px; font-size: .7rem; font-weight: 700;
  }
  .ef-interest-btn.ef-interest-done .ef-interest-count {
    background: rgba(21,87,36,0.15); color: #155724;
  }
  body.darkmode #ef-root .ef-interest-btn { color: #5ca8ff; border-color: rgba(92,168,255,0.35); }
  body.darkmode #ef-root .ef-interest-btn.ef-interest-done { color: #75c687; border-color: rgba(117,198,135,0.3); background: rgba(117,198,135,0.08); }

  /* ── "Als nächstes"-Banner oben im Eintrag ── */
  #ef-root .ef-next-bar {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 14px;
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .7px;
    background: var(--accent);
    color: #fff;
    border-radius: 8px 8px 0 0;
    margin: -1px -1px 0;
  }
  body.darkmode #ef-root .ef-next-bar { color: #111; }
  #ef-root .ef-item.is-next {
    border-color: var(--accent);
    box-shadow: 0 0 0 1.5px var(--accent), var(--shadow);
  }

  /* ── "Keine weiteren Erntefeste"-Hinweis ── */
  #ef-root .ef-past-notice {
    display: flex; flex-direction: column; gap: 10px;
    padding: 18px 22px;
    border: 1.5px solid var(--border-card);
    border-radius: 14px;
    background: var(--bg-card);
    margin-bottom: 22px;
    animation: ef-slidein .4s ease both;
  }
  #ef-root .ef-past-notice-title {
    font-size: 1rem; font-weight: 700; color: var(--text);
    display: flex; align-items: center; gap: 8px;
  }
  #ef-root .ef-past-notice-text {
    font-size: .88rem; color: var(--text-muted); line-height: 1.6;
  }
  #ef-root .ef-past-notice-btn {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .82rem; font-weight: 600;
    color: var(--accent); border: 1.5px solid var(--accent);
    border-radius: 8px; padding: 7px 16px;
    text-decoration: none; background: transparent;
    transition: background .2s, color .2s;
    font-family: inherit;
  }
  #ef-root .ef-past-notice-btn:hover {
    background: var(--accent); color: #fff;
  }
  body.darkmode #ef-root .ef-past-notice-btn:hover { color: #111; }

  /* ══ BETA: Edit-Modus ══════════════════════════════════════════════ */

  /* Edit-Button als Pille im Footer (statt floatend) */
  #ef-root #ef-edit-fab {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    padding: 7px 18px;
    font-size: .8rem; font-weight: 600;
    color: var(--text-muted);
    cursor: pointer; font-family: inherit;
    transition: background .2s, color .2s, border-color .2s, transform .15s;
    touch-action: manipulation;
    margin-top: 2px;
  }
  /* Save-Bar direkt unter Edit-Button → kleiner Gap */
  #ef-root #ef-save-bar { margin-top: -10px; }
  #ef-root #ef-edit-fab:hover:not(.active) {
    border-color: var(--accent); color: var(--accent);
    background: var(--tag-hover);
  }
  #ef-root #ef-edit-fab:active { transform: scale(.97); }
  #ef-root #ef-edit-fab.active {
    background: rgba(204,34,0,0.12);
    border-color: #cc2200;
    color: #cc2200;
  }
  #ef-root #ef-edit-fab.active:hover {
    background: rgba(204,34,0,0.2);
  }

  /* Modal Overlay – Position wird per JS gesetzt (iframe-Fall) bzw.
     fällt im Standalone-Fall auf fixed zurück */
  .ef-modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 1000;
    align-items: center; justify-content: center;
    padding: 16px; box-sizing: border-box; overflow: hidden;
    background: rgba(15,23,42,0.36);
    backdrop-filter: blur(6px);
  }
  .ef-modal-overlay.visible { display: flex; }

  .ef-modal-box {
    background: #ffffff; color: #111827; border-radius: 14px;
    padding: 30px; width: 100%; max-width: 620px;
    border: 1px solid rgba(15,23,42,0.10);
    box-shadow: 0 24px 70px rgba(15,23,42,0.30), 0 6px 20px rgba(15,23,42,0.16);
    position: relative; max-height: 88vh; overflow-y: auto;
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    font-style: normal;
    line-height: 1.45;
  }
  body.darkmode .ef-modal-overlay { background: rgba(0,0,0,0.55); }
  body.darkmode .ef-modal-box {
    background: #181818; color: #f4f4f5;
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 24px 80px rgba(0,0,0,0.55), 0 8px 28px rgba(0,0,0,0.38);
  }
  .ef-modal-box h3 {
    font-size: 1.22rem; font-weight: 750; line-height: 1.25;
    margin-bottom: 20px; color: inherit; letter-spacing: 0;
  }
  .ef-modal-box > p {
    color: #64748b !important;
    font-size: .9rem !important;
    line-height: 1.6 !important;
    margin-bottom: 18px !important;
    font-style: normal;
  }
  body.darkmode .ef-modal-box > p { color: #a1a1aa !important; }
  .ef-modal-close {
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f1f5f9; border: 1px solid transparent;
    font-size: 1.25rem; cursor: pointer; color: #64748b; line-height: 1;
    font-family: inherit; transition: background .2s, color .2s, border-color .2s, transform .15s;
  }
  .ef-modal-close:hover { color: #cc2200; background: #fff1f0; border-color: rgba(204,34,0,0.16); }
  .ef-modal-close:active { transform: scale(.96); }
  body.darkmode .ef-modal-close { background: #27272a; color: #d4d4d8; }
  body.darkmode .ef-modal-close:hover { background: rgba(204,34,0,0.18); color: #ff9a8f; }

  /* Formular */
  .ef-form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 15px; }
  .ef-form-group label {
    font-size: .82rem; font-weight: 650; text-transform: none;
    letter-spacing: 0; color: #334155; font-style: normal;
  }
  body.darkmode .ef-form-group label { color: #d4d4d8; }
  .ef-form-group input, .ef-form-group select {
    min-height: 42px;
    padding: 10px 12px; border-radius: 8px; font-size: .94rem;
    border: 1px solid #d5dce8; background: #fff; color: #111827;
    font-family: inherit; font-style: normal;
    transition: border-color .2s, box-shadow .2s, background .2s;
  }
  .ef-form-group select {
    cursor: pointer;
    appearance: auto;
  }
  .ef-form-group input::placeholder { color: #94a3b8; font-style: normal; }
  body.darkmode .ef-form-group input,
  body.darkmode .ef-form-group select { background: #242427; border-color: #3f3f46; color: #f4f4f5; }
  body.darkmode .ef-form-group input::placeholder { color: #71717a; }
  /* Readonly-Felder im Dark Mode: Inline-Style überschreiben */
  .ef-form-group input[readonly] {
    background: #f1f5f9 !important; color: #64748b !important; cursor: not-allowed;
    border-color: #dbe3ef !important;
  }
  body.darkmode .ef-form-group input[readonly] {
    background: #27272a !important; color: #a1a1aa !important; cursor: not-allowed;
    border-color: #3f3f46 !important;
  }
  .ef-form-group input:focus, .ef-form-group select:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(184,146,0,0.14);
    background: #fffef7;
  }
  body.darkmode .ef-form-group input:focus,
  body.darkmode .ef-form-group select:focus {
    background: #202024;
    box-shadow: 0 0 0 3px rgba(245,197,24,0.16);
  }
  .ef-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

  .ef-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }
  .ef-btn-primary {
    min-height: 40px;
    padding: 10px 20px; border-radius: 8px; border: none;
    background: var(--accent); color: #111; font-weight: 750;
    font-size: .92rem; cursor: pointer; font-family: inherit; font-style: normal;
    transition: opacity .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 5px 14px rgba(184,146,0,0.22);
  }
  .ef-btn-primary:hover { opacity: .9; box-shadow: 0 7px 18px rgba(184,146,0,0.28); }
  .ef-btn-primary:active { transform: scale(.98); }
  .ef-btn-secondary {
    min-height: 40px;
    padding: 10px 20px; border-radius: 8px; border: 1px solid #d5dce8;
    background: #fff; color: #475569; font-weight: 650;
    font-size: .92rem; cursor: pointer; font-family: inherit; font-style: normal;
    transition: background .2s, border-color .2s, color .2s, transform .15s;
  }
  .ef-btn-secondary:hover { border-color: #b6c1d1; color: #111827; background: #f8fafc; }
  .ef-btn-secondary:active { transform: scale(.98); }
  body.darkmode .ef-btn-secondary { background: #202024; border-color: #3f3f46; color: #d4d4d8; }
  body.darkmode .ef-btn-secondary:hover { background: #2a2a2e; border-color: #52525b; color: #f4f4f5; }

  .ef-item { position: relative; }

  /* Geänderte Einträge orange markieren */
  .ef-item.ef-changed { border-color: #f0a500 !important; }

  /* Fehlertext im PW-Modal */
  .ef-pw-error {
    color: #b42318; background: #fff1f0; border: 1px solid rgba(180,35,24,0.16);
    border-radius: 8px; padding: 9px 11px;
    font-size: .84rem; margin-top: 8px; display: none; font-style: normal;
  }
  .ef-pw-error.visible { display: block; }
  body.darkmode .ef-pw-error {
    color: #ffb4aa; background: rgba(180,35,24,0.15); border-color: rgba(255,180,170,0.18);
  }

  /* Ausstehende-Änderungen-Bar – jetzt als Pille im Footer direkt unter dem Edit-Button */
  #ef-root #ef-save-bar {
    display: none;
    background: #f0a500; color: #111;
    border: 1.5px solid #d18b00;
    border-radius: 999px;
    padding: 7px 18px;
    font-size: .8rem; font-weight: 700;
    cursor: pointer; font-family: inherit;
    transition: background .2s, transform .15s, box-shadow .2s;
    touch-action: manipulation;
    box-shadow: 0 2px 8px rgba(240,165,0,0.3);
  }
  #ef-root #ef-save-bar:hover { background: #ffb820; box-shadow: 0 3px 12px rgba(240,165,0,0.45); }
  #ef-root #ef-save-bar:active { transform: scale(.97); }
  #ef-root #ef-save-bar.visible { display: inline-flex; align-items: center; gap: 6px; }

  /* Wochentag-Indikator inline im Datum-Label */
  .ef-day-inline {
    display: inline-block;
    font-size: .72rem; font-weight: 700;
    color: var(--accent);
    background: rgba(240,165,0,0.12);
    border: 1px solid rgba(240,165,0,0.4);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 6px;
    letter-spacing: .3px;
    min-width: 32px; text-align: center;
    opacity: 0; transition: opacity .15s;
  }
  .ef-day-inline.visible { opacity: 1; }
  body.darkmode .ef-day-inline { color: #f0c040; background: rgba(240,165,0,0.15); }
  /* kleiner Format-Hinweis in Labels */
  .ef-form-hint {
    font-weight: 400; font-size: .68rem;
    text-transform: none; color: #aaa; margin-left: 4px;
  }
  body.darkmode .ef-form-hint { color: #777; }

  /* Interessenten-Reset-Button im Edit-Modal */
  .ef-interest-reset-row { margin-bottom: 4px; }
  .ef-btn-reset-interest {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; color: #b07000;
    border: 1.5px solid rgba(240,165,0,0.5);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: .82rem; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: all .2s;
    align-self: flex-start;
  }
  .ef-btn-reset-interest:hover { background: rgba(240,165,0,0.12); border-color: #f0a500; color: #b07000; }
  .ef-btn-reset-interest:disabled { opacity: .4; cursor: not-allowed; }
  body.darkmode .ef-btn-reset-interest { color: #f0c040; }
  body.darkmode .ef-btn-reset-interest:hover { background: rgba(240,165,0,0.15); color: #f0c040; }

  /* ── Responsive ── */
  @media (max-width: 520px) {
    #ef-root { padding: 24px 12px 36px; }
    /* Kürzere Animationen auf Mobile – wirkt direkter und reduziert Ruckler */
    #ef-root .ef-month-body  { transition-duration: .35s; }
    #ef-root .ef-item-detail { transition-duration: .28s; }
    #ef-root .ef-item-row        { grid-template-columns: 1fr auto auto; }
    #ef-root .ef-day-pill        { display: none; }
    #ef-root .ef-date-text       { display: none; }
    #ef-root .ef-detail-grid{ grid-template-columns: 1fr 1fr; }
    #ef-root .ef-month-header { padding: 14px 16px; }
    /* Suggest-Bar: Buttons linksbündig untereinander */
    #ef-root .ef-suggest-bar { flex-direction: column; align-items: flex-start; gap: 6px; }
    #ef-root .ef-suggest-btn { margin-left: 0; }
    /* Modal: 2-Spalten-Felder auf einem Feld untereinander */
    .ef-form-row { grid-template-columns: 1fr; gap: 0; }
    .ef-modal-box { padding: 20px 16px; border-radius: 14px; }
    .ef-modal-overlay { padding: 10px; }
    .ef-modal-actions { flex-direction: column-reverse; }
    .ef-modal-actions .ef-btn-primary,
    .ef-modal-actions .ef-btn-secondary { width: 100%; text-align: center; justify-content: center; }
  }