/* ============================================================
   RESET & VARIABLES
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --coral:       #FF6B6B;
    --coral-dark:  #e85555;
    --orange:      #FF8E53;
    --yellow:      #FFD93D;
    --green:       #6BCB77;
    --green-dark:  #4CAF61;
    --blue:        #4D96FF;
    --purple:      #9B59B6;
    --bg:          #FFF9F0;
    --card-bg:     #FFFFFF;
    --text:        #2D2D2D;
    --text-light:  #777;
    --border:      #EDE8E0;
    --radius:      14px;
    --shadow:      0 4px 20px rgba(0,0,0,0.08);
    --shadow-lg:   0 8px 40px rgba(0,0,0,0.14);
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Nunito', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.6;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3 { font-weight: 800; line-height: 1.2; }
h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
h2 { font-size: clamp(1.2rem, 3vw, 1.6rem); }
h3 { font-size: 1.1rem; }
p  { color: var(--text-light); }

/* ============================================================
   HERO / INDEX PAGE
   ============================================================ */
.page-index { background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 40%, #FFD93D 100%); }

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
}

.hero-content {
    width: 100%;
    max-width: 560px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.hero-eyebrow {
    color: rgba(255,255,255,0.9);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: .5rem;
}

.hero-title {
    font-family: 'Pacifico', cursive;
    color: #fff;
    font-size: clamp(2.4rem, 8vw, 4rem);
    text-shadow: 0 4px 20px rgba(0,0,0,0.15);
    line-height: 1.3;
    margin-bottom: 2rem;
}

/* Einladungs-Details */
.einladung-details {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    text-align: left;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
}
.detail-icon { font-size: 1.3rem; flex-shrink: 0; }

/* Login-Box */
.login-box {
    background: #fff;
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    text-align: left;
}
.login-box h2 { color: var(--text); margin-bottom: .4rem; }
.login-box p  { margin-bottom: 1.25rem; }

.login-form { display: flex; flex-direction: column; gap: 1rem; }

/* ============================================================
   CONFETTI ANIMATION
   ============================================================ */
.confetti-wrapper {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.confetti-wrapper span {
    position: absolute;
    top: -20px;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    animation: fall linear infinite;
    opacity: 0.7;
}
.confetti-wrapper span:nth-child(1)  { left: 10%; background:#fff; animation-duration:4s; animation-delay:0s; }
.confetti-wrapper span:nth-child(2)  { left: 25%; background:#FFD93D; animation-duration:5s; animation-delay:.8s; }
.confetti-wrapper span:nth-child(3)  { left: 40%; background:#6BCB77; animation-duration:3.5s; animation-delay:1.5s; }
.confetti-wrapper span:nth-child(4)  { left: 55%; background:#fff; animation-duration:6s; animation-delay:.3s; }
.confetti-wrapper span:nth-child(5)  { left: 70%; background:#FF8E53; animation-duration:4.5s; animation-delay:1s; }
.confetti-wrapper span:nth-child(6)  { left: 80%; background:#4D96FF; animation-duration:5.5s; animation-delay:.5s; }
.confetti-wrapper span:nth-child(7)  { left: 5%;  background:#FFD93D; animation-duration:7s; animation-delay:2s; }
.confetti-wrapper span:nth-child(8)  { left: 90%; background:#fff; animation-duration:4s; animation-delay:1.8s; }
.confetti-wrapper span:nth-child(9)  { left: 62%; background:#6BCB77; animation-duration:3s; animation-delay:.2s; }
.confetti-wrapper span:nth-child(10) { left: 48%; background:#4D96FF; animation-duration:6.5s; animation-delay:2.5s; }

@keyframes fall {
    0%   { transform: translateY(-20px) rotate(0deg); opacity: .9; }
    100% { transform: translateY(110vh) rotate(540deg); opacity: 0; }
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
    background: #fff;
    border-bottom: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.nav-logo {
    font-family: 'Pacifico', cursive;
    font-size: 1.3rem;
    color: var(--coral);
    text-decoration: none;
}

.nav-links { display: flex; gap: .5rem; align-items: center; }

.nav-link {
    text-decoration: none;
    color: var(--text-light);
    font-weight: 700;
    padding: .45rem .9rem;
    border-radius: 30px;
    transition: all .2s;
    font-size: .95rem;
}
.nav-link:hover, .nav-link.active {
    background: linear-gradient(135deg, var(--coral), var(--orange));
    color: #fff;
}
.nav-logout {
    border: 2px solid var(--border);
    color: var(--text-light);
}
.nav-logout:hover {
    background: var(--border);
    color: var(--text);
}

.nav-burger { display: none; background: none; border: none; font-size: 1.6rem; cursor: pointer; }

/* ============================================================
   INNER PAGE LAYOUT
   ============================================================ */
.page-inner { background: var(--bg); }

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.page-header { margin-bottom: 2rem; }
.page-header h1 { margin-bottom: .4rem; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.card-form { margin-bottom: 2.5rem; }
.card-form h2 { margin-bottom: 1.25rem; }

/* ============================================================
   FORMS
   ============================================================ */
.form-group {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.form-group label {
    font-weight: 700;
    font-size: .9rem;
    color: var(--text);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: .7rem 1rem;
    border: 2px solid var(--border);
    border-radius: 10px;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    color: var(--text);
    background: #fff;
    transition: border-color .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--coral);
}
.form-group textarea { resize: vertical; }

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.form-grid .form-group:nth-child(2) { grid-column: 1 / -1; }
.form-action { grid-column: 1 / -1; }

.optional { font-weight: 400; color: var(--text-light); font-size: .85rem; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .7rem 1.4rem;
    border: none;
    border-radius: 30px;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
}
.btn-primary {
    background: linear-gradient(135deg, var(--coral), var(--orange));
    color: #fff;
    box-shadow: 0 4px 14px rgba(255,107,107,.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,107,107,.45); }

.btn-secondary {
    background: linear-gradient(135deg, var(--blue), #7B9FFF);
    color: #fff;
    box-shadow: 0 4px 14px rgba(77,150,255,.3);
}
.btn-secondary:hover { transform: translateY(-2px); }

.btn-outline {
    background: transparent;
    color: var(--coral);
    border: 2px solid var(--coral);
}
.btn-outline:hover { background: var(--coral); color: #fff; }

.btn-lg { padding: 1rem 2rem; font-size: 1.1rem; width: 100%; }
.btn-sm { padding: .45rem 1rem; font-size: .9rem; }

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
    padding: .85rem 1.1rem;
    border-radius: 10px;
    font-weight: 700;
    margin-bottom: 1.2rem;
    font-size: .95rem;
}
.alert-success { background: #ECFDF5; color: #15803d; border: 1px solid #bbf7d0; }
.alert-error   { background: #FEF2F2; color: #dc2626; border: 1px solid #fecaca; }
.alert-top     { margin-bottom: 1.5rem; }

/* ============================================================
   GRILLPARTY: LISTEN-GRID
   ============================================================ */
.listen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

.liste-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.liste-header {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--border);
}
.liste-icon { font-size: 1.5rem; }
.liste-header h3 { flex: 1; }
.liste-count {
    background: linear-gradient(135deg, var(--coral), var(--orange));
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
    padding: .2rem .6rem;
    border-radius: 20px;
    min-width: 1.8rem;
    text-align: center;
}

.liste-leer { color: var(--text-light); font-style: italic; font-size: .9rem; }

.beitrag-liste { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.beitrag-item {
    display: flex;
    flex-direction: column;
    padding: .6rem .8rem;
    background: var(--bg);
    border-radius: 8px;
    border-left: 3px solid var(--coral);
}
.beitrag-was  { font-weight: 700; color: var(--text); font-size: .95rem; }
.beitrag-name { font-size: .82rem; color: var(--text-light); margin-top: .1rem; }

.empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--text-light);
    font-size: 1.05rem;
}

/* ============================================================
   GESCHENKE: KARTEN-GRID
   ============================================================ */
.geschenke-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.geschenk-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    border: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform .2s, box-shadow .2s;
}
.geschenk-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.geschenk-card.vergeben {
    border-color: #C8C8C8;
    background: #F5F5F5;
    opacity: .72;
    pointer-events: none; /* Buttons inaktiv */
}
.geschenk-card.vergeben .geschenk-titel { color: #888; }
.geschenk-card.vergeben .badge-done { background: var(--green); }

.geschenk-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
}
.geschenk-titel { margin-bottom: .25rem; }
.geschenk-desc  { font-size: .88rem; color: var(--text-light); margin-top: .25rem; }
.geschenk-meta  { font-size: .78rem; color: var(--text-light); display: block; margin-top: .35rem; }

.badge {
    display: inline-block;
    padding: .3rem .75rem;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
    flex-shrink: 0;
}
.badge-done { background: var(--green); color: #fff; }
.badge-open { background: var(--yellow); color: #7a5800; }

.geschenk-status { display: flex; flex-direction: column; gap: .45rem; }
.status-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline; font-size: .9rem; }
.status-label { color: var(--text-light); font-weight: 600; }
.status-value  { font-weight: 700; color: var(--text); }
.status-value.highlight { color: var(--green-dark); }
.status-open   { color: var(--text-light); font-style: italic; }

.geschenk-aktionen { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: auto; }

/* Inline-Formular auf Geschenk-Karte */
.inline-form { width: 100%; margin-top: auto; }
.inline-form-row {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
}
.input-inline {
    flex: 1 1 140px;
    padding: .45rem .75rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: .9rem;
    color: var(--text);
    background: #fff;
    outline: none;
    transition: border-color .2s;
}
.input-inline:focus { border-color: var(--coral); }

/* Neue-Idee Karte */
.geschenk-card-neu {
    border: 2px dashed var(--border);
    background: var(--bg);
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: .75rem;
    min-height: 180px;
}
.geschenk-card-neu h3 { color: var(--text); }
.geschenk-card-neu p  { font-size: .9rem; }
.neu-icon { font-size: 2.5rem; }

/* ============================================================
   MODALS
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(3px);
}

.modal {
    background: #fff;
    border-radius: var(--radius);
    padding: 2rem;
    width: 100%;
    max-width: 440px;
    position: relative;
    box-shadow: var(--shadow-lg);
    animation: pop-in .2s ease;
}

@keyframes pop-in {
    from { transform: scale(.9); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}

.modal h2      { margin-bottom: .4rem; }
.modal-subtitle { margin-bottom: 1.25rem; font-weight: 700; color: var(--text); font-size: .95rem; }

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--border);
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}
.modal-close:hover { background: var(--coral); color: #fff; }

.modal-form { display: flex; flex-direction: column; gap: 1rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ============================================================
   SECTION HEADERS & DIVIDER
   ============================================================ */
.section-header { margin-bottom: 1.5rem; }
.section-header h1 { margin-bottom: .35rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

.section-divider {
    border: none;
    border-top: 2px dashed var(--border);
    margin: 3rem 0 2.5rem;
}

/* Host-Hinweis Banner */
.host-hinweis {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, #fff8e1, #fff3cd);
    border: 2px solid #ffe082;
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: .95rem;
    color: var(--text);
}
.host-hinweis-icon { font-size: 1.8rem; flex-shrink: 0; }
.host-hinweis strong { display: block; margin-bottom: .1rem; }
.host-hinweis span   { color: var(--text-light); }

.optional-badge {
    font-family: 'Nunito', sans-serif;
    font-size: .75rem;
    font-weight: 800;
    background: var(--border);
    color: var(--text-light);
    padding: .2rem .7rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .5px;
    vertical-align: middle;
}

/* ============================================================
   ZUSAGEN
   ============================================================ */
.zusagen-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 2rem;
    align-items: start;
}

.form-zusage { display: flex; flex-direction: column; gap: 1rem; }

.btn-green {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .7rem 1.4rem;
    border: none;
    border-radius: 30px;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: all .2s;
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    color: #fff;
    box-shadow: 0 4px 14px rgba(107,203,119,.35);
}
.btn-green:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(107,203,119,.45); }

.zusagen-liste-wrap {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.zusagen-liste-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--border);
}

.zusagen-liste { list-style: none; display: flex; flex-direction: column; gap: .5rem; }

.zusage-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .8rem;
    background: var(--bg);
    border-radius: 8px;
    border-left: 3px solid var(--green);
    flex-wrap: wrap;
}
.zusage-name       { font-weight: 700; color: var(--text); font-size: .95rem; }
.zusage-begleitung { font-size: .85rem; color: var(--green-dark); font-weight: 700; }

@media (max-width: 700px) {
    .zusagen-layout { grid-template-columns: 1fr; }
}

/* ============================================================
   ADMIN
   ============================================================ */
.admin-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2D2D2D 0%, #4a4a4a 100%);
    padding: 1rem;
}
.admin-login-box {
    background: #fff;
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-lg);
    text-align: center;
}
.admin-login-icon { font-size: 3rem; margin-bottom: .75rem; }
.admin-login-box h1 { margin-bottom: .25rem; }
.admin-login-box p  { margin-bottom: 1.5rem; }
.admin-login-box .login-form { text-align: left; }
.admin-back-link {
    display: block;
    margin-top: 1.25rem;
    color: var(--text-light);
    font-size: .9rem;
    text-decoration: none;
}
.admin-back-link:hover { color: var(--coral); }

.admin-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: .95rem;
}
.admin-table th {
    background: #F7F4EF;
    padding: .75rem 1rem;
    text-align: left;
    font-weight: 800;
    font-size: .85rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 2px solid var(--border);
}
.admin-table td {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: #FDFAF6; }
.admin-table tr.row-vergeben td { color: #999; }

.admin-date { font-size: .82rem; color: var(--text-light); white-space: nowrap; }
.admin-actions { display: flex; gap: .4rem; align-items: center; }

.admin-badge {
    display: inline-block;
    padding: .2rem .65rem;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 800;
}
.admin-badge-essen     { background: #FFF3E0; color: #E65100; }
.admin-badge-getraenke { background: #E3F2FD; color: #1565C0; }
.admin-badge-sonstiges { background: #F3E5F5; color: #6A1B9A; }
.admin-badge-done      { background: #DCFCE7; color: #166534; }
.admin-badge-open      { background: #FEF9C3; color: #854D0E; }

.btn-delete {
    background: #FEE2E2;
    color: #dc2626;
    border: none;
    padding: .35rem .8rem;
    border-radius: 8px;
    font-family: 'Nunito', sans-serif;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
}
.btn-delete:hover { background: #dc2626; color: #fff; }

.btn-reset {
    background: #E0F2FE;
    color: #0369A1;
    border: none;
    padding: .35rem .8rem;
    border-radius: 8px;
    font-family: 'Nunito', sans-serif;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
}
.btn-reset:hover { background: #0369A1; color: #fff; }

.admin-empty {
    text-align: center;
    padding: 3rem;
    color: var(--text-light);
    font-size: 1rem;
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

@media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .form-group:nth-child(2) { grid-column: auto; }

    .nav-links { display: none; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0;
        background: #fff; border-bottom: 2px solid var(--border); padding: .75rem 1rem; gap: .4rem; }
    .nav-links.open { display: flex; }
    .nav-burger { display: block; }

    .listen-grid  { grid-template-columns: 1fr; }
    .geschenke-grid { grid-template-columns: 1fr; }
}

@media (min-width: 641px) and (max-width: 860px) {
    .geschenke-grid { grid-template-columns: 1fr 1fr; }
}