/* Gemeinsame Bausteine der öffentlichen Seiten (Startseite, Über uns, Teams, News) */

/* Regenbogen-Schrift für "LGBTQ+" */
.lgbt-highlight {
    background: linear-gradient(90deg, #E40303 0%, #FF8C00 20%, #FFED00 40%, #008026 60%, #004DFF 80%, #750787 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

/* ------------------------------------- Sektionen ------------------------------------- */

html { scroll-behavior: smooth; }

.section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 6rem 16px;
    text-align: center;
}
.section + .section { padding-top: 2rem; }

.section-eyebrow {
    color: #B6FF00;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.section-title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    letter-spacing: 0.03em;
    margin-bottom: 3rem;
}
.section-action { margin-top: 2.5rem; }


/* Seitenkopf für Unterseiten (statt Hero) */
.page-header {
    max-width: 1100px;
    margin: 0 auto;
    padding: 5rem 16px 1rem;
    text-align: center;
}
.page-header h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    letter-spacing: 0.03em;
}
.page-header p {
    color: var(--font-secundary);
    max-width: 40rem;
    margin: 0.75rem auto 0;
}

/* ------------------------------------- Spielerkarten ------------------------------------- */

.team-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.team-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}
.team-row .player-card { flex: 0 1 200px; }
.player-card {
    background: var(--bg-card, #131924);
    border: 1px solid var(--border, #232a36);
    border-radius: 14px;
    padding: 1.5rem 1rem;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.player-card:hover {
    border-color: #B6FF00;
    transform: translateY(-4px);
}
.player-avatar {
    width: 64px;
    height: 64px;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: 'Valorant', sans-serif;
    font-size: 1.5rem;
    color: #EDEAFA;
    background: linear-gradient(135deg, #4D21EB, #1e6fff);
    box-shadow: 0 0 0 3px #05070C, 0 0 0 4px #3A2F6B;
}
.player-name {
    font-weight: 600;
    word-break: break-word;
}
.player-role {
    color: #9C93BD;
    font-size: 0.8rem;
    margin-top: 0.15rem;
}


.empty-state {
    color: var(--font-secundary);
    padding: 3rem 1rem;
    border: 1px dashed var(--border);
    border-radius: 14px;
}

@media (max-width: 600px) {
    .section { padding: 4rem 16px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn, .player-card { transition: none; }
}

/* ------------------------------------- Kleine Bausteine (Mitgliederbereich, Profile) ------------------------------------- */

.back-link {
    display: inline-block;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    color: var(--font-secundary);
    text-decoration: none;
}
.back-link:hover { color: var(--brand-neon-lime); }

.role-chip {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    margin: 0.1rem 0.2rem 0.1rem 0;
    border-radius: 999px;
    font-size: 0.75rem;
    background: rgba(77, 33, 235, 0.2);
    border: 1px solid rgba(77, 33, 235, 0.6);
    color: var(--font);
}

.status {
    font-size: 0.7rem;
    font-family: system-ui, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}
.status--on { background: rgba(182, 255, 0, 0.15); color: var(--brand-neon-lime); }
.status--off { background: rgba(230, 48, 76, 0.15); color: var(--brand-bright-red); }

/* ------------------------------------- Stats (macros/profile.html) ------------------------------------- */

.stat-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}
.stat-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.1rem;
}
.stat-item dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--font-secundary);
    margin-bottom: 0.35rem;
}
.stat-item dd {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.stat-value {
    font-size: 1.35rem;
    font-weight: 800;
    font-family: system-ui, sans-serif;
}
.stat-detail {
    width: 100%;
    font-size: 0.75rem;
    color: var(--font-secundary);
}
.stat-icon { width: 32px; height: 32px; object-fit: contain; }

/* Kompakt: auf der Spielerkarte untereinander, Label links, Wert rechts */
.stat-list--compact {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
}
.stat-list--compact .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    background: rgba(5, 7, 12, 0.5);
}
.stat-list--compact .stat-item dt { margin: 0; font-size: 0.65rem; }
.stat-list--compact .stat-value { font-size: 0.85rem; }
.stat-list--compact .stat-icon { width: 18px; height: 18px; }

/* Spielerkarte mit Profil: verlinkt, mit Mini-Stats */
.player-card--profile {
    color: inherit;
    text-decoration: none;
    display: block;
}
.player-mini {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
    text-align: left;
}

/* Checkbox mit Erklärtext (z. B. "Profil öffentlich", "Premier-Team") */
.toggle {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    font-size: 0.85rem;
    color: var(--font-secundary);
    cursor: pointer;
}
.toggle input {
    margin-top: 0.2rem;
    accent-color: #4D21EB;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.toggle strong { display: block; color: var(--font); }

.muted { color: var(--font-secundary); font-size: 0.9rem; }

/* ------------------------------------- Profilbild (macros/avatar.html) ------------------------------------- */

.player-avatar--sm {
    width: 40px;
    height: 40px;
    margin: 0;
    font-size: 1rem;
    flex-shrink: 0;
}
.player-avatar--lg {
    width: 96px;
    height: 96px;
    margin: 0;
    font-size: 2.4rem;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px #05070C, 0 0 0 5px #3A2F6B;
}
.player-avatar--image {
    overflow: hidden;
    background: var(--bg-elevated);
}
.player-avatar--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Aufklappbarer Bereich für endgültiges Löschen (Teams, Kummerkasten) */
.danger-zone {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid rgba(230, 48, 76, 0.4);
}
.danger-zone summary {
    cursor: pointer;
    color: var(--brand-bright-red);
    font-size: 0.9rem;
}
.danger-zone p {
    margin: 0.75rem 0;
    font-size: 0.85rem;
    color: var(--font-secundary);
}

/* ------------------------------------- Schmale Bildschirme ------------------------------------- */

@media (max-width: 600px) {
    .page-header { padding: 3rem 16px 0.5rem; }
    /* Spielerkarten zu zweit nebeneinander statt einzeln untereinander */
    .team-row { gap: 0.75rem; }
    .team-row .player-card { flex: 0 1 calc(50% - 0.375rem); min-width: 0; padding: 1.1rem 0.7rem; }
    .team-grid { gap: 0.75rem; }
    .player-avatar { width: 52px; height: 52px; font-size: 1.2rem; }
    .player-name { font-size: 0.9rem; }
    .player-role { font-size: 0.8rem; }
    .form-card { padding: 1.5rem 1.1rem; }
    .btn { padding: 0.7rem 1.25rem; }
}

/* Datei-Felder sind von Haus aus recht breit */
input[type="file"] { max-width: 100%; }

/* Verlinkte Namen (macros/user.html) */
.user-link { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(143, 116, 255, 0.6); }
.user-link:hover { color: var(--brand-neon-lime); border-bottom-color: currentColor; }

/* ------------------------------------- Benachrichtigungen (Glocke) ------------------------------------- */

.bell { position: relative; order: 2; margin-left: 0.5rem; }
.bell-button {
    position: relative;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--font);
    cursor: pointer;
}
.bell-button:hover { border-color: #8f74ff; }
.bell-button--ring svg { animation: bell-ring 0.9s ease-in-out; transform-origin: 50% 10%; }
@keyframes bell-ring {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(16deg); }
    30% { transform: rotate(-14deg); }
    45% { transform: rotate(10deg); }
    60% { transform: rotate(-6deg); }
    75% { transform: rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) { .bell-button--ring svg { animation: none; } }
form[data-bell-read-all][hidden] { display: none; }
.bell-button svg { width: 20px; height: 20px; }
.bell-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--brand-red);
    color: #fff;
    font: 700 0.7rem/20px system-ui, sans-serif;
    text-align: center;
}
.bell-count[hidden] { display: none; }
.bell-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 60;
    width: min(360px, calc(100vw - 32px));
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.bell-panel[hidden] { display: none; }
.bell-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
.bell-link { background: none; border: none; color: #8f74ff; font: inherit; font-size: 0.8rem; cursor: pointer; }
.bell-all { display: block; padding: 0.7rem 1rem; text-align: center; font-size: 0.85rem; color: #8f74ff; text-decoration: none; border-top: 1px solid var(--border); }
.bell .notif-list { max-height: min(420px, 60vh); overflow-y: auto; }

.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-item a {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.7rem 1rem;
    color: var(--font-secundary);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    font-family: "Exo 2", system-ui, sans-serif;
}
.notif-item a:hover { background: rgba(77, 33, 235, 0.12); }
.notif-item--unread a { color: var(--font); background: rgba(77, 33, 235, 0.08); }
.notif-kind {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-top: 0.4rem;
    border-radius: 50%;
    background: var(--muted);
}
.notif-item--unread .notif-kind { background: var(--brand-neon-lime); box-shadow: 0 0 8px rgba(182, 255, 0, 0.6); }
.notif-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.notif-text { font-size: 0.88rem; line-height: 1.35; }
.notif-time { font-size: 0.72rem; color: var(--font-secundary); }
.notif-empty { padding: 1rem; color: var(--font-secundary); font-size: 0.85rem; }

.notif-page { max-width: 760px; margin: 0 auto; padding: 2.5rem 16px 4rem; }
.notif-page-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.notif-page h1 { font-size: clamp(1.4rem, 5vw, 2rem); }
.notif-list--page { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.notif-list--page .notif-item:last-child a { border-bottom: none; }
.notif-hint { margin-top: 0.75rem; }

/* "Neu"-Markierung an Inhalten, die man noch nicht geöffnet hat */
.new-tag {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    margin-left: 0.35rem;
    border-radius: 999px;
    background: var(--brand-neon-lime);
    color: #05070C;
    font: 800 0.65rem system-ui, sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}
.new-tag { align-self: flex-start; width: fit-content; }

/* Handy: Liste der Benachrichtigungen über die ganze Breite unter dem Header */
@media (max-width: 900px) {
    .bell-panel {
        position: fixed;
        left: 16px;
        right: 16px;
        top: calc(var(--header-height, 68px) + 8px);
        width: auto;
    }
}

/* Header: Link "Chat" mit Ungelesen-Zähler */
.chat-nav-link { position: relative; }
.chat-nav-count {
    display: inline-block;
    min-width: 18px;
    height: 18px;
    margin-left: 0.3rem;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--brand-red, #ff4655);
    color: #fff;
    font: 700 0.65rem/18px system-ui, sans-serif;
    text-align: center;
    vertical-align: middle;
}
.chat-nav-count[hidden] { display: none; }

.login-remember { margin: 0.25rem 0 1rem; }
.login-remember small { display: block; font-size: 0.75rem; }