/*
 * Modernisiertes CSS für public/kalender.php
 * Frischer Look, außer für den rechten Menübereich (.right)
 *
 * Änderungen/Optimierungen:
 * - Dopplungen entfernt (z. B. doppelte .cell .dots span)
 * - Struktur und Kommentare verbessert
 * - Keine visuell wirksamen Eigenschaften entfernt
 */

/* --- 1. Globale Stile und Variablen --- */
:root{
    --color-primary: #0077cc;
    --color-primary-dark: #005fa3;
    --color-accent: #00cc99;
    --color-background-light: #f4f7f9;
    --color-text-dark: #333;
    --color-text-light: #fff;
    --shadow-subtle: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-hover: 0 8px 20px rgba(0,0,0,0.15);
    --border-radius: 12px;
    --brand-1: #6a5af9;
    --brand-2: #ff7ac6;
}

*{ box-sizing: border-box; }

body{
    margin:0;
    height:100vh;
    display:grid;
    grid-template-columns: 2fr auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color:var(--color-text-dark);
    background-color:var(--color-background-light);
}

/* --- 2. Linker Kalenderbereich (.left) --- */
.left{
    background: var(--color-background-light);
    padding: 50px;
    overflow-y: auto;
}

.calendar-wrap{
    max-width:900px;
    margin:0 auto;
    padding:20px;
    background: var(--color-text-light);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-subtle);
}

/* --- 3. Kalender Navigation --- */
.month-nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    padding:0 10px;
}

.month-nav h2{
    margin:0;
    font-size:1.8rem;
    font-weight:600;
    color:var(--color-primary-dark);
}

.month-nav button{
    background:none;
    border:none;
    font-size:2rem;
    cursor:pointer;
    color:var(--color-primary);
    padding:5px 10px;
    border-radius:8px;
    transition: background-color .2s;
}

.month-nav button:hover{ background-color: rgba(0,119,204,0.1); }

/* --- 4. Kalender Grid --- */
.grid{
    display:grid;
    grid-template-columns: repeat(7,1fr);
    gap:10px;
}

/* Wochentage - Styling für die ersten 7 Elemente */
.grid > div:nth-child(-n+7){
    text-align:center;
    font-weight:700;
    color:var(--color-primary);
    padding-bottom:5px;
}

.cell{
    background: var(--color-text-light);
    padding:10px;
    border-radius: var(--border-radius);
    min-height:100px;
    position:relative;
    cursor:pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all .2s ease;
    border:1px solid #eee;
}

.cell:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    z-index:10;
}

.cell.empty{
    background:transparent;
    box-shadow:none;
    cursor:default;
    border:none;
}

.cell.has-event{
    border:1px solid var(--color-accent);
    background: linear-gradient(135deg, var(--color-text-light) 70%, rgba(0,204,153,0.1));
}

.cell.today{
    border:2px solid var(--color-primary);
    background: linear-gradient(135deg, var(--color-text-light) 70%, rgba(0,119,204,0.1));
}

.cell .daynum{
    position:absolute;
    top:10px;
    right:10px;
    font-weight:700;
    font-size:1.2rem;
    color:var(--color-text-dark);
}

.cell.today .daynum{ color:var(--color-primary); }

/* Dots-Indikator für Events (einmal definiert) */
.cell .dots{
    position:absolute;
    left:10px;
    bottom:10px;
    display:flex;
    gap:4px;
    flex-wrap:wrap;
}
.cell .dots span{
    width:8px;
    height:8px;
    border-radius:50%;
    display:inline-block;
    box-shadow:0 0 3px rgba(0,0,0,0.2);
}


/* Menü */
.menu {
	width:90%;
	max-width:280px;
	list-style:none;
	padding:0;
	margin:0;
}
.menu > li{
    background:#f7f7f7;
    margin-bottom:5px;
    border-radius:4px;
    overflow:hidden;
    cursor:pointer;
    transition: all .3s ease;
}
.menu > li span{ display:block; padding:10px; font-weight:bold; }
.submenu{
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
    padding-left:15px;
    background:#f1f1f1;
}
.submenu a{ display:block; padding:8px; color:#333; text-decoration:none; font-size:.9em; }
.submenu a:hover{ background:#0078ff; color:white; }
.right:hover .submenu{ max-height:500px; }

/* --- 6. Modal und Formular Stile (Modernisiert) --- */
.modal{
    display:none;
    position:fixed;
    inset:0;
    background: rgba(0,0,0,0.6);
    align-items:center;
    justify-content:center;
    z-index:999;
    padding:16px;
}
.modal .panel{
    width:100%;
    max-width:720px;
    border-radius:var(--border-radius);
    padding:25px;
    background:var(--color-text-light);
    box-shadow:var(--shadow-hover);
    max-height:90vh;
    display:flex;
    flex-direction:column;
    position:relative;
	background:
    repeating-linear-gradient(45deg, rgba(238,238,238,0.1) 0 20px, rgba(221,221,221,0.1) 20px 40px),
    repeating-linear-gradient(-45deg, transparent 0 20px, rgba(204,204,204,0.1) 20px 40px),
    #ffffff; /* Deine Hintergrundfarbe */
background-blend-mode: multiply;
}

/* Event-Hintergrund, wenn --event-color gesetzt ist */
.event-details-container[style*="--event-color"]{
    background: linear-gradient(80deg, color-mix(in srgb, var(--event-color) 20%, transparent), var(--color-text-light) 70%, color-mix(in srgb, var(--event-color) 50%, transparent));
    padding:10px;
    border-radius:var(--border-radius);
    box-shadow:2px 5px 10px grey;
    margin:20px 10px;
}
.event-details-container[style*="--event-color"] h3{
    border-left:5px solid var(--event-color);
    padding-left:10px;
}

/* Close Button */
.closeBtn{
    position:absolute;
    top:15px;
    right:20px;
    font-size:1.8rem;
    cursor:pointer;
    color:var(--color-text-dark);
    line-height:1;
    opacity:.7;
    transition:opacity .2s;
}
.closeBtn:hover{ opacity:1; }

/* Accordion */
.accordion{ margin-bottom:15px; border-radius:8px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.1); }
.accordion-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 20px;
    color:var(--color-text-light);
    border:none;
    cursor:pointer;
    font-weight:600;
    font-size:1.1rem;
    background:var(--color-primary);
    width:100%;
}
.accordion-header:hover{ background:var(--color-primary-dark); }
.accordion[style*="--event-color"] .accordion-header{
    background: var(--event-color);
    background-color: var(--event-color);
}
.accordion[style*="--event-color"] .accordion-header:hover{ filter: brightness(0.9); }

.accordion-content{
    background:#fff;
    padding:0 20px;
    max-height:0;
    overflow:hidden;
    transition: max-height .3s ease, padding .3s ease;
}
.accordion-content.open{ max-height:1000px; padding:20px; }

/* Signup-Form */
.signup-form{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap:20px;
    margin-top:15px;
}
.form-group{ display:flex; flex-direction:column; }
.form-group label{ font-weight:500; margin-bottom:5px; font-size:.95rem; }

.signup-form input:not([type="checkbox"]):not([type="radio"]), .signup-form select, .signup-form textarea{
    padding:12px;
    border-radius:8px;
    border:1px solid #ccc;
    width:100%;
    transition: border-color .2s;
}
.signup-form input:focus, .signup-form select:focus, .signup-form textarea:focus{
    border-color:var(--color-primary);
    outline:none;
}
.radio-group, .checkbox-group{ padding-top:10px; }
.radio-group label, .checkbox-group label{ display:inline-flex; align-items:center; margin-right:15px; font-weight:normal; }
.radio-group input, .checkbox-group input{ width:auto !important; margin-right:5px; }

.form-actions{ grid-column: 1 / -1; display:flex; gap:10px; margin-top:20px; justify-content:flex-end; }

.btn{ padding:10px 20px; border-radius:8px; border:none; cursor:pointer; font-weight:600; transition: background-color .2s, opacity .2s; }
.btn.primary{ background:var(--color-primary); color:var(--color-text-light); }
.btn.primary:hover{ background:var(--color-primary-dark); }
.btn.ghost{ background:#e0e0e0; color:var(--color-text-dark); }
.btn.ghost:hover{ background:#ccc; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

/* Notices */
.notice-full{
    padding:15px;
    background:#ffe0e0;
    border-radius:8px;
    color:#cc0000;
    font-weight:700;
    border:1px solid #ffb3b3;
}
.notice-success{
    padding:15px;
    background:#e6ffe6;
    border-radius:8px;
    color:green;
    font-weight:700;
    border:1px solid #b3ffb3;
}

/* --- 7. Responsive Anpassungen --- */
@media (max-width:1024px){
    /* Platz für zukünftige Anpassungen */
}

/* --- 8. Zusätzliche Formular- und Status-Stile --- */
.status-check-box{ margin-top:20px; border:1px solid #ddd; border-radius:8px; overflow:hidden; }
.status-check-header{ font-weight:bold; color:var(--color-primary); padding:10px 15px; background:#f0f8ff; border-bottom:1px solid #ddd; }
.status-check-content{ padding:15px; }
.status-check-content .signup-form{ display:flex; flex-direction:column; gap:10px; }
.status-check-content .signup-form input{ margin-bottom:0; }

.status-result{ margin-top:10px; font-weight:bold; padding:5px 0; }

.notice-success-inline{ color:green; font-weight:bold; margin:5px 0; }
.status-ok{ color:green; font-weight:bold; }
.status-warning{ color:orange; font-weight:bold; }
.status-error{ color:red; font-weight:bold; }

/* Accordion Header Override (wichtiger für Inline-Styles) */
.accordion[style*="--event-color"] .accordion-header{
    background: var(--event-color) !important;
    color: var(--color-text-light);
}