/* ==========================================================================
   1. Konfiguration & Globale Stile
   ========================================================================== */

@font-face {
    font-family: 'Kaiser';
    src: url('../fonts/kaiser.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --font-style-normal: "Arial", sans-serif;
    --font-style-logo: "Kaiser", Times, serif;
    --font-style-kaiser: "Times New Roman", Times, serif;
    --font-color-base: #5e463a;

    /* EINHEITLICHES SCHRIFTGRÖSSEN-SYSTEM */
    --font-size-small: 12px;
    --font-size-base: 14px;
    --font-size-medium: 16px;
    --font-size-large: 20px;
    --font-size-huge: 26px;

    --background-color-white: #f4efe4;
    --background-color-beige: #efe3ca;

    --color-bg-light: #e8f0e1;
    --color-primary: #5d8c41;
    --color-primary-dark: #4a6735;
    --color-border-subtle: #d8d8d8;

    --color-success-bg: #d4edda;
    --color-success-text: #155724;
    --color-success-border: #c3e6cb;

    --color-error-bg: #f8d7da;
    --color-error-text: #721c24;
    --color-error-border: #f5c6cb;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

html {
    font-family: var(--font-style-normal);
    color: var(--font-color-base);
    font-size: var(--font-size-base);
    overflow-y: auto;
    scrollbar-color: #939a7b #4e5927;
}

body {
    background-image: url("../images/background.jpg"), linear-gradient(180deg, #4292cf 0%, #79980b 100%);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    margin: 0;
}

body.homepage-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

input {
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    width: auto;
}

/* ==========================================================================
   2. Layout Container & Boxen (Das Game-Design)
   ========================================================================== */

.mainBorder {
    position: relative;
    margin: 10px;
    border-radius: 9px;
    background: var(--background-color-beige);
    box-shadow:
        0 -1px 0 0.5px #aa9986, 0 0 0 1px #aa9986, 0 0 0 1.5px #564837,
        0 0 0 2px #615141, 0 0 0 2.5px #615141, 0 0 0 3px #796958,
        0 0 0 3.5px #c2b19d, 0 0 0 4px #c2b19d, 0 0 0 4.5px #c2b19d,
        0 0 0 5px #c2b19d, 0 0 0 5.5px #ccbda9, 0 0 0 6px #e0d5c2,
        0 0 0 6.5px #ebe2d0, 0 0 0 7px #ebe2d0, 0 0 0 7.5px #ebe2d0,
        0 0 0 8px #ebe2d0, 0 0 0 8.5px #beb6a3, 0 0 0 9px #615944,
        0 0 0 9.5px #332a15, inset 0 -2px 8px rgba(121,105,88,0.66),
        0 0 5px 9px rgba(0,0,0,0.66);
}

.sidebox {
    width: 300px;
    margin-bottom: 30px; /* Abstand zwischen Navi/User/Turn Boxen */
}

/* === DIE MITTLERE HAUPTBOX (Mit Scroll-Logik) === */
.mainbox {
    width: 650px;
    background: #ccb99e;
    padding: 4px;
    display: flex;
    flex-direction: column;
    /* VERHINDERT DAS WACHSEN ÜBER DEN BILDSCHIRM HINAUS! */
    max-height: calc(100vh - 180px);
    overflow: hidden; /* Nichts darf aus der Box ragen */
}

.mainbox.wide {
    width: 1100px;
}

.mainbox .title {
    background: #9b8975;
    border-left: 3px solid #605443;
    border-right: 3px solid #605443;
    border-top: 3px solid #5f4e40;
    border-bottom: 3px solid #c0ac93;
    text-shadow: 1px 0 0 #b68363, 1px 1px 0 #b68363, 0 1px 0 #b68363, -1px 1px 0 #5e463a, -1px 0 0 #5e463a, -1px -1px 0 #5e463a, 0 -1px 0 #5e463a, 1px -1px 0 #5e463a;
    padding: 10px;
    color: #f2f2f2;
    border-radius: 10px 10px 0 0;
    font-size: var(--font-size-large);
    font-family: var(--font-style-kaiser);
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* Titel darf nicht mitschrumpfen */
}

/* ÄNDERUNG 1: Der Wrapper muss als Flexbox agieren und min-height: 0 haben */
.mainbox-scroll-wrapper {
    position: relative;
    display: flex;             /* NEU */
    flex-direction: column;    /* NEU */
    flex: 1 1 auto;
    min-height: 0;             /* WICHTIGSTER BEFEHL! Sagt der Box: Du darfst scrollen! */
    overflow: hidden;
}

/* ÄNDERUNG 2: Content passt sich flexibel an */
.mainbox .content {
    flex: 1 1 auto;            /* NEU */
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;

    /* Deine Farben und Ränder bleiben */
    color: #444;
    background: #fdfaf3;
    padding: 20px;
    border-left: 3px solid #716050;
    border-right: 3px solid #716050;
    border-top: 3px solid #c0ac93;
    border-bottom: 3px solid #716050;
    font-size: var(--font-size-base);
}

.mainbox .content::-webkit-scrollbar {
    display: none; /* Chrome Scrollbar ausblenden */
}

/* Die neue optische Custom-Scrollbar (Wird vom JS generiert) */
.custom-scrollbar {
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    width: 6px;
    background: rgba(0,0,0,0.1);
    border-radius: 3px;
    z-index: 100;
    display: none;
}

.custom-scrollbar-thumb {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    background: #6c9924; /* Kaiser Grün */
    border-radius: 3px;
    cursor: pointer;
}


/* ==========================================================================
   3. Tabellen & Listen
   ========================================================================== */

.icon-inline { height: 24px; width: 24px; vertical-align: middle; margin-top: -4px; margin-right: 6px; object-fit: contain; }

table.turn-summary-table { width: 100%; border-collapse: collapse; }
table.turn-summary-table th { border-bottom: 2px solid #bbaea0; padding: 10px 5px; color: var(--color-primary-dark); font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); }
table.turn-summary-table td { padding: 15px 5px; border-bottom: 1px solid #e6decb; vertical-align: middle; color: var(--font-color-base); }
table.turn-summary-table tr:last-child td { border-bottom: none; }

.col-icon { width: 40px; text-align: center; }
.col-icon img { max-height: 24px; width: auto; display: block; margin: 0 auto; }
.col-sign { width: 30px; text-align: center; }
.col-sign img { max-height: 16px; width: auto; vertical-align: middle; display: inline-block; }
.col-sign.positive { color: var(--color-primary); }
.col-sign.negative { color: #a83232; }

.col-value { width: 80px; text-align: right; font-weight: bold; font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); padding-right: 20px !important; }
.col-reason { text-align: left; color: #555; }

.land-title { font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); color: var(--color-primary-dark); display: flex; align-items: center; }
.land-desc { color: #73655a; margin-top: 2px; margin-left: 30px; display: block; font-size: var(--font-size-small); font-family: var(--font-style-normal); }
.land-val { font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); font-weight: bold; color: var(--font-color-base); }

.detail-toggle-wrapper { display: flex; align-items: center; gap: 10px; font-size: var(--font-size-base); font-weight: normal; text-shadow: none; font-family: var(--font-style-normal); }
.toggle-text { color: #e9e3d7; }
.theme-switch { position: relative; display: inline-block; width: 44px; height: 22px; margin: 0; }
.theme-switch input { opacity: 0; width: 0; height: 0; }
.theme-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #5f4e40; transition: .3s; border-radius: 22px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.6); border: 1px solid #332a15; }
.theme-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: #e9e3d7; transition: .3s; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.5); }
input:checked + .theme-slider { background-color: #6c9924; }
input:checked + .theme-slider:before { transform: translateX(22px); background-color: #ffffff; }

.summary-row td { border-top: 1px solid #c7b9a6; background-color: #f6f3eb; padding-top: 12px !important; padding-bottom: 12px !important; }
.resource-group { border-bottom: 15px solid transparent; }
.compact-view .detail-row { display: none; }
.compact-view .summary-row td { border-top: none; background-color: transparent; padding-top: 8px !important; padding-bottom: 8px !important; }
.compact-view .resource-group { border-bottom: 2px solid #e6decb; }
.compact-view .resource-group:last-child { border-bottom: none; }


/* ==========================================================================
   4. Formular Elemente (Buttons & Eingabefelder)
   ========================================================================== */

.action-group { display: flex; gap: 5px; justify-content: flex-end; align-items: center; }
.form-item { height: 28px; box-sizing: border-box; margin: 0; border-radius: 3px; font-family: var(--font-style-normal); font-size: var(--font-size-small); line-height: 26px; outline: none; }

.max-btn { background: #d5c9b5; color: #444; border: 1px solid #8c7f6e; padding: 0 10px; min-width: 70px; width: auto; white-space: nowrap; text-align: center; font-weight: bold; cursor: pointer; box-shadow: inset 0 1px 0 #f4f3f0; transition: all 0.1s; }
.max-btn:hover { background: #e0d6ca; color: #222; }
.max-btn:active { box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); }

.amount-input { width: 65px; padding: 0 8px; border: 1px solid #8c7f6e; background: #e4d8c1; text-align: right; font-family: var(--font-style-kaiser); font-size: var(--font-size-base); font-weight: bold; color: #333; box-shadow: inset 0 2px 5px rgba(0,0,0,0.15); transition: background 0.2s, border-color 0.2s; }
.amount-input:focus { background: #fdfaf3; border-color: #6c9924; }

.action-btn { background: #6c9924; color: #f2f2f2; width: 65px; text-align: center; padding: 0; border: 1px solid #2b3709; box-shadow: inset 0px 2px 1px 0px #b4e151, inset 0px -2px 1px 0px #3e5f13; cursor: pointer; transition: background 0.1s; }
.action-btn:hover { background: #82af3b; border-color: #4b5728; }
.action-btn:active { box-shadow: inset 0px -2px 1px 0px #b4e151, inset 0px 2px 1px 0px #3e5f13; }

.action-btn-danger { background: #a83232; border-color: #4a1117; box-shadow: inset 0px 2px 1px 0px #e46060, inset 0px -2px 1px 0px #5c161d; }
.action-btn-danger:hover { background: #b84040; border-color: #5c161d; }
.action-btn-danger:active { box-shadow: inset 0px -2px 1px 0px #e46060, inset 0px 2px 1px 0px #5c161d; }


/* ==========================================================================
   5. Top Bar (Header im Spiel)
   ========================================================================== */

.top_bar {
    width: 100%; height: 115px;
    background: linear-gradient(to bottom, #e9e3d7 0%, #e9e3d7 33%, #c7b9a6 calc(33% + 1px), rgba(0,0,0,0.3) 33%, rgba(0,0,0,0) calc(33% + 6px), transparent 100%);
}
.top_bar_content { margin: 0 auto; width: 1440px; height: 100%; display: flex; justify-content: space-around; align-items: flex-start; }
.top_bar_left { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin-right: 10px; height: 100%; }

.server_time { display: flex; align-items: center; height: 38px; }
.server_time p { background: #c7b9a6; padding: 2px 36px; border-radius: 13px; color: #73655a; font-weight: bold; font-size: var(--font-size-small); box-shadow: inset 0 0 5px 0 rgba(0,0,0,.66); }

.logo { display: flex; gap: 10px; position: relative; top: 12px; border: solid 1px #615944; border-radius: 6px; background-color: #dacebb; padding: 5px 12px; box-shadow: inset 1px 0 1px rgba(0,0,0,.35), inset -1px 0 1px rgba(0,0,0,.35), inset 0 -2px 1px rgba(0,0,0,.4), inset 0 2px 1px rgba(255,255,255,.3), 0 0 5px 0 rgba(0,0,0,0.66); }
.logo img { height: 44px; width: 44px; }
.logo_image, .logo_description { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.logo_description p { text-shadow: -1px -1px 0px #ebe2d0; }
.logo_description p:first-child { font-family: var(--font-style-logo); font-size: var(--font-size-huge); letter-spacing: 5px; line-height: 26px; font-weight: bold; }
.logo_description > div { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; }
.logo_description > div > p:first-child { font-family: var(--font-style-normal); font-size: var(--font-size-base); letter-spacing: 2px; line-height: 14px; font-weight: normal; }
.logo_description > div > p:last-child { font-family: var(--font-style-normal); font-size: 10px; line-height: 10px; text-shadow: none; }

.top_bar_center { margin-top: 10px; border-radius: 0 0 3px 3px; background: #e9e3d7; box-shadow: 0 0 0 1px #e9e3d7, 0 0 0 2px #e9e3d7, 0 0 0 3px #e5ded2, 0 0 0 4px #e1d9cd, 0 0 0 5px #e0d6ca, 0 0 0 6px #d5c9b5, 0 0 0 7px #c7b9a6, 0 0 0 8px #f4f3f0, 0 0 0 9px #efeeec, 0 0 0 10px #beb2a4, 0 0 11px 8px rgba(0,0,0,1); }
.ressource_box { display: grid; grid-template-columns: repeat(8, 120px); border: 1px solid #c7b9a6; border-bottom: 0; border-right: 0; }
.ressource { transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out; user-select: none; cursor: pointer; height: 28px; display: flex; align-items: center; justify-content: space-between; font-weight: bold; font-size: var(--font-size-base); font-family: var(--font-style-normal); color: #73594d; border-top: 1px solid #f4f3f0; border-right: 1px solid #d5c9b5; border-bottom: 1px solid #c7b9a6; border-left: 1px solid #f4f3f0; background: #e9e3d7; }
.ressource > span { font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); letter-spacing: 0.5px; }
.ressource:hover { background: #efeeec; }
.ressource:active { background: #efeeec; border-bottom: 1px solid #f4f3f0; border-left: 1px solid #d5c9b5; border-top: 1px solid #c7b9a6; border-right: 1px solid #f4f3f0; }
.ressource > :first-child { margin-left: 5px; }
.ressource > :last-child { margin-right: 5px; }
.ressource > img { height: 24px; }

.top_bar_right { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin-left: 10px; height: 38px; }
.buttonFramed { position: relative; width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; z-index: 0; background-image: linear-gradient(to bottom, #b9a479 5%, #f3e2ae 13%, #e4c189 32%, #a4824e 48%, #866435 72%, #ab9154 93%, #c1b07f 100%); border: 1px solid #34220d; color: #fff; cursor: pointer; }
.buttonFramed > img { height: 22px; width: 22px; }
.buttonFramed::before { content: ""; position: absolute; inset: 2px; border-radius: inherit; border: 1px solid #34220d; box-shadow: inset 0 -2px 1px 1px #a1a1a1, inset 2px -1px 1px 0 #e0e0e0, inset -2px -1px 1px 0 #e0e0e0, inset 0 2px 1px 1px #f0f0f0; z-index: -2; }
.buttonFramed::after { content: ""; position: absolute; top: 3px; right: 3px; bottom: 3px; left: 3px; border-radius: inherit; background-image: linear-gradient(to bottom, #e6e6e6, #999); z-index: -1; }
.buttonFramed:hover::after { background-image: linear-gradient(to bottom, #fff, #d0d0d0); }
.buttonFramed:active::after { background-image: linear-gradient(to bottom, #e6e6e6, #666); }


/* ==========================================================================
   6. Middle Bar & Navigation (WICHTIG: DIE FIXIERUNG DES SPIELS)
   ========================================================================== */

.middle_bar {
    margin: 0 auto;
    width: 1440px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 10px;

    /* Die Spiel-Mitte fixiert den Bildschirm und verbietet Browser-Scrolling */
    height: calc(100vh - 115px); /* Rest-Höhe unterhalb der Topbar (115px) */
    overflow: hidden;
}

/* WICHTIG: Die linke und rechte Spalte scrollen mit Browser-Standard (unsichtbar),
   damit man Menüpunkte unten anklicken kann, WENN sie zu lang sind */
.middle_bar > div:first-child,
.middle_bar > div:last-child {
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.middle_bar > div:first-child::-webkit-scrollbar,
.middle_bar > div:last-child::-webkit-scrollbar {
    display: none;
}

.userdata { display: flex; justify-content: space-around; align-items: center; flex-direction: column; gap: 10px; padding: 15px; }
.userdata > span > img { width: 55px; }
.userdata .name { font-size: var(--font-size-medium); font-family: var(--font-style-kaiser); font-weight: bold; }
.pointsbox { display: flex; justify-content: space-around; align-items: center; flex-direction: row; gap: 10px; }
.pointsbox > span > img { width: 30px; }
.pointsbox > span { font-weight: thin; font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); letter-spacing: 1px; display: flex; justify-content: space-around; align-items: center; }

.navigation { display: flex; justify-content: flex-start; align-items: center; flex-direction: column; padding: 15px 15px; width: 100%; }
.hr { width: 100%; height: 1px; background: linear-gradient(to right, transparent 0, #baae98 2%, transparent, #baae98 4%, #baae98 6%, transparent, #baae98 7%, #baae98 8%, transparent, #baae98 9%, #baae98 50%, transparent 50%, transparent 100%), linear-gradient(to left, transparent 0, #baae98 2%, transparent, #baae98 4%, #baae98 6%, transparent, #baae98 7%, #baae98 8%, transparent, #baae98 9%, #baae98 50%, transparent 50%, transparent 100%); }
.navigation > a { display: flex; justify-content: flex-start; align-items: center; flex-direction: row; gap: 5px; width: 100%; font-weight: bold; }
.navigation > a:hover { background: #fff9eb; }
.navigation > a > img { width: 30px; padding: 2px; }
.navigation > a > span { display: flex; align-items: center; height: 25px; width: 25px; font-weight: thin; font-family: var(--font-style-kaiser); font-size: var(--font-size-base); color: var(--font-color-base); }

.zug { display: flex; justify-content: flex-start; align-items: center; flex-direction: column; padding: 25px 15px; width: 100%; gap: 10px; }
.zug img { width: 24px; height: 24px; }
.zug .title { font-family: var(--font-style-kaiser); font-size: var(--font-size-large); letter-spacing: 1px; font-weight: bold; display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 5px; }
.zug .endedturns { font-family: var(--font-style-kaiser); font-size: var(--font-size-small); letter-spacing: 1px; }
.zug .balken { width: 100%; background: #5f4e40; padding: 1px; border-radius: 4px; }
.zug .percento { height: 10px; width: 90%; background: #546e39; box-shadow: inset 0px 0px 0px 2px #71c117; border-radius: 4px; }
.zug .text { display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 5px; font-family: var(--font-style-kaiser); font-size: var(--font-size-base); }

.zug form { display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 6px; margin-top: 5px; }
.zug select { background: #d5c9b5; color: #444; border: 1px solid #8c7f6e; height: 32px; width: 45px; padding: 0; border-radius: 4px; font-size: var(--font-size-medium); font-family: var(--font-style-normal); font-weight: bold; text-align: center; box-shadow: inset 0 1px 0 #f4f3f0; cursor: pointer; outline: none !important; appearance: none; -webkit-appearance: none; -moz-appearance: none; }
.zug select::-ms-expand { display: none; }
.zug select:hover, .zug select:focus, .zug select:active { background: #d5c9b5; color: #444; border: 1px solid #8c7f6e; outline: none !important; box-shadow: inset 0 1px 0 #f4f3f0 !important; }
.zug button { height: 32px; background: #6c9924; color: #fff; padding: 0 20px; border: 1px solid #2b3709; box-shadow: inset 0px 2px 1px 0px #b4e151, inset 0px -2px 1px 0px #3e5f13; border-radius: 4px; font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); font-weight: bold; text-shadow: 1px 1px 0 #3e5f13; cursor: pointer; transition: all 0.1s; display: inline-flex; align-items: center; justify-content: center; }
.zug button:hover { background: #82af3b; border-color: #4b5728; }
.zug button:active { background: #82af3b; box-shadow: inset 0px -2px 1px 0px #b4e151, inset 0px 2px 1px 0px #3e5f13; }


/* ==========================================================================
   7. Faction Select (Volkswahl)
   ========================================================================== */

.faction-select-layout { margin-top: 50px; margin-bottom: 50px; }
.middle_bar.faction-select-layout {
    height: auto;
    min-height: calc(100vh - 115px);
    overflow-y: visible;
}
.faction-select-layout .mainbox {
    max-height: none;
    margin-bottom: 50px;
}
.faction-select-layout .mainbox .content {
    overflow-y: visible;
    max-height: none;
}
.faction-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 20px; padding-bottom: 20px; }
.faction-card { display: flex; flex-direction: column; align-items: center; padding: 15px; text-align: center; cursor: pointer; transition: all 0.2s ease-in-out; height: 100%; margin: 0 !important; background: #efe3ca; border: 2px solid #5f4e40; border-radius: 3px; box-shadow: inset 0 0 30px rgba(94, 70, 58, 0.25), inset 1px 1px 0 rgba(255, 255, 255, 0.3), 0 3px 6px rgba(0, 0, 0, 0.3); }
.faction-card:hover { background: #f7efdc; transform: translateY(-3px); border-color: #4a3b32; }
.faction-card img.faction-crest { max-width: 80px; height: auto; margin-bottom: 10px; }
.faction-card h4 { margin: 5px 0 10px 0; font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); border-bottom: 1px solid #aaa; width: 100%; padding-bottom: 5px; }
.faction-bonus-container { margin-top: auto; width: 100%; }
.bonus-label { color: var(--color-primary-dark); font-weight: bold; font-size: var(--font-size-small); margin-bottom: 5px; text-align: left; padding-left: 10px; }
.bonus-details { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; font-size: var(--font-size-small); color: #444; text-align: left; padding-left: 10px; padding-right: 5px; }
.bonus-details span { flex: 1; line-height: 1.3; }
.bonus-icon { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; margin-top: -2px; }
.faction-card input[type="radio"] { display: none; }
.faction-card:has(input[type="radio"]:checked) { background: #dbead5; border-color: var(--color-primary); box-shadow: inset 0 0 20px rgba(62, 95, 19, 0.2), 0 0 0 2px var(--color-primary); }

.submit-btn { display: block; width: 100%; margin-top: 30px; padding: 15px; background: #6c9924; color: #f2f2f2; font-size: var(--font-size-medium); font-family: var(--font-style-kaiser); letter-spacing: 1px; border: 1px solid #2b3709; box-shadow: inset 0px 2px 1px 0px #b4e151, inset 0px -2px 1px 0px #3e5f13; border-radius: 5px; cursor: pointer; transition: background 0.1s; text-shadow: 1px 1px 0 #3e5f13; }
.submit-btn:hover { background: #82af3b; border-color: #4b5728; }
.submit-btn:active { background: #82af3b; box-shadow: inset 0px -2px 1px 0px #b4e151, inset 0px 2px 1px 0px #3e5f13; }


/* ==========================================================================
   8. Homepage Styles (Unangetastet!)
   ========================================================================== */

.homepage-main, .homepage-content { font-family: var(--font-style-normal); color: #333; }
.homepage-main { width: 960px; margin: 20px auto; position: relative; }
.homepage-header { display: flex; justify-content: space-between; align-items: flex-end; }
.homepage-content { display: flex; flex-direction: column; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); overflow: hidden; background: #fff; }
.content-wrapper { padding: 25px 30px; background: #ffffff; border-top: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle); overflow: hidden; }

.homepage-banner { display: flex; align-items: center; gap: 20px; padding: 10px 20px; font-family: var(--font-style-kaiser); letter-spacing: 0.3rem; color: #333; }
.homepage-banner img { max-width: 80px; height: auto; display: block; }
.homepage-banner > div:last-child { display: flex; flex-direction: column; align-items: center; text-transform: uppercase; }
.homepage-banner span:first-child { font-size: 2.5rem; line-height: 2.5rem; }
.homepage-banner span:last-child { font-size: 1.5rem; line-height: 1.5rem; }
.homepage-charakter { display: flex; align-items: flex-end; }
.homepage-charakter img { max-width: 50px; height: auto; display: block; position: relative; top: 6px; }

.login { padding: 10px; background: var(--color-bg-light); display: flex; justify-content: flex-end; }
.login form { display: flex; gap: 5px; align-items: center; }
#login-form { position: relative; }
.login input[type="text"], .login input[type="password"] { background: #fff !important; border: 1px solid #b8b8b8 !important; color: #333; line-height: 1.5rem; padding: 0.35rem 0.5rem; border-radius: 0.25rem; font-size: var(--font-size-base); }
.login input[type="submit"] { padding: 8px 15px; font-size: var(--font-size-base); background-color: var(--color-primary) !important; color: white !important; border: none !important; border-radius: 5px; font-weight: bold; cursor: pointer; text-transform: uppercase; transition: background-color 0.2s; height: auto; line-height: normal; }
.login input[type="submit"]:hover { background-color: var(--color-primary-dark) !important; }

.registration-container { float: left; width: 300px; margin-right: 30px; margin-bottom: 20px; padding: 20px; background-color: var(--color-bg-light); border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
.registration-container p { margin-bottom: 12px; font-size: var(--font-size-base); }
.registration-form div { margin-bottom: 15px; }
.registration-form label { display: block; margin-bottom: 5px; font-weight: bold; font-family: var(--font-style-normal); font-size: var(--font-size-base); }
.registration-form input[type="text"], .registration-form input[type="email"], .registration-form input[type="password"] { width: 100%; padding: 10px; border: 1px solid #ccc !important; border-radius: 4px; background-color: #fff !important; font-family: var(--font-style-normal); color: #333; font-size: var(--font-size-base); }
.registration-form input:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 2px rgba(93, 140, 65, 0.2); }
.registration-form button[type="submit"] { width: 100%; background-color: var(--color-primary); color: white; padding: 12px 20px; border: none; border-radius: 5px; font-size: var(--font-size-medium); font-weight: bold; text-transform: uppercase; transition: background-color 0.3s ease; cursor: pointer; font-family: var(--font-style-normal); }
.registration-form button[type="submit"]:hover { background-color: var(--color-primary-dark); }

.captcha-wrapper { display: flex; gap: 10px; align-items: center; }
#captcha-image { border: 1px solid var(--color-border-subtle); border-radius: 4px; cursor: pointer; height: 40px; background-color: #fff; image-rendering: pixelated; }
#captcha-image:hover { box-shadow: 0 0 0 2px rgba(93, 140, 65, 0.2); }
.captcha-wrapper input[type="text"] { flex: 1; }

.league-schedule-container { float: left; width: 300px; clear: left; margin-right: 30px; margin-bottom: 20px; padding: 20px; background-color: var(--color-bg-light); border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
.schedule-list { list-style: none; padding: 0; margin: 0; }
.schedule-list li { padding: 10px; margin-bottom: 10px; border-radius: 5px; background: #fff; border: 1px solid var(--color-border-subtle); font-size: var(--font-size-base); }
.schedule-list li:last-child { margin-bottom: 0; }
.round-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; font-family: var(--font-style-normal); }
.schedule-list li.past, .schedule-list li.future { opacity: 0.6; background: #fdfdfd; }
.schedule-list li.current { background-color: var(--color-primary); border-color: var(--color-primary-dark); box-shadow: none; color: white; }
.schedule-list li.current .round-dates { color: white; font-weight: bold; }
.schedule-list li.current .round-title strong { color: white; }
.schedule-list li.current .badge { background-color: white; color: var(--color-primary-dark); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.badge { background-color: var(--color-primary); color: white; padding: 2px 6px; border-radius: 3px; font-size: var(--font-size-small); text-transform: uppercase; font-weight: bold; }

.main-text-content { overflow: hidden; }
.main-text-content h2, .main-text-content h3, .registration-container h2, .league-schedule-container h2 { font-family: var(--font-style-kaiser); color: var(--color-primary-dark); margin-bottom: 15px; }
.main-text-content h2, .main-text-content h3 { margin-top: 25px; padding-bottom: 8px; border-bottom: 2px solid var(--color-bg-light); }
.main-text-content h2:first-child, .main-text-content h3:first-child { margin-top: 0; }
.main-text-content h2 { font-size: 1.9em; }
.main-text-content h3 { font-size: 1.6em; }
.registration-container h2, .league-schedule-container h2 { font-size: 1.8em; text-align: center; margin-top: 0; }
.main-text-content p { margin-bottom: 12px; line-height: 1.6; font-size: var(--font-size-base); }
.intro-text p:last-child { margin-bottom: 0; }
.content-image-right { float: right; max-width: 100px; margin: 0 0 15px 20px; border-radius: 8px; background: var(--color-bg-light); }
.features-list { list-style: none; column-count: 2; column-gap: 30px; font-size: var(--font-size-base); }
.features-list li { display: flex; align-items: flex-start; margin-bottom: 12px; break-inside: avoid-column; }
.list-icon { width: 24px; height: auto; margin-right: 12px; flex-shrink: 0; }

.messages-box { padding: 3px; border-radius: 5px; font-size: var(--font-size-base); }
.messages-box p { margin: 0; }
.messages-box.success { background-color: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border); }
.messages-box.error { background-color: var(--color-error-bg); color: var(--color-error-text); border: 1px solid var(--color-error-border); }
#registration-messages.messages-box { margin-top: 15px; }
#login-form .messages-box { position: absolute; top: 100%; right: 0; margin-top: 8px; z-index: 10; width: 320px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); text-align: left; }
.error-text { color: var(--color-error-text); font-size: var(--font-size-small); display: block; margin-top: 2px; }

.homepage-content > div:last-child { background: #f0f4ec; padding: 10px; border-top: 1px solid #d8d8d8; font-size: var(--font-size-small); }