/* ═══════════════════════════════════════════════════════
   NVG App — Farbpalette
   ═══════════════════════════════════════════════════════ */

:root {
    /* ── Hauptfarben ── */
    --nvg-green:        #4e7c63;
    --nvg-orange:       #c97d35;
    --nvg-red:          #dc3545;
    --nvg-blue:         #2f4a63;
    --nvg-yellow:       #f0d040;
    --nvg-brown:        #7F7065;

    /* ── Sonderfarben ── */
    --nvg-gold:         #b8960a;
    --nvg-purple:       #5a3a7a;
    --nvg-darkred:      #b83030;

    /* ── Neutral ── */
    --nvg-black:        #1a1a1a;
    --nvg-gray:         #3d3d3d;
    --nvg-darkgreen:    #2f3e35;
    --nvg-lightgray:    #f5f5f5;

    /* ── Helle Varianten (Badges / Bars / Hintergründe) ── */
    --nvg-green-light:  #dff0e8;
    --nvg-orange-light: #fdecd8;
    --nvg-red-light:    #fde8ea;
    --nvg-blue-light:   #dbeafe;
    --nvg-yellow-light: #fdf6c0;
    --nvg-brown-light:  #eeddd0;
    --nvg-gold-light:   #fef6d0;
    --nvg-purple-light: #ede0f5;
    --nvg-gray-light:   #ebebeb;

    /* ── Dunkle Varianten (Hover / Schrift auf hellem Bg) ── */
    --nvg-green-dark:   #3d6150;
    --nvg-green-deep:   #2d4a3c;
    --nvg-orange-dark:  #a86228;
    --nvg-orange-deep:  #7a4010;
    --nvg-red-dark:     #b02838;
    --nvg-red-deep:     #8b1a24;
    --nvg-blue-dark:    #22384f;
    --nvg-blue-deep:    #1e3a5f;
    --nvg-gold-dark:    #927808;
    --nvg-gold-deep:    #6b5500;
    --nvg-purple-dark:  #472d60;
    --nvg-purple-deep:  #3a1f55;
    --nvg-gray-dark:    #3d3d3d;
    --nvg-yellow-deep:  #7a6200;
    --nvg-brown-deep:   #4a2e18;

    /* ── Struktur ── */
    --nvg-card-radius:  18px;
    --nvg-card-shadow:  0 1px 5px rgba(0,0,0,0.09);
}


/* ═══════════════════════════════════════════════════════
   Home-Bereich
   ═══════════════════════════════════════════════════════ */

.ncard-inline {
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 10px;
    display: flex;
    background: white;
    box-shadow: 0 1px 5px rgba(0,0,0,0.09);
}
.ncard-inline-date {
    width: 58px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 15px;
    position: relative;
    z-index: 3;
    box-shadow: 4px 0 12px rgba(0,0,0,0.20);
}
.ncard-inline-date .dow { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 2px; }
.ncard-inline-date .day { font-size: 1.6rem; font-weight: 700; line-height: 1; color: white; }
.ncard-inline-date .mon { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 3px; }
.ncard-inline-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: white;
}
.ncard-inline-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px 12px;
    position: relative;
    z-index: 2;
    background: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.09);
}
.ncard-inline-info { flex: 1; min-width: 0; }
.ncard-inline-title {
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ncard-inline-meta {
    font-size: 0.8rem;
    color: #999;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ncard-inline-bars {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}
.ncard-inline-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    font-size: 0.72rem;
    font-weight: 700;
}
.ncard-inline-bars .ncard-inline-bar:first-child {
    box-shadow: 0 -4px 8px rgba(0,0,0,0.07);
}

.ncard-inline-bar.bar-green, .ev-bar.bar-green  { background: var(--nvg-green-light);  color: var(--nvg-green); }
.ncard-inline-bar.bar-orange, .ev-bar.bar-orange { background: var(--nvg-orange-light); color: var(--nvg-orange-deep); }
.ncard-inline-bar.bar-gray, .ev-bar.bar-gray     { background: var(--nvg-gray-light);   color: #555; }
.ncard-inline-bar.bar-blue, .ev-bar.bar-blue     { background: var(--nvg-blue-light);   color: var(--nvg-blue-deep); }
.ncard-inline-bar.bar-gold, .ev-bar.bar-gold     { background: var(--nvg-gold-light);   color: var(--nvg-gold); }
.ncard-inline-bar.bar-purple, .ev-bar.bar-purple { background: var(--nvg-purple-light); color: var(--nvg-purple); }
.ncard-inline-bar.bar-red, .ev-bar.bar-red       { background: var(--nvg-red-light);    color: var(--nvg-red-deep); }
.ncard-inline-bar.bar-yellow, .ev-bar.bar-yellow { background: var(--nvg-yellow-light); color: var(--nvg-yellow-deep); }
.ncard-inline-bar.bar-brown, .ev-bar.bar-brown   { background: var(--nvg-brown-light);  color: var(--nvg-brown-deep); }


/* ═══════════════════════════════════════════════════════
   Event list Bereich
   ═══════════════════════════════════════════════════════ */

.ev-card { background: white; border-radius: 18px; overflow: hidden; margin-bottom: 10px; box-shadow: 0 1px 5px rgba(0,0,0,0.09); }

.ev-header {display: flex; align-items: center; gap: 10px; padding: 11px 14px 10px;}
.ev-header.h-default { background: white; }
.ev-header.h-green   { background: var(--nvg-green); }
.ev-header.h-orange  { background: var(--nvg-orange); }
.ev-header.h-privat  { background: var(--nvg-gray); }
.ev-header.h-blue    { background: var(--nvg-blue); }
.ev-header.h-red     { background: var(--nvg-darkred); }
.ev-header.h-guild  { background: var(--nvg-blue); }

.ev-date-num    { font-size: 1.5rem; font-weight: 700; color: white; line-height: 1; }
.ev-date-detail { display: flex; flex-direction: column; gap: 1px; }
.ev-date-dow    { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.ev-date-mon    { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.ev-sep         { width: 1px; height: 28px; background: rgba(255,255,255,0.25); flex-shrink: 0; }
.ev-strip-title {flex: 1 1 auto; min-width: 0; font-weight: 500; font-size: 1rem; color: white; line-height: 1.3; white-space: normal; word-break: break-word;}

.ev-header.h-default .ev-date-num    { color: #1a1a1a; }
.ev-header.h-default .ev-date-dow    { color: #aaa; }
.ev-header.h-default .ev-date-mon    { color: #aaa; }
.ev-header.h-default .ev-strip-title { color: #1a1a1a; }
.ev-header.h-default .ev-sep         { background: #e0e0e0; }

.ev-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 7px; }
.ev-meta-body { font-size: 0.95rem; color: #555; display: flex; flex-direction: column; gap: 3px; }
.ev-meta-body small { display: flex; align-items: center; gap: 5px; }
.ev-meta-body i { color: #bbb; font-size: 0.95rem; }

.bus-banner { background: #f5f5f5; border-radius: 12px; overflow: hidden; }
.bus-banner-top { padding: 9px 12px; display: flex; flex-direction: column; gap: 5px; }
.bus-row { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; color: #444; }
.bus-row .lbl  { color: #aaa; font-size: 0.8rem; min-width: 72px; }
.bus-row .val  { font-weight: 500; color: var(--nvg-green); }
.bus-row .count { margin-left: auto; font-size: 0.8rem; color: #aaa; font-weight: 600; }
.bus-progress { height: 7px; }
.bus-progress .progress-bar { transition: none; }
.event-status { margin-bottom: 0; }


/* ═══════════════════════════════════════════════════════
   Helferdienste
   ═══════════════════════════════════════════════════════ */

.helper-event-banner {
    background: var(--nvg-blue);
    border-radius: 16px;
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.helper-event-banner-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    background: transparent;
    width: 100%;
    border-radius: 0;
    text-align: left;
}
.helper-event-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: white;
    margin: 0 0 2px;
}
.helper-event-sub {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.45);
    margin: 0;
}
.helper-event-chevron {
    color: rgba(255,255,255,0.4);
    font-size: 1rem;
    flex-shrink: 0;
}

.helper-card {
    background: white;
    border-radius: 18px;
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: var(--nvg-card-shadow);
}
.helper-card-body { padding: 14px 16px 12px; }
.helper-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.helper-card-title {
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0 0 3px;
    color: #1a1a1a;
}
.helper-card-meta {
    font-size: 0.85rem;
    color: #999;
    margin: 0 0 2px;
}
.helper-card-desc {
    font-size: 1rem;
    color: #aaa;
    margin: 0;
}
.helper-card-badge {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 50px;
    flex-shrink: 0;
    margin-left: 10px;
    white-space: nowrap;
}
.helper-card-badge.open   { background: var(--nvg-gray-light); color: var(--nvg-gray); }
.helper-card-badge.joined { background: var(--nvg-green-light); color: var(--nvg-green-dark); }
.helper-card-badge.full   { background: var(--nvg-red-light);   color: var(--nvg-red-dark); }

.helper-progress {
    height: 8px;
    border-radius: 99px;
    background: #ebebeb;
    overflow: hidden;
    margin-bottom: 12px;
}
.helper-progress-bar {
    height: 100%;
    border-radius: 99px;
    background: var(--nvg-green);
}
.helper-progress-bar.full { background: var(--nvg-red); }

.helper-status-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 10px
}
.helper-status-bar.joined  { background: var(--nvg-green-light); color: var(--nvg-green-dark); }
.helper-status-bar.pending { background: var(--nvg-orange-light); color: var(--nvg-orange-deep); }

.helper-card.is-full { opacity: 0.6; }


/* ═══════════════════════════════════════════════════════
   News-Kacheln
   ═══════════════════════════════════════════════════════ */

.news-card {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--nvg-card-shadow);
    margin-bottom: 10px;
    background: white;
}
.news-card-header {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
}

.news-card-header.unread { background: var(--nvg-blue); }
.news-card-header.read   { background: var(--nvg-gray-light); }
.news-card-header.read .news-card-title { color: var(--nvg-black); }
.news-card-header.read .news-card-date  { color: #999; }
.news-card-header.read .news-edit-btn   { background: rgba(0,0,0,0.07); color: var(--nvg-black); }
.news-card-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.news-card-title {
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
    color: white;
    white-space: normal;
    word-break: break-word;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news-card-meta-block {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.news-card-date {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
    text-align: right;
    line-height: 1.4;
}
.news-edit-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.15);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0;
}
.news-card-body {
    background: white;
    padding: 12px 16px 14px;
}
.news-content {
    font-size: 0.88rem;
    color: #444;
    line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════
   Fristen & Termine
   ═══════════════════════════════════════════════════════ */

.deadline-card {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--nvg-card-shadow);
    margin-bottom: 10px;
}
.deadline-card-header {
    padding: 14px 16px 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.deadline-card-header.dl-future  { background: var(--nvg-blue); }
.deadline-card-header.dl-soon    { background: var(--nvg-orange); }
.deadline-card-header.dl-overdue { background: var(--nvg-red); }
.deadline-card-header.dl-past    { background: var(--nvg-gray); }

.deadline-card-info { flex: 1; min-width: 0; }
.deadline-card-title {
    font-size: 1rem;
    font-weight: 500;
    color: white;
    margin: 0 0 3px;
    white-space: normal;
    word-break: break-word;
}

.deadline-card-date {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.6);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.deadline-card-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.deadline-edit-btn, .deadline-edit-btn-dark {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.deadline-edit-btn          { background: rgba(255,255,255,0.15); color: white; }
.deadline-edit-btn-dark     { background: rgba(0,0,0,0.08);       color: var(--nvg-black); }
.deadline-card-body {
    background: white;
    padding: 12px 16px 14px;
}
.deadline-card-desc {
    font-size: 0.88rem;
    color: #555;
    margin: 0 0 4px;
}
.deadline-card-location {
    font-size: 0.82rem;
    color: #999;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}