body {
    background-color: #d3d3d3;
    font-family: Arial, Helvetica, sans-serif;
    overflow-x:hidden;
    height: 100%;
}

html {
    height: 99%;
}

.container {

    height: 100%;
}

.header {
    width: 98%;
    margin: 0 auto;
    background-image: linear-gradient(45deg, #3b1063, #46036d);
    padding: 10px;
    text-align: center;
    align-items: center;
    border-radius: 15px;
}

.header h1 {
    position: relative;
    font-size: 2.5em;
    color: #ffffff;
}

.popup {
    position: absolute;
    background-color: #ff0000;
    color: #ffffff;
    padding: 10px;
    border-radius: 10px;
}

.wave-container {
    position: absolute;
    top: 0;
    left: 0;
}

.content {
    position: relative;
    width: 98%;
    margin: 0 auto;
    padding: 10px;
    top: 25px;
    text-align: center;
    align-items: center;
    border-radius: 15px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 15px;
    min-height: 50%;
    height: 80%;
    border-radius: 15px;
    background-image: linear-gradient(-45deg, #9900ff, #5900ff);
}

.beginn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px;
}

.beginn p {
    color: #000000;
    font-size: 1.7em;
}

.login-button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    background-color: #a113cc;
    color: #fff;
    padding: 40px 50px;
    z-index: 1;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
}

.login-button:hover {
    color: #ffffff;
}


.login-button:hover::after {
    z-index: -1;
    content: "";
    display: flex;
    position: absolute;
    transform: translate(-50%, -50%) scale(0);
	width: 100%;
    height: 100%;
    background-color: #700d8f;
    border-radius: 5px;
	animation: scale-up-center 0.2s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}

@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}


@keyframes color-wave {
    0% {
        color: #a113cc;
    }
    50% {
        color: #a113cc;
    }
    100% {
        color: #a113cc;
    }
}

/* modern-lavender-theme */
:root {
    --bg-main: #191220;
    --bg-soft: #261a32;
    --card-bg: rgba(50, 38, 67, 0.86);
    --card-bg-hover: rgba(64, 45, 88, 0.95);
    --surface: rgba(255, 255, 255, 0.08);
    --surface-strong: rgba(255, 255, 255, 0.14);
    --text-main: #f7f1ff;
    --text-muted: #d5c6e8;
    --purple-a: #7c3aed;
    --purple-b: #b65cff;
    --purple-c: #d8b4fe;
    --green: #31d07d;
    --red: #ff4d6d;
    --shadow-soft: 0 18px 45px rgba(10, 5, 22, 0.35);
    --shadow-small: 0 8px 22px rgba(10, 5, 22, 0.22);
    --border-soft: 1px solid rgba(216, 180, 254, 0.22);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--text-main);
    background:
        radial-gradient(circle at top left, rgba(182, 92, 255, 0.24), transparent 34rem),
        radial-gradient(circle at bottom right, rgba(124, 58, 237, 0.18), transparent 38rem),
        linear-gradient(135deg, #17111f 0%, #21172c 48%, #18111f 100%) !important;
    font-family: Inter, Arial, Helvetica, sans-serif;
    min-height: 100vh;
}

.header {
    width: min(98%, 1380px) !important;
    margin: 14px auto 0 !important;
    background: linear-gradient(135deg, rgba(70, 3, 109, 0.96), rgba(124, 58, 237, 0.9), rgba(182, 92, 255, 0.82)) !important;
    border: var(--border-soft);
    border-radius: 22px !important;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(10px);
}

.header h1 {
    color: #ffffff !important;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.34);
    letter-spacing: 0.02em;
}

.container,
.content,
.list-container {
    /* width: min(98%, 1380px) !important; */
}

.content {
    border-radius: 22px !important;
}

.options {
    gap: 12px !important;
}

.options a,
.login-button,
.serverlist-item-button,
.actionbutton,
.save-button,
.thema-bewertung-add-button,
.thema-item-add-button,
.thema-item-ende-button,
.thema-item-remove-button,
.grund-input-bt,
.quicknote-edit,
.editing,
.emoji-trigger-btn {
    border: var(--border-soft) !important;
    box-shadow: var(--shadow-small);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
}

.options a,
.login-button {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.9), rgba(182, 92, 255, 0.86)) !important;
}

.options a:hover,
.login-button:hover,
.serverlist-item-button:hover,
.actionbutton:hover,
.save-button:hover,
.thema-bewertung-add-button:hover,
.thema-item-add-button:hover,
.grund-input-bt:hover,
.quicknote-edit:hover,
.editing:hover,
.emoji-trigger-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(124, 58, 237, 0.28);
}

.options a:hover::after,
.login-button:hover::after {
    background: rgba(255, 255, 255, 0.12) !important;
}

.generalinfo,
.welcome,
.news,
.news-item,
.list-options,
.list-item,
.serverlist-item,
.settings-container,
.settings-item-map-item,
.settings-item-object-item,
.settings-item-object-map,
.settings-item-map,
.settings-item-list,
.thema-item,
.thema-item-bewertung,
.thema-question-container,
.teamupdate,
.abm-item,
.abfrage-container,
.quicknote-contrainer,
.dropdown,
.notification {
    color: var(--text-main) !important;
    background: var(--card-bg) !important;
    border: var(--border-soft) !important;
    box-shadow: var(--shadow-small);
    backdrop-filter: blur(10px);
}

.generalinfo:hover,
.welcome:hover,
.news-item:hover,
.list-item:hover,
.serverlist-item:hover,
.thema-item:hover,
.teamupdate:hover,
.abm-item:hover {
    background: var(--card-bg-hover) !important;
    border-color: rgba(216, 180, 254, 0.42) !important;
}

.serverlist-item,
.list-item,
.teamupdate,
.abm-item,
.thema-item,
.news-item,
.settings-container,
.generalinfo,
.welcome,
.news {
    border-radius: 20px !important;
}

.list-item:hover,
.serverlist-item:hover,
.teamupdate:hover,
.abm-item:hover,
.news-item:hover {
    transform: translateY(-2px) !important;
}

.username,
.serverlist-item-name,
.list-item-name,
.teamupdate-type,
.settings-item-name,
.thema-item-name,
.news h3 {
    color: #ffffff !important;
}

.rolle,
.nebenrollen,
.list-item-rolle,
.teamupdate-singedby,
.sb-link {
    color: #f0dcff !important;
    background: rgba(216, 180, 254, 0.13) !important;
    border: 1px solid rgba(216, 180, 254, 0.18);
}

.sb-link {
    background: transparent !important;
    border: none;
}

.quicknote,
.list-item-quicknote,
.teamupdate-grund,
.teamupdate-date,
.news-item .message_author_date,
.news-item .message_author_name,
.news-item .message_content,
.abfrage-info {
    color: var(--text-muted) !important;
}

input,
select,
textarea,
.name-input,
.date-operator,
.date-input,
.settings-item-general-thing,
.settings-item-general-dropdown,
.settings-item-value-dropdown,
.settings-item-object-item-value,
.thema-item-name-input,
.grund-input {
    color: #261531 !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(216, 180, 254, 0.55) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 6px 16px rgba(10, 5, 22, 0.14);
    outline: none !important;
}

input:focus,
select:focus,
textarea:focus,
.name-input:focus,
.date-input:focus,
.settings-item-general-thing:focus,
.settings-item-general-dropdown:focus,
.settings-item-object-item-value:focus,
.thema-item-name-input:focus,
.grund-input:focus {
    border-color: var(--purple-c) !important;
    box-shadow: 0 0 0 4px rgba(216, 180, 254, 0.23), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

.serverlist-item-button,
.actionbutton,
.save-button,
.thema-bewertung-add-button,
.thema-item-add-button,
.grund-input-bt {
    color: #ffffff !important;
    background: linear-gradient(135deg, #24c875, #31d07d) !important;
}

.thema-item-remove-button,
.thema-item-ende-button {
    color: #ffffff !important;
    background: linear-gradient(135deg, #ff4d6d, #c9184a) !important;
}

.userimage,
.welcome .userimage,
.list-item-image,
.serverlist-item-image,
.news-item .message_author_image,
.user-img {
    border-color: rgba(216, 180, 254, 0.72) !important;
    box-shadow: 0 0 0 4px rgba(216, 180, 254, 0.11), 0 10px 22px rgba(10, 5, 22, 0.28);
}

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    box-shadow: none !important;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--purple-b), var(--purple-a)) !important;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #d8b4fe, #8b5cf6) !important;
}

@media (max-width: 900px) {
    .header h1 {
        font-size: 2em !important;
        top: 0 !important;
    }

    .content,
    .list-container,
    .container {
        width: 96% !important;
    }

    .options {
        grid-template-columns: 1fr !important;
    }
}


body {
    display: flex;
    flex-direction: column;
}

.container {
    min-height: 100vh;
    padding-bottom: 30px;
}

.content {
    padding: clamp(18px, 3vw, 40px) !important;
    background:
        linear-gradient(135deg, rgba(124, 58, 237, 0.82), rgba(182, 92, 255, 0.62)),
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.18), transparent 22rem) !important;
    border: var(--border-soft) !important;
    box-shadow: var(--shadow-soft);
    min-height: 68vh !important;
}

.beginn {
    background: rgba(255, 255, 255, 0.10);
    border: var(--border-soft);
    border-radius: 24px;
    box-shadow: var(--shadow-small);
    backdrop-filter: blur(12px);
}

.beginn p {
    color: #ffffff !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

.login-button {
    border-radius: 18px !important;
    padding: 24px 42px !important;
    font-size: 1.08em;
    letter-spacing: 0.02em;
}

.popup {
    background: linear-gradient(135deg, #ff4d6d, #c9184a) !important;
    box-shadow: var(--shadow-small);
}