:root {
    --bg: #0d0d0d;
    --card: #1a1a1a;
    --text: #eee;
    --accent: #ff4757;
    --match-full: #f1c40f;
    --match-others: #85752b;
    --locked: #ffcc00;
    --border: #333;
}

body { font-family: 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); margin: 0; overflow-x: hidden; }

header { background: #000; padding: 8px 12px; border-bottom: 1px solid var(--border); position: relative; z-index: 100; }
.header-top-row { display: flex; justify-content: space-between; align-items: center; }
.header-left { display: flex; align-items: center; gap: 8px; }

.toolbar { display: flex; justify-content: center; margin: 8px 0; }
.actions { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }

.btn-icon-round {
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #222; border: 1px solid #444;
    font-style: italic; font-family: serif; font-size: 1rem; font-weight: bold;
    color: #fff; cursor: pointer;
}

.buddy-bar { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 4px 0; }
.buddy-badge {
    padding: 3px 10px; border-radius: 12px; font-size: 0.7rem; font-weight: bold;
    border: 1px solid var(--b-color); color: var(--b-color); cursor: pointer; opacity: 0.4;
}
.buddy-badge.active { opacity: 1; background: var(--b-color); color: #000; }

button { background: #1a1a1a; color: white; border: 1px solid #333; padding: 5px 10px; border-radius: 4px; font-size: 0.7rem; cursor: pointer; }
button.active { background: var(--accent); border-color: var(--accent); }
button.locked { background: var(--locked); color: #000; }

.grid { display: grid; gap: 4px; padding: 10px; min-width: 850px; }
.wrapper { flex: 1; overflow: auto; background: #080808; height: calc(100vh - 120px); }

.stage-header { position: sticky; top: 0; background: #000; padding: 10px; z-index: 20; border-bottom: 2px solid var(--border); font-size: 0.7rem; font-weight: bold; text-align: center; }
.time-label { position: sticky; left: 0; background: #000; z-index: 15; font-size: 0.6rem; color: var(--accent); text-align: center; }

.act { 
    background: var(--card); border-radius: 4px; padding: 4px; 
    font-size: 0.7rem; border: 1px solid var(--border); cursor: pointer; 
    display: flex; flex-direction: column; 
    word-wrap: break-word; 
    overflow-wrap: break-word; 
}
.act-name { font-weight: bold; line-height: 1.1; margin-bottom: 2px; display: block; }
.act-time { font-size: 0.6rem; opacity: 0.7; }

.act.is-me { border: 2px solid var(--accent) !important; box-shadow: inset 3px 0 0 var(--accent); }
.act.is-match-full { background: var(--match-full); color: #000; }
.act.is-match-others { background: var(--match-others); }

.buddy-tags { display: flex; flex-wrap: wrap; gap: 2px; margin-top: auto; }

/* HIER GEÄNDERT: Volle Breite und Umbruch für Namen im Grid */
.tag { 
    background: rgba(0,0,0,0.2); 
    padding: 1px 4px; 
    border-radius: 2px; 
    font-size: 0.55rem; 
    font-weight: bold; 
    white-space: normal; /* Erlaubt Umbruch */
    word-break: break-all;
}

.overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.9); z-index: 1000; display: none; align-items: center; justify-content: center; }
.modal { background: #1a1a1a; padding: 20px; border-radius: 12px; width: 85%; max-width: 400px; border: 1px solid #333; }
.info-highlight-box { background: #222; padding: 10px; border-radius: 8px; font-size: 0.8rem; border-left: 3px solid var(--accent); }
.btn-full { width: 100%; padding: 12px; background: var(--accent); border: none; color: white; font-weight: bold; margin-top: 10px; border-radius: 6px; }

#backupReminder { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: var(--accent); padding: 4px 12px; font-size: 0.7rem; display: none; border-radius: 0 0 8px 8px; font-weight: bold; }

textarea, input[type="text"] { width: 100%; background: #000; color: white; border: 1px solid #333; padding: 10px; box-sizing: border-box; margin: 10px 0; border-radius: 6px; }

.festival-card { background: #222; padding: 15px; border-radius: 8px; text-decoration: none; color: white; display: flex; justify-content: space-between; align-items: center; border: 1px solid #333; margin-bottom: 10px; }
.fest-name { font-weight: bold; color: var(--accent); }

.fest-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fest-meta {
    font-size: 0.65rem;
    color: #888;
    font-weight: normal;
}