@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;
    --font-size-small: 1.2rem;
    --font-size-base: 1.4rem;
    --font-size-medium: 1.6rem;
    --font-size-large: 2.0rem;
    --font-size-huge: 2.6rem;

    --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; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

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

body { font-size: var(--font-size-base); background-image: url("../images/v2/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; }
textarea, select { color: inherit; }
.mainBorder {
    position: relative; margin: 1.0rem; border-radius: 0.9rem; background: var(--background-color-beige);
    box-shadow: 0 -0.1rem 0 0.05rem #aa9986, 0 0 0 0.1rem #aa9986, 0 0 0 0.15rem #564837, 0 0 0 0.2rem #615141, 0 0 0 0.25rem #615141, 0 0 0 0.3rem #796958, 0 0 0 0.35rem #c2b19d, 0 0 0 0.4rem #c2b19d, 0 0 0 0.45rem #c2b19d, 0 0 0 0.5rem #c2b19d, 0 0 0 0.55rem #ccbda9, 0 0 0 0.6rem #e0d5c2, 0 0 0 0.65rem #ebe2d0, 0 0 0 0.7rem #ebe2d0, 0 0 0 0.75rem #ebe2d0, 0 0 0 0.8rem #ebe2d0, 0 0 0 0.85rem #beb6a3, 0 0 0 0.9rem #615944, 0 0 0 0.95rem #332a15, inset 0 -0.2rem 0.8rem rgba(121,105,88,0.66), 0 0 0.5rem 0.9rem rgba(0,0,0,0.66);
}

.sidebox { width: 30.0rem; margin-bottom: 3.0rem; }
.mainbox { width: 65.0rem; background: #ccb99e; padding: 0.4rem; display: flex; flex-direction: column; max-height: calc(100vh - 18.0rem); overflow: hidden; }
.mainbox.wide { width: 110.0rem; }
.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: 1.0rem; color: #f2f2f2; border-radius: 1.0rem 1.0rem 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; }

.mainbox-scroll-wrapper { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.mainbox .content { flex: 1 1 auto; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; color: #444; background: #fdfaf3; padding: 2.0rem; 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; }

.custom-scrollbar { position: absolute; top: 0.4rem; right: 0.4rem; bottom: 0.4rem; width: 0.6rem; background: rgba(0,0,0,0.1); border-radius: 0.3rem; z-index: 100; display: none; }
.custom-scrollbar-thumb { position: absolute; top: 0; right: 0; width: 100%; background: #6c7a2e; border-radius: 0.3rem; cursor: pointer; }
.kw-scroll-wrap { position: relative; }
.icon-inline { height: 2.4rem; width: 2.4rem; vertical-align: middle; margin-top: -0.4rem; margin-right: 0.6rem; object-fit: contain; }

table.turn-summary-table { width: 100%; border-collapse: collapse; }
table.turn-summary-table th { border-bottom: 2px solid #bbaea0; padding: 1.0rem 0.5rem; color: var(--color-primary-dark); font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); }
table.turn-summary-table td { padding: 1.5rem 0.5rem; 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: 4.0rem; text-align: center; }
.col-icon img { max-height: 2.4rem; width: auto; display: block; margin: 0 auto; }
.col-sign { width: 3.0rem; text-align: center; }
.col-sign img { max-height: 1.6rem; width: auto; vertical-align: middle; display: inline-block; }
.col-sign.positive { color: var(--color-primary); }
.col-sign.negative { color: #a83232; }

.col-value { width: 8.0rem; text-align: right; font-weight: bold; font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); padding-right: 2.0rem !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: 0.2rem; margin-left: 3.0rem; 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: 1.0rem; font-size: var(--font-size-base); font-weight: normal; text-shadow: none; font-family: var(--font-style-normal); }
.toggle-text { color: #e9e3d7; }
.theme-switch-wrap { display: inline-flex; align-items: center; gap: 0.6rem; }
.theme-switch-label { font-family: var(--font-style-kaiser); font-size: 1.25rem; color: #73655a; letter-spacing: 0.03rem; min-width: 3.6rem; }
.theme-switch { position: relative; display: inline-block; width: 4.4rem; height: 2.2rem; 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: 2.2rem; box-shadow: inset 0 2px 5px rgba(0,0,0,0.6); border: 1px solid #332a15; }
.theme-slider:before { position: absolute; content: ""; height: 1.6rem; width: 1.6rem; left: 0.2rem; bottom: 0.2rem; background-color: #f7d977; transition: background-color .3s, box-shadow .3s, transform .3s; border-radius: 50%; box-shadow: 0 0 0.5rem rgba(247,217,119,0.75), 0 1px 3px rgba(0,0,0,0.5); }
input:checked + .theme-slider { background-color: #46608f; }
input:checked + .theme-slider:before { transform: translateX(2.2rem); background-color: #eee7d2; box-shadow: inset -0.5rem 0.15rem 0 -0.05rem #46608f, 0 1px 3px rgba(0,0,0,0.5); }

.summary-row td { border-top: 1px solid #c7b9a6; background-color: #f6f3eb; padding-top: 1.2rem !important; padding-bottom: 1.2rem !important; }
.resource-group { border-bottom: 1.5rem solid transparent; }
.compact-view .detail-row { display: none; }
.compact-view .summary-row td { border-top: none; background-color: transparent; padding-top: 0.8rem !important; padding-bottom: 0.8rem !important; }
.compact-view .resource-group { border-bottom: 2px solid #e6decb; }
.compact-view .resource-group:last-child { border-bottom: none; }
.action-group { display: flex; gap: 0.5rem; justify-content: flex-end; align-items: center; }
.form-item { height: 2.8rem; box-sizing: border-box; margin: 0; border-radius: 0.3rem; font-family: var(--font-style-normal); font-size: var(--font-size-small); line-height: 2.6rem; outline: none; }

.max-btn { background: #e6d9bd; color: #4a3720; border: 1px solid #b6a17e; border-radius: 2px; padding: 0 1.0rem; min-width: 7.0rem; width: auto; white-space: nowrap; text-align: center; font-family: var(--font-style-kaiser); cursor: pointer; box-shadow: inset 0 1px 0 #f7efdb; transition: all 0.12s; }
.max-btn:hover { background: #efe6cd; color: #4a3720; border-color: #9a865f; }
.max-btn:active { box-shadow: inset 0 2px 3px rgba(90,70,30,0.2); }
.max-btn-count { font-weight: normal; }

.amount-input { width: 6.5rem; padding: 0 0.8rem; 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: #6c7a2e; }
.action-btn { background: #6c7a2e; color: #f4ead2; width: 6.5rem; text-align: center; padding: 0; border: 1px solid #4c561d; border-radius: 2px; box-shadow: inset 0 -0.15rem 0 rgba(0,0,0,0.16); font-family: var(--font-style-kaiser); cursor: pointer; transition: background 0.12s; }
.action-btn:hover { background: #7b8a36; border-color: #4c561d; }
.action-btn:active { box-shadow: inset 0 0.15rem 0.25rem rgba(0,0,0,0.28); }

.action-btn-danger { background: #a83232; color: #f4ead2; border-color: #7a1f24; box-shadow: inset 0 -0.15rem 0 rgba(0,0,0,0.2); }
.action-btn-danger:hover { background: #b84040; border-color: #7a1f24; }
.action-btn-danger:active { box-shadow: inset 0 0.15rem 0.25rem rgba(0,0,0,0.3); }
.top_bar { width: 100%; height: 11.5rem; 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: 144.0rem; 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: 1.0rem; height: 100%; }

.server_time { display: flex; align-items: center; height: 3.8rem; }
.server_time p { background: #c7b9a6; padding: 0.2rem 3.6rem; border-radius: 1.3rem; color: #73655a; font-weight: bold; font-size: var(--font-size-small); box-shadow: inset 0 0 0.5rem 0 rgba(0,0,0,.66); }

.logo { display: flex; gap: 1.0rem; position: relative; top: 1.2rem; border: solid 1px #615944; border-radius: 0.6rem; background-color: #dacebb; padding: 0.5rem 1.2rem; box-shadow: inset 0.1rem 0 0.1rem rgba(0,0,0,.35), inset -0.1rem 0 0.1rem rgba(0,0,0,.35), inset 0 -0.2rem 0.1rem rgba(0,0,0,.4), inset 0 0.2rem 0.1rem rgba(255,255,255,.3), 0 0 0.5rem 0 rgba(0,0,0,0.66); }
.logo img { height: 4.4rem; width: 4.4rem; }
.logo_image, .logo_description { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.logo_description p { text-shadow: -0.1rem -0.1rem 0rem #ebe2d0; }
.logo_description p:first-child { font-family: var(--font-style-logo); font-size: var(--font-size-huge); letter-spacing: 0.5rem; line-height: 2.6rem; 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: 0.2rem; line-height: 1.4rem; font-weight: normal; }
.logo_description > div > p:last-child { font-family: var(--font-style-normal); font-size: 1.0rem; line-height: 1.0rem; text-shadow: none; }

.alpha-badge { color: #a83232; font-weight: bold; background: #fdf3f3; padding: 0.1rem 0.4rem; border: 1px solid #a83232; border-radius: 0.3rem; border-bottom: 2px solid #a83232; }
.version-badge { display: inline-block; font-weight: bold; font-size: 1.0rem; line-height: 1.0rem; letter-spacing: 0.04rem; color: #4a3720; background: rgba(255,255,255,0.30); padding: 0.1rem 0.4rem; border: 1px solid #a9926f; border-radius: 0.3rem; border-bottom: 2px solid #9c8763; text-decoration: none; cursor: pointer; transition: background 0.12s; }
.version-badge:hover, .version-badge:focus { background: rgba(255,255,255,0.55); outline: none; }

.top_bar_center { margin-top: 1.0rem; border-radius: 0 0 0.3rem 0.3rem; background: #e9e3d7; box-shadow: 0 0 0 0.1rem #e9e3d7, 0 0 0 0.2rem #e9e3d7, 0 0 0 0.3rem #e5ded2, 0 0 0 0.4rem #e1d9cd, 0 0 0 0.5rem #e0d6ca, 0 0 0 0.6rem #d5c9b5, 0 0 0 0.7rem #c7b9a6, 0 0 0 0.8rem #f4f3f0, 0 0 0 0.9rem #efeeec, 0 0 0 1.0rem #beb2a4, 0 0 1.1rem 0.8rem rgba(0,0,0,1); }
.ressource_box { display: grid; grid-template-columns: repeat(8, 12.0rem); border: 1px solid #c7b9a6; border-bottom: 0; border-right: 0; }
.ressource { position: relative; transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out; user-select: none; cursor: pointer; height: 2.8rem; 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; }
.res-tt { display: none; position: absolute; top: calc(100% + 0.7rem); left: 50%; transform: translateX(-50%); z-index: 3000; width: 24rem; background: #faf3e2; border: 1px solid #a9926f; border-radius: 0.3rem; box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.35), inset 0 0 0 1px #e8dcc0; padding: 0.8rem 1.0rem; font-size: 1.25rem; font-weight: normal; font-family: var(--font-style-normal); color: #4a3720; line-height: 1.45; text-align: left; white-space: normal; cursor: default; pointer-events: none; }
.res-tt strong { display: block; font-family: var(--font-style-kaiser); font-size: 1.4rem; color: var(--color-primary-dark); margin-bottom: 0.3rem; border-bottom: 1px solid #e6decb; padding-bottom: 0.3rem; }
.res-tt::before { content: ""; position: absolute; top: -0.5rem; left: 50%; transform: translateX(-50%) rotate(45deg); width: 0.9rem; height: 0.9rem; background: #faf3e2; border-left: 1px solid #a9926f; border-top: 1px solid #a9926f; }
.ressource:hover .res-tt { display: block; }
.res-tt-warn { display: block; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid #e6decb; color: #a83232; font-weight: bold; }
.ressource:nth-child(8n+1) .res-tt { left: 0; transform: none; }
.ressource:nth-child(8n+1) .res-tt::before { left: 3.5rem; }
.ressource:nth-child(8n) .res-tt { left: auto; right: 0; transform: none; }
.ressource:nth-child(8n) .res-tt::before { left: auto; right: 3.5rem; }
.ressource > span { font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); letter-spacing: 0.05rem; }
.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: 0.5rem; }
.ressource > :last-child { margin-right: 0.5rem; }
.ressource > img { height: 2.4rem; }

.top_bar_right { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; margin-left: 1.0rem; height: 100%; }
.top_bar_actions { display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; height: 3.8rem; }
.reich_info { display: flex; flex-direction: column; gap: 0.1rem; position: relative; top: 1.2rem; min-width: 18.0rem; border: solid 1px #615944; border-radius: 0.6rem; background-color: #dacebb; padding: 0.4rem 1.2rem; box-shadow: inset 0.1rem 0 0.1rem rgba(0,0,0,.35), inset -0.1rem 0 0.1rem rgba(0,0,0,.35), inset 0 -0.2rem 0.1rem rgba(0,0,0,.4), inset 0 0.2rem 0.1rem rgba(255,255,255,.3), 0 0 0.5rem 0 rgba(0,0,0,0.66); }
.reich_row { display: grid; grid-template-columns: 1.5rem 1fr auto; align-items: center; gap: 0.6rem; font-family: var(--font-style-normal); font-size: var(--font-size-small); line-height: 1.5rem; color: #4a3720; }
.reich_row img { height: 1.5rem; width: 1.5rem; }
.reich_row .ri-label { letter-spacing: 0.05rem; text-shadow: -0.1rem -0.1rem 0rem #ebe2d0; }
.reich_row .ri-value { font-weight: bold; font-variant-numeric: tabular-nums; text-shadow: -0.1rem -0.1rem 0rem #ebe2d0; }
.reich_row .ri-sub { font-weight: normal; font-size: 1.0rem; color: #73655a; }
.reich_row.ri-online .ri-value { color: var(--color-primary-dark); }
.w2-phase { background: #faf3e2; border: 1px solid #b6a17e; border-radius: 2px; }
.w2-act { color: #4a3720; font-family: var(--font-style-kaiser); }
.w2-title.is-win { color: #55701f; }
.w2-title.is-draw { color: #7a6a52; }
.w2-title.is-loss { color: #a83232; }
.buttonFramed { position: relative; width: 3.2rem; height: 3.2rem; 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: 2.2rem; width: 2.2rem; }
.buttonFramed::before { content: ""; position: absolute; inset: 0.2rem; border-radius: inherit; border: 1px solid #34220d; box-shadow: inset 0 -0.2rem 0.1rem 0.1rem #a1a1a1, inset 0.2rem -0.1rem 0.1rem 0 #e0e0e0, inset -0.2rem -0.1rem 0.1rem 0 #e0e0e0, inset 0 0.2rem 0.1rem 0.1rem #f0f0f0; z-index: -2; }
.buttonFramed::after { content: ""; position: absolute; top: 0.3rem; right: 0.3rem; bottom: 0.3rem; left: 0.3rem; 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); }
.middle_bar { margin: 0 auto; width: 144.0rem; display: flex; justify-content: space-between; align-items: flex-start; padding-top: 1.0rem; height: calc(100vh - 11.5rem); overflow: hidden; }
.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: 1.0rem; padding: 1.5rem; }
.userdata > span > img { width: 5.5rem; }
.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: 1.0rem; }
.pointsbox > span > img { width: 3.0rem; }
.pointsbox > span { font-weight: thin; font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); letter-spacing: 0.1rem; display: flex; justify-content: space-around; align-items: center; }

.navigation { display: flex; justify-content: flex-start; align-items: center; flex-direction: column; padding: 1.5rem; 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: 0.5rem; width: 100%; font-weight: bold; }
.navigation > a:hover { background: #fff9eb; }
.navigation > a > img { width: 3.0rem; padding: 0.2rem; }
.navigation > a > span { display: flex; align-items: center; height: 2.5rem; 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: 2.5rem 1.5rem; width: 100%; gap: 1.0rem; }
.zug img { width: 2.4rem; height: 2.4rem; }
.zug .title { font-family: var(--font-style-kaiser); font-size: var(--font-size-large); letter-spacing: 0.1rem; font-weight: bold; display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 0.5rem; }
.endedturns { font-family: var(--font-style-normal); font-size: var(--font-size-small); color: #555; border-top: 1px solid #c7b9a6; padding-top: 0.5rem; width: 100%; text-align: center; }
.zug .balken { width: 100%; background: #5f4e40; padding: 0.1rem; border-radius: 0.4rem; }
.percento { height: 1.0rem; background: #6f8b34; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.12); border-radius: 2px; }
.transition-width { transition: width 0.5s ease-in-out; }
.zug .text { display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 0.5rem; 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: 0.6rem; margin-top: 0.5rem; }
.zug select { background: #d5c9b5; color: #444; border: 1px solid #8c7f6e; height: 3.2rem; width: 4.5rem; padding: 0; border-radius: 0.4rem; 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: 3.2rem; background: #6c7a2e; color: #fff; padding: 0 2.0rem; border: 1px solid #2b3709; box-shadow: inset 0px 2px 1px 0px #6c7a2e, inset 0px -2px 1px 0px #3e5f13; border-radius: 0.4rem; 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: #7b8a36; border-color: #4b5728; }
.zug button:active { background: #7b8a36; box-shadow: inset 0px -2px 1px 0px #6c7a2e, inset 0px 2px 1px 0px #3e5f13; }
.faction-select-layout { margin-top: 5.0rem; margin-bottom: 5.0rem; }
.middle_bar.faction-select-layout { height: auto; min-height: calc(100vh - 11.5rem); overflow-y: visible; }
.faction-select-layout .mainbox { max-height: none; margin-bottom: 5.0rem; }
.faction-select-layout .mainbox .content { overflow-y: visible; max-height: none; }
.faction-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3.0rem; margin-top: 2.0rem; padding-bottom: 2.0rem; }
.faction-card { display: flex; flex-direction: column; align-items: center; padding: 1.3rem; text-align: center; cursor: pointer; transition: all 0.15s ease-in-out; height: 100%; margin: 0 !important; background: #f4ead2; border: 1px solid #a9926f; border-radius: 2px; box-shadow: inset 0 0 0 1px #e8dcc0; }
.faction-card:hover { background: #f7efdc; transform: translateY(-0.3rem); border-color: #4a3b32; }
.faction-card img.faction-crest { max-width: 8.0rem; height: auto; margin-bottom: 1.0rem; }
.faction-card h4 { margin: 0.5rem 0 1.0rem 0; font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); color: #4a3720; border-bottom: 1px solid #c3ad86; width: 100%; padding-bottom: 0.5rem; }
.faction-bonus-container { margin-top: auto; width: 100%; }
.bonus-label { font-family: var(--font-style-kaiser); color: #6c7a2e; font-weight: bold; font-size: var(--font-size-small); margin-bottom: 0.5rem; text-align: left; padding-left: 1.0rem; text-transform: uppercase; letter-spacing: 0.03rem; }
.bonus-details { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.0rem; font-family: var(--font-style-kaiser); font-size: 1.25rem; color: #4a3720; text-align: left; padding-left: 1.0rem; padding-right: 0.5rem; }
.bonus-details span { flex: 1; line-height: 1.3; }
.bonus-icon { width: 3.2rem; height: 3.2rem; object-fit: contain; flex-shrink: 0; margin-top: -0.2rem; }
.faction-card input[type="radio"] { display: none; }
.faction-card:has(input[type="radio"]:checked) { background: #eef0dd; border-color: #6c7a2e; box-shadow: inset 0 0 0 1px #cfd8a8, 0 1px 3px rgba(70,80,20,0.18); }
.faction-base { width: 100%; margin-top: 1.0rem; padding: 0.7rem 0.9rem; background: #efe6cf; border: 1px solid #c3ad86; border-radius: 2px; text-align: center; }
.fb-head { font-family: var(--font-style-kaiser); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.03rem; color: #7a6a4a; margin-bottom: 0.3rem; }
.fb-row { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.3rem 0; font-size: 1.4rem; color: #4a3720; }
.fb-row + .fb-row { border-top: 1px dotted #cfc0a2; }
.fb-val { display: inline-flex; align-items: baseline; gap: 0.5rem; white-space: nowrap; font-family: var(--font-style-kaiser); }
.fb-base, .fb-arrow { color: #8a7a5c; }
.fb-val strong { color: #6c7a2e; }
.fb-icon { width: 2.0rem; height: 2.0rem; object-fit: contain; margin: 0; align-self: center; }
.fb-pct { color: #6c7a2e; font-weight: bold; font-family: var(--font-style-kaiser); }

.submit-btn { display: block; width: 100%; margin-top: 3.0rem; padding: 1.2rem; background: #6c7a2e; color: #f4ead2; font-size: var(--font-size-medium); font-family: var(--font-style-kaiser); letter-spacing: 0.05rem; border: 1px solid #4c561d; box-shadow: inset 0 -0.2rem 0 rgba(0,0,0,0.16); border-radius: 2px; cursor: pointer; transition: background 0.12s; }
.submit-btn:hover { background: #7b8a36; border-color: #4c561d; }
.submit-btn:active { box-shadow: inset 0 0.2rem 0.3rem rgba(0,0,0,0.26); }
.homepage-main, .homepage-content { font-family: var(--font-style-normal); color: #333; }
.homepage-main { width: min(96.0rem, calc(100% - 2.0rem)); margin: 2.0rem auto; position: relative; }
.homepage-header { display: flex; justify-content: space-between; align-items: flex-end; }
.homepage-content { display: flex; flex-direction: column; border-radius: 1.0rem; box-shadow: 0 0 1.0rem rgba(0, 0, 0, 0.3); overflow: hidden; background: #fff; }
.content-wrapper { padding: 2.5rem 3.0rem; 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: 2.0rem; padding: 1.0rem 2.0rem; font-family: var(--font-style-kaiser); letter-spacing: 0.5rem; color: #333; }
.homepage-banner img { max-width: 8.0rem; height: auto; display: block; }
.homepage-banner > div:last-of-type { display: flex; flex-direction: column; align-items: center; text-transform: uppercase; }
.homepage-banner span:first-child { font-size: 3.1rem; line-height: 3.1rem; }
.homepage-banner span:last-child { font-size: 2rem; line-height: 2rem; }
.homepage-charakter { display: flex; align-items: flex-end; }
.homepage-charakter img { max-width: 5.0rem; height: auto; display: block; position: relative; top: 0.6rem; }
.login { padding: 1.0rem; background: var(--color-bg-light); display: flex; justify-content: flex-end; }
.login form { display: flex; gap: 0.5rem; align-items: center; margin: 0; }
#login-form { position: relative; }
.login input[type="text"], .login input[type="password"], .login input[type="submit"] { height: 3.2rem; box-sizing: border-box; font-size: var(--font-size-base); border-radius: 0.3rem; margin: 0; }
.login input[type="text"], .login input[type="password"] { padding: 0 0.8rem; background: #fff !important; border: 1px solid #b8b8b8 !important; color: #333; }
.login input[type="submit"] { padding: 0 1.5rem; background-color: var(--color-primary) !important; color: white !important; border: none !important; font-weight: bold; cursor: pointer; text-transform: uppercase; transition: background-color 0.2s; }
.login input[type="submit"]:hover { background-color: var(--color-primary-dark) !important; }
.registration-container { float: left; width: 30.0rem; margin-right: 3.0rem; margin-bottom: 2.0rem; padding: 2.0rem; background-color: var(--color-bg-light); border-radius: 0.8rem; box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1); }
.registration-container p { margin-bottom: 1.2rem; font-size: var(--font-size-base); }
.registration-form div { margin-bottom: 1.5rem; }
.registration-form label { display: block; margin-bottom: 0.5rem; 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: 1.0rem; border: 1px solid #ccc !important; border-radius: 0.4rem; 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 0.2rem rgba(93, 140, 65, 0.2); }
.registration-form button[type="submit"] { width: 100%; background-color: var(--color-primary); color: white; padding: 1.2rem 2.0rem; border: none; border-radius: 0.5rem; 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: 1.0rem; align-items: center; }
#captcha-image { border: 1px solid var(--color-border-subtle); border-radius: 0.4rem; cursor: pointer; height: 4.0rem; background-color: #fff; image-rendering: pixelated; }
#captcha-image:hover { box-shadow: 0 0 0 0.2rem rgba(93, 140, 65, 0.2); }
.captcha-wrapper input[type="text"] { flex: 1; }
.league-schedule-container { float: left; width: 30.0rem; clear: left; margin-right: 3.0rem; margin-bottom: 2.0rem; padding: 2.0rem; background-color: var(--color-bg-light); border-radius: 0.8rem; box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1); }
.schedule-list { list-style: none; padding: 0; margin: 0; }
.schedule-list li { padding: 1.0rem; margin-bottom: 1.0rem; border-radius: 0.5rem; 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: 0.3rem; 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 0.1rem 0.3rem rgba(0,0,0,0.2); }
.badge { background-color: var(--color-primary); color: white; padding: 0.2rem 0.6rem; border-radius: 0.3rem; font-size: var(--font-size-small); text-transform: uppercase; font-weight: bold; }
.main-text-content { overflow: hidden; }
.main-text-content h1, .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: 1.5rem; }
.main-text-content h1, .main-text-content h2, .main-text-content h3 { margin-top: 2.5rem; padding-bottom: 0.8rem; border-bottom: 2px solid var(--color-bg-light); }
.main-text-content h1:first-child, .main-text-content h2:first-child, .main-text-content h3:first-child { margin-top: 0; }
.main-text-content h1 { font-size: 2.2em; }
.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: 1.2rem; line-height: 1.6; font-size: var(--font-size-base); }
.intro-text p:last-child { margin-bottom: 0; }
.intro-text ul { list-style-type: disc; padding-left: 2.5rem; margin-top: 1.0rem; margin-bottom: 2.0rem; }
.intro-text li { margin-bottom: 1.0rem; line-height: 1.6; font-size: var(--font-size-base); }
.content-image-right { float: right; max-width: 10.0rem; margin: 0 0 1.5rem 2.0rem; border-radius: 0.8rem; background: var(--color-bg-light); }
.features-list { list-style: none; column-count: 2; column-gap: 3.0rem; font-size: var(--font-size-base); }
.features-list li { display: flex; align-items: center; margin-bottom: 1.2rem; break-inside: avoid-column; }
.list-icon { height: 3.0rem; width: auto; margin-right: 1.2rem; flex-shrink: 0; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.text-soft { color: #7a6a52; }
.text-leaf { color: #55701f; }
.text-gold { color: #8a6d1b; }
.text-bronze { color: #9a6b2e; }
.text-copper { color: #8a4f34; }
.text-dim { color: #aaa; }
.panel-parchment { border: 1px solid #a9926f; border-radius: 2px; box-shadow: inset 0 0 0 1px #e8dcc0; }
.row-head-soft { background: #e9e3d7; }
.row-head-warm { background: #efe6cd; }
.row-own { background-color: #f4faed; }
.detail-head-row { background-color: #e9e3d7; border-top: 2px solid #c7b9a6; }
.report-table { width: 100%; border-collapse: collapse; text-align: center; border: 1px solid #b6a17e; }
.report-cell { padding: 0.4rem; border-bottom: 1px solid #d8c7a6; }
.loot-box { background: #eef0dd; border: 1px solid #6c7a2e; border-radius: 2px; }
.loot-note { color: #5e4a20; }
.bar-track { background: #e0d2b2; padding: 1px; border: 1px solid #b6a17e; border-radius: 2px; width: 100%; }
.bar-fill { background: #6f8b34; border-radius: 2px; }

.text-success { color: #6c7a2e !important; }
.text-danger { color: #a83232 !important; }
.text-muted { color: #aaa !important; }
.font-bold { font-weight: bold !important; }
.font-kaiser { font-family: var(--font-style-kaiser) !important; }
.font-lg { font-size: var(--font-size-large) !important; }
.font-md { font-size: var(--font-size-medium) !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-inline-block { display: inline-block !important; }
.flex-col { flex-direction: column !important; }
.j-center { justify-content: center !important; }
.j-between { justify-content: space-between !important; }
.j-end { justify-content: flex-end !important; }
.a-center { align-items: center !important; }
.gap-05 { gap: 0.5rem !important; }
.gap-10 { gap: 1.0rem !important; }
.gap-15 { gap: 1.5rem !important; }
.m-0 { margin: 0 !important; }
.m-auto { margin: 0 auto !important; }
.mr-0 { margin-right: 0 !important; }
.ml-03 { margin-left: 0.3rem !important; }
.ml-05 { margin-left: 0.5rem !important; }
.mt-15 { margin-top: 1.5rem !important; }
.mt-20 { margin-top: 2.0rem !important; }
.mb-10 { margin-bottom: 1.0rem !important; }
.mb-15 { margin-bottom: 1.5rem !important; }
.mb-20 { margin-bottom: 2.0rem !important; }
.mb-30 { margin-bottom: 3.0rem !important; }
.p-0 { padding: 0 !important; }
.p-10 { padding: 1.0rem !important; }
.p-15 { padding: 1.5rem !important; }
.pl-05 { padding-left: 0.5rem !important; }
.pb-05 { padding-bottom: 0.5rem !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.w-60 { width: 6.0rem !important; }
.w-38 { width: 3.8rem !important; }
.h-40 { height: 4.0rem !important; }
.bg-light-alt { background-color: #f4ead2 !important; }
.border-bottom-thick { border-bottom: 2px solid #c7b9a6 !important; }
.border-bottom-dashed { border-bottom: 1px dashed #c7b9a6 !important; }
.op-30 { opacity: 0.3 !important; }
.whitespace-nowrap { white-space: nowrap !important; }
.list-unstyled { list-style: none !important; padding: 0 !important; }
.cols-2 { column-count: 2 !important; }
.btn-auto-px { width: auto !important; padding: 0 1.5rem !important; }
.form-container-sm { max-width: 45.0rem; margin: 0 auto; }
.form-container-md { max-width: 50.0rem; margin: 0 auto; }
.title-header { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 1.0rem 2.0rem !important; }
.lang-switcher { position: absolute; top: 1.5rem; right: 1.5rem; z-index: 100; display: flex; gap: 0.8rem; }
.lang-flag { width: 2.4rem; height: auto; border: 1px solid #333; border-radius: 0.3rem; transition: opacity 0.2s; }
.lang-flag.active { opacity: 1; }
.lang-flag.inactive { opacity: 0.4; }
.alpha-warning-box { background: #fdf3f3; border-bottom: 2px solid #a83232; padding: 1.5rem 2.0rem; text-align: center; color: #8a2727; }
.alpha-warning-title { font-family: var(--font-style-kaiser); font-size: 2.0rem; display: block; margin-bottom: 0.5rem; }
.alpha-warning-text { font-size: 1.4rem; line-height: 1.5; }
.homepage-footer { background: #f0f4ec; padding: 1.0rem; border-top: 1px solid #d8d8d8; font-size: var(--font-size-small); text-align: center; }
.wip-content { padding: 4.0rem 2.0rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.messages-box { padding: 0.3rem; border-radius: 0.5rem; 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: 1.5rem; }
#login-form .messages-box { position: absolute; top: 100%; right: 0; margin-top: 0.8rem; z-index: 10; width: 32.0rem; box-shadow: 0 0.4rem 0.8rem 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: 0.2rem; }
.error-page-body { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100vh; font-family: var(--font-style-normal); background-color: var(--background-color-beige); color: var(--font-color-base); }
.error-page-body h1 { font-size: 10.0rem; margin: 0; font-family: var(--font-style-kaiser); color: var(--color-primary-dark); }
.error-page-body a { padding: 1.0rem 2.0rem; background-color: var(--color-primary); color: #fff; text-decoration: none; border-radius: 0.5rem; font-weight: bold; }
.error-page-body a:hover { background-color: var(--color-primary-dark); }
.buildings-table th { padding: 0.6rem 0.5rem !important; }
.buildings-table td { padding: 0.5rem 0.5rem !important; transition: background-color 0.1s ease-in-out; }
.row-clickable { cursor: pointer; }
.row-clickable:hover td { background-color: #efe6cf !important; }
.details-row { display: none; background-color: #f6f3eb; }
.details-row.open { display: table-row; }
.details-box { background: #faf3e2; border: 1px solid #b6a17e; border-radius: 2px; padding: 1.5rem; margin: 0.5rem 1.0rem 1.5rem 1.0rem; box-shadow: inset 0 0 0 1px #e8dcc0; display: flex; align-items: flex-start; gap: 2.0rem; }
.building-detail-img { width: 12.0rem; height: 12.0rem; object-fit: contain; background: #faf3e2; border: 1px solid #b6a17e; padding: 0.8rem; border-radius: 2px; flex-shrink: 0; box-shadow: inset 0 1px 2px rgba(90,70,30,0.1); }
.details-desc { flex: 2; font-style: italic; color: #555; line-height: 1.6; border-right: 1px solid #c7b9a6; padding-right: 1.5rem; font-size: 1.4rem; }
.details-stats { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0; }
.stat-line { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed #d5c9b5; padding: 0.8rem 0; }
.stat-line:last-child { border-bottom: none; padding-bottom: 0; }
.stat-label { font-weight: bold; color: var(--color-primary-dark); font-size: 1.4rem; }
.stat-value { font-family: var(--font-style-kaiser); font-weight: bold; font-size: 1.8rem; display: flex; align-items: center; gap: 0.6rem; }
.summary-box { background: #f4ead2; border: 1px solid #a9926f; border-radius: 2px; padding: 1.0rem 2.0rem; margin-top: 1.5rem; display: flex; justify-content: space-around; font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); box-shadow: inset 0 0 0 1px #e8dcc0; }
.summary-item { display: flex; flex-direction: column; align-items: center; color: #555; }
.summary-val { font-size: 1.3em; font-weight: bold; color: var(--font-color-base); margin-top: 0.2rem; }
.val-negative { color: #a83232; }
.val-positive { color: #6c7a2e; }
.action-panel { background: #e9e3d7; border: 2px solid #c7b9a6; border-radius: 0.8rem; padding: 1.2rem; margin-top: 1.5rem; display: flex; justify-content: center; align-items: center; gap: 1.0rem; }
.build-select { padding: 0 2.5rem 0 1.0rem; border: 1px solid #8c7f6e; background: #e4d8c1; font-family: var(--font-style-normal); font-size: var(--font-size-base); font-weight: bold; color: var(--font-color-base); outline: none; cursor: pointer; appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23333" d="M2 5L0 0h4z"/></svg>'); background-repeat: no-repeat; background-position: right 1.0rem center; background-size: 0.8rem 1.0rem; box-shadow: inset 0 0.2rem 0.5rem rgba(0,0,0,0.15); transition: background 0.2s, border-color 0.2s; }
.build-select:focus, .build-select:hover { background-color: #fdfaf3; border-color: #6c7a2e; }
body.manual-body { overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
.manual-layout { display: flex; width: 130.0rem; max-width: 95vw; height: calc(100vh - 10.0rem); align-items: flex-start; justify-content: center; }

.manual-sidebar-wrapper { width: 28.0rem; margin: 1.5rem !important; display: flex; flex-direction: column; align-self: flex-start; max-height: 100%; }
.manual-sidebar-content { flex: 1; background: #e9e3d7; border-left: 3px solid #716050; border-right: 3px solid #716050; border-bottom: 3px solid #716050; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; border-radius: 0 0 0.5rem 0.5rem; scrollbar-width: thin; scrollbar-color: #6c7a2e rgba(0,0,0,0.1); }
.manual-sidebar-content::-webkit-scrollbar { width: 0.6rem; }
.manual-sidebar-content::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); border-radius: 0.3rem; margin: 0.4rem; }
.manual-sidebar-content::-webkit-scrollbar-thumb { background: #6c7a2e; border-radius: 0.3rem; }
.manual-sidebar-content .navigation { display: block; padding: 1.0rem; }
.manual-sidebar-content .navigation > a { display: flex; padding: 0.6rem 1.0rem; border-radius: 0.3rem; flex-shrink: 0; }
.manual-sidebar-content .navigation > a > span { width: auto !important; height: auto !important; min-height: 2.5rem; white-space: normal; line-height: 1.4; padding-left: 0.5rem; }
.manual-sidebar-content .navigation > a > img { width: 2.8rem !important; height: 2.8rem !important; padding: 0 !important; object-fit: contain; }

.manual-mainbox-wrapper { flex: 1; margin: 1.5rem !important; display: flex; flex-direction: column; height: 100%; max-height: 100% !important; }
.manual-content { padding: 3.0rem 4.0rem !important; border-radius: 0 0 0.5rem 0.5rem; }

.manual-section { padding-top: 1.0rem; margin-bottom: 4.0rem; }
.manual-section h2 { font-family: var(--font-style-kaiser); color: var(--color-primary-dark); font-size: var(--font-size-large); margin-top: 0; margin-bottom: 1.5rem; border-bottom: 2px solid #e6decb; padding-bottom: 0.5rem; display: flex; align-items: center; }
.manual-section h2 img { height: 2.8rem; margin-right: 1.0rem; }
.manual-section p { margin-bottom: 1.5rem; }
.manual-section ul, .manual-section ol { margin-left: 2.0rem; margin-bottom: 2.0rem; }
.manual-section li { margin-bottom: 0.8rem; }

.val-hl { color: var(--color-primary-dark); font-family: var(--font-style-kaiser); font-weight: bold; font-size: 1.1em; background: #e8f0e1; padding: 0.1rem 0.5rem; border-radius: 0.3rem; border: 1px solid #c3e6cb; display: inline-block; }
.info-box { background: #f4efe4; border: 1px solid #c7b9a6; padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 2.0rem; }
.info-box.danger { border-color: #a83232; background: #fdf3f3; }

.manual-faction-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2.0rem; margin-bottom: 3.0rem; }
.manual-faction-card { background: #efe3ca; border: 1px solid #c7b9a6; border-radius: 0.5rem; padding: 1.0rem; display: flex; align-items: center; gap: 1.5rem; }
.manual-faction-card img.crest { width: 5.0rem; height: auto; }
.manual-faction-card .details { flex: 1; }
.manual-faction-card h4 { margin: 0 0 0.5rem 0; font-family: var(--font-style-kaiser); font-size: 1.1em; color: var(--color-primary-dark); border-bottom: 1px solid #c7b9a6; }
.manual-faction-card p { margin: 0; font-size: 0.85em; color: #555; line-height: 1.3; }
.msg-list { display: flex; flex-direction: column; gap: 0.8rem; }
.msg-item { background: #faf3e2; border: 1px solid #b6a17e; border-radius: 2px; overflow: hidden; box-shadow: inset 0 0 0 1px #e8dcc0; }

.msg-item.unread .msg-header { background: #fbf5e6; }
.msg-item.read .msg-header { background: #e9e3d7; }

.msg-sender { font-family: var(--font-style-kaiser); font-size: 1.7rem; }
.msg-item.unread .msg-sender { font-weight: bold; color: var(--color-primary-dark); }
.msg-item.read .msg-sender { font-weight: normal; color: #73655a; }

.msg-item.sys-trade .msg-header { border-left: 0.4rem solid #6c7a2e; }
.msg-item.sys-info .msg-header { border-left: 0.4rem solid #4292cf; }
.msg-item.player-msg .msg-header { border-left: 0.4rem solid #b68363; }

.msg-header { display: flex; padding: 1.0rem 1.5rem; cursor: pointer; transition: background-color 0.2s; align-items: center;}
.msg-header:hover { background-color: #efe6cf !important; }

.msg-icon { height: 3.2rem; width: 3.2rem; object-fit: contain; flex-shrink: 0; }
.msg-snippet { font-family: var(--font-style-normal); font-size: 1.3rem; color: #8c7f6e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.3rem; font-weight: normal; }
.msg-time { font-size: 1.2rem; color: #8c7f6e; font-family: var(--font-style-normal); font-weight: normal; white-space: nowrap; margin-left: 1.0rem; }
.unread-dot { height: 0.8rem; width: 0.8rem; background-color: #a83232; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.chat-body { display: none; background: #c7b9a6; border-top: 1px solid #c7b9a6; }
.msg-item.open .chat-body { display: block; }
.btn-new-msg { width: auto; padding: 0.4rem 1.5rem; font-size: 1.3rem; height: 2.6rem; line-height: normal; border-radius: 0.3rem; }

.custom-scroll-wrapper { position: relative; max-height: 40.0rem; overflow: hidden; background: #c7b9a6; }
.chat-history { max-height: 40.0rem; overflow-y: scroll; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.0rem; scrollbar-width: none; -ms-overflow-style: none; }
.chat-history::-webkit-scrollbar { display: none; }
.chat-bubble { max-width: 85%; padding: 1.0rem 1.5rem; border-radius: 2px; font-size: 1.4rem; line-height: 1.5; position: relative; background-color: #faf3e2; border: 1px solid #b6a17e; box-shadow: inset 0 0 0 1px #e8dcc0; color: #4a3720; }
.chat-time { display: block; font-size: 1.1rem; color: #8c7f6e; margin-top: 0.5rem; text-align: right; }
.bubble-them { align-self: flex-start; border-top-left-radius: 0; }
.bubble-me { align-self: flex-end; border-top-right-radius: 0; background-color: #e4eedb; }

.reply-box { padding: 1.2rem 1.5rem; background: #d5c9b5; border-top: 1px solid #c7b9a6; display: flex; gap: 1.0rem; align-items: stretch; }
.reply-input { flex: 1; padding: 1.0rem; border: 1px solid #8c7f6e; border-radius: 0.4rem; background: #fdfaf3; font-family: var(--font-style-normal); font-size: 1.5rem; outline: none; resize: none; height: 6.5rem; box-sizing: border-box; }
.reply-input:focus { border-color: #6c7a2e; }

.new-chat-box { background: #f4ead2; border: 1px solid #a9926f; border-radius: 2px; padding: 2.0rem; display: none; margin-bottom: 2.5rem; }
.new-chat-box.active { display: block; }

.autocomplete-wrapper { position: relative; flex: 1; }
.autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #8c7f6e; border-top: none; list-style: none; margin: 0; padding: 0; z-index: 100; max-height: 15.0rem; overflow-y: auto; display: none; }
.autocomplete-list li { padding: 0.8rem 1.0rem; cursor: pointer; border-bottom: 1px solid #eee; }
.autocomplete-list li:hover { background: #efe6cf; }
:where(.mainbox .content) thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fdfaf3;
    box-shadow: inset 0 -2px 0 #bbaea0;
}
.mainbox .content:has(thead th) { padding-top: 0 !important; }
.mainbox .content:has(thead th)::before { content: ''; display: block; height: 2.0rem; }
.mainbox .content.p-15:has(thead th)::before { height: 1.5rem; }
.rank-table { width: 100%; border-collapse: collapse; }
.rank-table th { border-bottom: 2px solid #bbaea0; padding: 1.0rem 0.5rem; color: var(--color-primary-dark); font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); text-align: left; }
.rank-table td { padding: 1.0rem 0.5rem; border-bottom: 1px solid #e6decb; vertical-align: middle; color: var(--font-color-base); font-size: 1.5rem; }
.rank-crest { height: 2.4rem; object-fit: contain; }

.row-me td { background-color: #e4eedb !important; font-weight: bold; border-top: 1px solid #6c7a2e; border-bottom: 1px solid #6c7a2e; }
.row-me td:first-child { border-left: 3px solid #6c7a2e; }

.top-rank-1 { color: #d4af37; font-size: 2.0rem; text-shadow: 0.1rem 0.1rem 0px #000; }
.top-rank-2 { color: #a8a9ad; font-size: 1.8rem; text-shadow: 0.1rem 0.1rem 0px #444; }
.top-rank-3 { color: #cd7f32; font-size: 1.8rem; text-shadow: 0.1rem 0.1rem 0px #555; }

.pagination-bar { display: flex; justify-content: center; align-items: center; gap: 1.5rem; padding: 1.5rem; background: #e9e3d7; border-bottom: 2px solid #c7b9a6; border-radius: 0.4rem; margin-bottom: 1.5rem; }
.page-btn { padding: 0.6rem 1.5rem; background: #fdfaf3; border: 1px solid #c7b9a6; border-radius: 0.3rem; font-weight: bold; color: var(--color-primary-dark); font-family: var(--font-style-kaiser); text-decoration: none; transition: background 0.2s; cursor: pointer; }
.page-btn:hover { background: #efe6cf; border-color: #6c7a2e; }
.page-btn.active { background: #6c7a2e; color: white; border-color: #2b3709; }
.page-info { font-family: var(--font-style-kaiser); font-size: 1.6rem; font-weight: bold; color: #5e463a; }
.rank-header { background: #f4ead2; border: 1px solid #a9926f; border-radius: 2px; padding: 1.5rem 2.0rem; display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.0rem; box-shadow: inset 0 0 0 1px #e8dcc0; }
.rank-badge { display: flex; align-items: center; gap: 1.5rem; }
.rank-badge img { height: 5.0rem; width: 5.0rem; }
.rank-badge small { font-size: 1.3rem; color: #73655a; display: block; text-transform: uppercase; letter-spacing: 0.1rem; }
.rank-badge strong { font-family: var(--font-style-kaiser); font-size: 2.0rem; color: #4a3720; }

.rank-progress { flex: 1; margin-left: 3.0rem; }
.progress-labels { display: flex; justify-content: space-between; font-size: 1.3rem; font-weight: bold; color: #7a6a52; margin-bottom: 0.5rem; }

.special-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.special-card { background: #f4ead2; border: 1px solid #a9926f; border-radius: 2px; display: flex; flex-direction: column; padding: 1.5rem; position: relative; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; box-shadow: inset 0 0 0 1px #e8dcc0; }
.special-card:hover { box-shadow: 0 0.2rem 0.8rem rgba(0,0,0,0.08); border-color: #a69477; }

.special-card.built { background: #e4eedb; border-color: #6c7a2e; }
.special-card.built::after { content: attr(data-label-built); position: absolute; left: -3.5rem; top: 1.5rem; background: #6c7a2e; color: #fff; padding: 0.5rem 3.5rem; transform: rotate(-45deg); font-family: var(--font-style-kaiser); font-weight: bold; font-size: 1.4rem; box-shadow: 0 0.2rem 0.4rem rgba(0,0,0,0.3); }

.special-top { display: flex; gap: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px dashed #c7b9a6; padding-bottom: 1.0rem; }
.special-img { width: 8.0rem; height: 8.0rem; background: #faf3e2; border: 1px solid #b6a17e; border-radius: 2px; padding: 0.5rem; object-fit: contain; box-shadow: inset 0 0 0 1px #e8dcc0; }
.special-card.built .special-img { background: #faf3e2; border-color: #6c7a2e; }

.special-title { font-family: var(--font-style-kaiser); font-size: 1.8rem; font-weight: bold; color: var(--color-primary-dark); margin-bottom: 0.5rem; }
.special-effect { font-size: 1.3rem; color: #6c7a2e; font-weight: bold; display: flex; align-items: center; gap: 0.5rem; }

.special-costs { display: flex; flex-wrap: wrap; gap: 0.8rem; font-size: 1.4rem; font-family: var(--font-style-kaiser); font-weight: bold; color: #5e463a; margin-bottom: 1.5rem; }
.special-card .cost-item { display: flex; align-items: center; gap: 0.3rem; background: #faf3e2; padding: 0.2rem 0.6rem; border-radius: 2px; border: 1px solid #b6a17e; }
.special-card.built .cost-item { border-color: #6c7a2e; }

.btn-built { width: 100%; background: transparent; color: #55701f; box-shadow: none; border-color: #6c7a2e; cursor: default; }
.btn-locked { width: 100%; background: #c7b9a6; color: #fff; box-shadow: none; border-color: #a69477; cursor: not-allowed; }
.slider-container { margin: 4.0rem auto 2.0rem auto; max-width: 35.0rem; position: relative; }
.slider-container input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
.slider-container input[type=range]:focus { outline: none; }
.slider-container input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 1.2rem; cursor: pointer; background: #e6decb; border-radius: 0.6rem; border: 1px solid #c7b9a6; box-shadow: inset 0 0.2rem 0.4rem rgba(0,0,0,0.1); }
.slider-container input[type=range]::-webkit-slider-thumb { height: 2.8rem; width: 2.8rem; border-radius: 50%; background: #6c7a2e; cursor: pointer; -webkit-appearance: none; margin-top: -0.9rem; box-shadow: inset 0 0.2rem 0.2rem rgba(255,255,255,0.4), inset 0 -0.2rem 0.2rem rgba(0,0,0,0.2), 0 0.2rem 0.5rem rgba(0,0,0,0.4); border: 2px solid #3e5f13; transition: transform 0.1s, background 0.1s; }
.slider-container input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.1); background: #7b8a36; }
.slider-container input[type=range]::-moz-range-track { width: 100%; height: 1.2rem; cursor: pointer; background: #e6decb; border-radius: 0.6rem; border: 1px solid #c7b9a6; box-shadow: inset 0 0.2rem 0.4rem rgba(0,0,0,0.1); }
.slider-container input[type=range]::-moz-range-thumb { height: 2.8rem; width: 2.8rem; border-radius: 50%; background: #6c7a2e; cursor: pointer; box-shadow: inset 0 0.2rem 0.2rem rgba(255,255,255,0.4), inset 0 -0.2rem 0.2rem rgba(0,0,0,0.2), 0 0.2rem 0.5rem rgba(0,0,0,0.4); border: 2px solid #3e5f13; }
.slider-labels { display: flex; justify-content: space-between; margin-top: 0.8rem; color: #8c7f6e; font-size: 1.2rem; font-weight: bold; }

.tax-display { font-family: var(--font-style-kaiser); font-size: 4.0em; font-weight: bold; color: var(--color-primary-dark); text-align: center; margin-bottom: 1.0rem; text-shadow: 0.2rem 0.2rem 0 #fff; }
.tax-effect-box { background: #fdfaf3; border: 2px solid #e6decb; padding: 1.5rem; border-radius: 0.8rem; margin: 2.0rem auto; max-width: 35.0rem; text-align: center; transition: border-color 0.3s, background-color 0.3s; }
.tax-effect-title { font-family: var(--font-style-kaiser); font-weight: bold; font-size: 1.2em; display: block; margin-bottom: 0.5rem; }
.tax-effect-desc { color: #555; font-size: var(--font-size-small); }

.status-good { border-color: #6c7a2e; background: #f4faed; }
.status-good .tax-effect-title { color: #4a6735; }
.status-neutral { border-color: #c7b9a6; }
.status-neutral .tax-effect-title { color: #73594d; }
.status-bad { border-color: #a83232; background: #fdf3f3; }
.status-bad .tax-effect-title { color: #8a2727; }
.market-table { width: 100%; border-collapse: collapse; margin-bottom: 2.0rem; }
.market-table th { border-bottom: 2px solid #bbaea0; padding: 1.0rem 0.5rem; color: var(--color-primary-dark); font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); text-align: center; cursor: pointer; user-select: none; }
.market-table th:hover { background: #efe6cf; }
.market-table td { padding: 0.8rem 0.5rem; border-bottom: 1px solid #e6decb; vertical-align: middle; color: var(--font-color-base); transition: background-color 0.1s ease-in-out; }

.col-val { text-align: right; padding-right: 0.4rem !important; border-right: none !important; font-family: var(--font-style-kaiser); font-size: 1.6rem; font-weight: bold; }
.col-icn { text-align: left; padding-left: 0 !important; width: 2.8rem; border-left: none !important; }

.tab-btn-inline { background: #d5c9b5; border: 1px solid #8c7f6e; color: #444; box-shadow: inset 0 0.1rem 0 #f4f3f0; margin: 0 0.5rem; padding: 0.8rem 2.5rem; font-family: var(--font-style-kaiser); font-size: var(--font-size-medium); border-radius: 0.4rem; cursor: pointer; transition: all 0.1s; }
.tab-btn-inline:hover { background: #e0d6ca; color: #222; }
.tab-btn-inline.active { background: #6c7a2e; border-color: #2b3709; color: white; box-shadow: inset 0px 0.2rem 0.1rem 0px #6c7a2e, inset 0px -0.2rem 0.1rem 0px #3e5f13; text-shadow: 0.1rem 0.1rem 0 #3e5f13; }
.tab-header-container { text-align: center; margin-bottom: 2.0rem; border-bottom: 2px solid #e6decb; padding-bottom: 1.5rem; }
.market-stats-bar { text-align: center; font-size: 1.1rem; color: #73655a; margin-bottom: 1.5rem; background: #e9e3d7; padding: 0.8rem; border-radius: 0.4rem; }

.res-nav { display: flex; justify-content: center; gap: 0.8rem; margin-bottom: 2.0rem; flex-wrap: nowrap; }
.res-btn { display: flex; align-items: center; justify-content: center; padding: 0.6rem; background: #e9e3d7; border: 1px solid #c7b9a6; border-radius: 0.4rem; cursor: pointer; transition: all 0.1s; }
.res-btn img { height: 2.4rem; width: 2.4rem; }
.res-btn:hover { background: #efe6cf; border-color: #6c7a2e; }
.res-btn.active { background: #6c7a2e; border-color: #2b3709; box-shadow: inset 0 0.2rem 0.4rem rgba(0,0,0,0.3); }

.create-offer-box { background: #f6f3eb; border: 2px solid #e6decb; border-radius: 0.4rem; padding: 1.5rem 2.5rem; margin-bottom: 2.0rem; display: flex; flex-direction: column; gap: 1.5rem; box-shadow: inset 0 0.1rem 0.3rem rgba(0,0,0,0.05); }
.offer-header-row { width: 100%; display: flex; justify-content: center; align-items: center; gap: 0.8rem; padding-bottom: 1.2rem; border-bottom: 1px dashed #d5c9b5; }
.offer-input-row { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: flex-end; }
.offer-column { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.offer-label { font-family: var(--font-style-kaiser); font-size: 1.5rem; color: #73655a; text-transform: uppercase; font-weight: bold; }

.input-with-icon { position: relative; display: inline-block; }
.input-with-icon input { padding-right: 3.2rem !important; text-align: center; }
.input-with-icon img { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); height: 2.0rem; width: 2.0rem; pointer-events: none; }
.radio-hidden { display: none; }
.selection-box { display: block; background: #fcfbf8; border: 2px solid #e6decb; padding: 2.5rem 2.0rem; margin-bottom: 2.0rem; border-radius: 0.8rem; cursor: pointer; transition: all 0.2s ease-in-out; text-align: center; box-shadow: 0 0.2rem 0.4rem rgba(0,0,0,0.05); }
.selection-box:hover { background: #fefdfa; border-color: #c7b9a6; transform: translateY(-0.2rem); box-shadow: 0 0.4rem 0.8rem rgba(0,0,0,0.1); }
.radio-hidden:checked + .selection-box { background: #f4faed; border-color: #6c7a2e; box-shadow: 0 0 0 0.3rem rgba(108, 153, 36, 0.2); }
.selection-title { font-family: var(--font-style-kaiser); font-size: 1.8rem; font-weight: bold; color: var(--color-primary-dark); margin-bottom: 1.5rem; display: block; }
.selection-desc { font-size: var(--font-size-base); color: #555; line-height: 1.6; }
.mil-cap-box { flex: 1; }
.mil-stats-box { flex: 2; }
.mil-stats-table { width: 100%; height: 100%; border-collapse: collapse; }
.mil-stats-td { width: 33.33%; text-align: center; }
.mil-icon-sm { height: 2.0rem; width: auto; display: inline-block; }
.mil-icon-md { height: 2.2rem; width: auto; display: inline-block; }
.mil-icon-lg { height: 4.2rem; width: auto; object-fit: contain; display: inline-block; }
.mil-th-main { background: #e9e3d7; }
.mil-th-sub { background: #fdfaf3; font-size: 1.2rem; }
.border-right-dark { border-right: 1px solid #c7b9a6 !important; }
.border-right-light { border-right: 1px solid #e6decb !important; }
.mil-action-td { padding: 0.8rem 0.5rem !important; }
.mil-input-amount { width: 5.5rem !important; text-align: center !important; font-size: 1.6rem !important; }
.mil-btn-max { min-width: 0 !important; padding: 0 0.8rem !important; }
.mil-queue-heading { color: var(--color-primary-dark); border-bottom: 2px solid #e6decb; }
.cursor-default { cursor: default !important; }
.font-11 { font-size: 1.1rem !important; }
.font-12 { font-size: 1.2rem !important; }
.text-uppercase { text-transform: uppercase !important; }
@media screen and (max-width: 1480px) {
    html {
        font-size: 55%;
    }
}
@media screen and (max-width: 1300px) {
    html {
        font-size: 50%;
    }
}
@media screen and (min-width: 2000px) and (min-height: 1000px) {
    html {
        font-size: 75%;
    }
}
@media screen and (min-width: 2400px) and (min-height: 1300px) {
    html {
        font-size: 85%;
    }
}
@media screen and (min-width: 3200px) and (min-height: 1300px) {
    html {
        font-size: 100%;
    }
}
@media screen and (min-width: 3800px) and (min-height: 1800px) {
    html {
        font-size: 125%;
    }
}

@media screen and (max-width: 900px) {
    html { font-size: 62.5%; }
    .homepage-main { width: 100%; margin: 0 auto; padding: 0; }
    .homepage-content { border-radius: 1.6rem 1.6rem 0 0; box-shadow: none; }
    .homepage-header { flex-direction: column; align-items: center; gap: 0.5rem; }
    .homepage-banner { padding: 0.6rem 1.0rem; gap: 1.2rem; flex-wrap: wrap; justify-content: center; letter-spacing: 0.3rem; }
    .homepage-banner img { max-width: 6.0rem; }
    .homepage-charakter img { max-width: 4.4rem; }
    .lang-switcher { top: 0.8rem; right: 0.8rem; }
    .content-wrapper { padding: 1.6rem 1.4rem; }
    .registration-container, .league-schedule-container { float: none; width: 100%; margin-right: 0; }
    .features-list { column-count: 1; }
    .content-image-right { max-width: 7.0rem; margin: 0 0 1.0rem 1.5rem; }
    .login form { width: 100%; flex-wrap: wrap; }
    .login input[type="text"], .login input[type="password"] { flex: 1 1 12.0rem; min-width: 0; height: 4.0rem; font-size: 1.6rem; }
    .login input[type="submit"] { flex: 1 1 100%; height: 4.0rem; font-size: 1.6rem; }
    .login .messages-box, #login-form .messages-box { position: static; flex: 1 1 100%; width: 100%; margin-top: 0; }
    .registration-form input[type="text"], .registration-form input[type="email"], .registration-form input[type="password"], .captcha-wrapper input[type="text"] { font-size: 1.6rem; }
}
.mobile-bar, .res-toggle, .nav-backdrop, .col-nav .nav-head, .col-nav .nav-identity, .col-nav .nav-round, .col-nav .nav-reich { display: none; }
.stat-line.mobile-only { display: none; }
.land-mobile-panel { display: none; }
.manual-mobile-nav { display: none; }

@media screen and (max-width: 900px) {
    body:not(.homepage-body) { background: #fdfaf3; }
    body.nav-open { overflow: hidden; }
    .middle_bar { width: 100%; height: auto; overflow: visible; display: block; padding: 0 0 9.5rem; }
    .middle_bar > div:first-child, .middle_bar > div:last-child { height: auto; overflow: visible; }

    .col-side { display: none; }
    .mainBorder { margin: 0; border-radius: 0; box-shadow: none; }
    .sidebox { width: 100%; margin: 0; }
    .mainbox, .mainbox.wide { width: 100%; max-height: none; margin: 0 0 1.0rem; padding: 0; overflow: visible; }
    .mainbox .title { border-radius: 0; border-left: none; border-right: none; }
    .mainbox .content { overflow: visible; max-height: none; padding: 0.8rem !important; border-left: none; border-right: none; border-bottom: none; }
    .mainbox .content:has(thead th) { padding-top: 0.8rem !important; }
    .mainbox .content:has(thead th)::before { display: none; }
    .mainbox:last-child { margin-bottom: 0; }
    .mainbox-scroll-wrapper { overflow: visible; }
    .custom-scrollbar { display: none !important; }
    .top_bar { position: sticky; top: 0; z-index: 1500; height: auto; background: #e9e3d7; border-bottom: 2px solid #a69477; box-shadow: 0 0.2rem 0.8rem rgba(0,0,0,0.3); }
    .top_bar_content { width: 100%; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0.5rem 0.8rem 0.6rem; gap: 0.5rem; }

    .top_bar_left { flex: 0 0 auto; margin: 0; height: auto; flex-direction: row; align-items: center; }
    .server_time { display: none; }
    .logo { top: 0; padding: 0.2rem 0.8rem; gap: 0.6rem; }
    .logo img { height: 3.2rem; width: 3.2rem; }
    .logo_description p:first-child { font-size: 1.9rem; line-height: 1.9rem; letter-spacing: 0.2rem; }
    .logo_description > div > p:first-child { font-size: 1.1rem; letter-spacing: 0.1rem; line-height: 1.1rem; }

    .top_bar_right { flex: 0 0 auto; margin: 0; height: auto; flex-direction: row; align-items: center; }
    .top_bar_actions { height: auto; }
    .theme-switch-label { display: none; }
    .reich_info { display: none; }
    .buttonFramed { width: 3.0rem; height: 3.0rem; }
    .buttonFramed > img { height: 2.0rem; width: 2.0rem; }
    .flagBtn > svg { width: 2.0rem; height: 2.0rem; }
    .top_bar_center { order: 3; flex: 1 1 100%; margin: 0; display: flex; align-items: stretch; background: transparent; box-shadow: none; border-radius: 0; }
    .ressource_box { flex: 1; display: flex; flex-wrap: wrap; grid-template-columns: none; border: 1px solid #c7b9a6; border-radius: 0.4rem; overflow: hidden; background: #e9e3d7; }
    .ressource { display: none; height: 3.4rem; flex: 1 1 20%; min-width: 6.6rem; justify-content: center; gap: 0.5rem; border-left: none; border-top: 1px solid #f4f3f0; }
    .ressource > span { font-size: 1.3rem; }
    .ressource > img { height: 1.9rem; }
    .ressource > :first-child { margin-left: 0; }
    .ressource > :last-child { margin-right: 0; }
    .ressource.res-fav { display: flex; }
    .ressource_box.expanded .ressource { display: flex; }

    .res-toggle { display: flex; align-items: center; justify-content: center; flex: 0 0 3.6rem; margin-left: 0.5rem; border: 1px solid #c7b9a6; border-radius: 0.4rem; background: #e9e3d7; color: #73594d; font-size: 1.5rem; cursor: pointer; }
    .res-tt { display: none !important; }
    .res-toggle .arr { transition: transform 0.25s; display: inline-block; }
    .res-toggle.open .arr { transform: rotate(180deg); }
    .col-nav { position: fixed; top: 0; left: 0; bottom: 0; width: 100%; z-index: 2600; transform: translateX(-105%); transition: transform 0.28s ease; overflow-y: auto; background: #efe3ca; box-shadow: 0.5rem 0 1.5rem rgba(0,0,0,0.45); }
    body.nav-open .col-nav { transform: translateX(0); }
    .col-nav .mainBorder { margin: 0; border-radius: 0; box-shadow: none; background: transparent; }
    .col-nav .sidebox { margin: 0; width: 100%; }
    .col-nav .navigation { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr)); gap: 0.2rem; padding: 0.4rem 0.5rem 1.2rem; align-items: stretch; }
    .col-nav .navigation .hr { display: none; }
    .col-nav .navigation > a { flex-direction: column; justify-content: center; gap: 0.2rem; padding: 0.35rem 0.1rem; border-radius: 0.5rem; position: relative; }
    .col-nav .navigation > a > img { width: 2.4rem; padding: 0; }
    .col-nav .navigation > a > span { height: auto; font-size: 1.1rem; text-align: center; line-height: 1.15; overflow-wrap: anywhere; }
    .col-nav .nav-badge { position: absolute; top: 0.1rem; right: 0.5rem; margin-left: 0 !important; }
    .nav-backdrop { display: none !important; }
    .col-nav .nav-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 1.6rem; row-gap: 0.2rem; background: #e9e3d7; border-bottom: 2px solid #c7b9a6; padding: 0.3rem 0.8rem 0.4rem; }
    .col-nav .nav-topline { display: flex; width: 100%; align-items: center; justify-content: space-between; }
    .col-nav .nav-identity { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.8rem; padding: 0; background: none; border-bottom: none; }
    .col-nav .nav-identity .sb-crest img { width: 2.8rem; }
    .col-nav .nav-identity .sb-name { font-size: 1.4rem; }
    .col-nav .nav-identity .sb-points { font-size: 1.3rem; gap: 0.4rem; }
    .col-nav .nav-identity .sb-points img { width: 1.4rem; height: 1.4rem; }
    .col-nav .nav-round { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.2rem 0.8rem; margin: 0; padding: 0; }
    .col-nav .nav-round .sb-round-head { font-size: 1.2rem; gap: 0.3rem; }
    .col-nav .nav-round .sb-round-head img { width: 1.4rem; height: 1.4rem; }
    .col-nav .nav-round .sb-round-span { font-size: 1.2rem; }
    .col-nav .nav-round .sb-round-next { font-size: 1.2rem; width: auto; text-align: center; }
    .col-nav .nav-reich { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.2rem 1.2rem; min-width: 0; top: 0; margin: 0; padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; }
    .col-nav .nav-reich .reich_row { grid-template-columns: 1.4rem auto auto; gap: 0.4rem; font-size: 1.2rem; line-height: 1.4rem; }
    .col-nav .nav-reich .reich_row img { height: 1.4rem; width: 1.4rem; }
    .mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000; display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 1.0rem calc(0.7rem + env(safe-area-inset-bottom)); background: linear-gradient(#6b5847, #57463a); border-top: 2px solid #332a15; box-shadow: 0 -0.3rem 1.0rem rgba(0,0,0,0.35); }
    .mb-menu { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; background: none; border: none; color: #e9e3d7; font-size: 1.1rem; font-weight: bold; cursor: pointer; padding: 0.2rem 0.6rem; font-family: var(--font-style-normal); }
    .mb-burger { font-size: 2.0rem; line-height: 2.2rem; }
    .mb-turninfo { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; color: #e9e3d7; font-family: var(--font-style-kaiser); margin-right: auto; }
    .mb-count { display: flex; align-items: center; gap: 0.4rem; font-size: 1.5rem; font-weight: bold; }
    .mb-count img { height: 1.6rem; }
    .mb-timer { font-size: 1.2rem; color: #cbbfa8; }
    .mb-form { display: flex; align-items: center; gap: 0.6rem; }
    .mb-select { height: 4.4rem; width: 5.4rem; text-align: center; background: #efe6cd; color: #4a3720; border: 1px solid #332a15; border-radius: 0.5rem; font-family: var(--font-style-kaiser); font-size: 1.7rem; font-weight: bold; cursor: pointer; }
    .mb-endbtn { height: 4.4rem; padding: 0 1.8rem; background: #6c7a2e; color: #f4ead2; border: 1px solid #2b3709; border-radius: 0.5rem; font-family: var(--font-style-kaiser); font-size: 1.7rem; font-weight: bold; box-shadow: inset 0 -0.2rem 0 rgba(0,0,0,0.2); cursor: pointer; white-space: nowrap; }
    .mb-endbtn:active { box-shadow: inset 0 0.2rem 0.3rem rgba(0,0,0,0.3); }
    table.turn-summary-table th, table.turn-summary-table td { padding: 0.7rem 0.3rem; font-size: 1.3rem; }
    .col-value { width: auto; font-size: 1.4rem; padding-right: 0.5rem !important; }
    .col-icon { width: 3.0rem; }
    .icon-inline { height: 2.0rem; width: 2.0rem; margin-right: 0.3rem; }
    .land-desc { margin-left: 2.4rem; }
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .title-header { flex-wrap: wrap; gap: 0.5rem; }
    .land-table th:last-child, .land-table td:last-child { display: none; }
    .land-mobile-panel { display: flex; }
    .buildings-table th:nth-child(n+4), .buildings-table td:nth-child(n+4) { display: none; }
    .stat-line.mobile-only { display: flex; }
    .buildings-table .land-title { white-space: normal; }
    .details-box { flex-direction: column; align-items: stretch; gap: 1.2rem; margin: 0; padding: 1.0rem; }
    .building-detail-img { width: 8.0rem; height: 8.0rem; }
    .details-desc { border-right: none; padding-right: 0; }
    .details-stats { width: 100%; }
    .stat-value { flex-wrap: wrap; justify-content: flex-end; }
    .summary-box { flex-direction: column; gap: 0; padding: 0.2rem 1.0rem; margin-top: 0.8rem; }
    .summary-item { flex-direction: row; justify-content: space-between; align-items: center; width: 100%; padding: 0.5rem 0; border-bottom: 1px dashed #d5c9b5; font-size: 1.3rem; }
    .summary-item:last-child { border-bottom: none; }
    .summary-val { margin-top: 0; font-size: 1.1em; }
    .action-panel { flex-wrap: wrap; padding: 0.8rem; gap: 0.6rem; margin-top: 0.8rem; }
    .action-panel .build-select { flex: 1 1 100%; height: 3.4rem; padding-top: 0; padding-bottom: 0; }
    .action-panel .form-item { height: 3.2rem; min-height: 3.2rem; line-height: 3.0rem; }
    .action-panel .amount-input { flex: 1; }
    .action-panel .max-btn, .action-panel .action-btn { font-size: 1.4rem; padding-top: 0; padding-bottom: 0; }
    .content .mil-summary { grid-template-columns: 1fr; }
    .content .mil-cards { grid-template-columns: 1fr; }
    .content .mil-tiles { padding: 0.5rem 0; }
    .special-grid { grid-template-columns: 1fr; }
    .faction-grid { grid-template-columns: repeat(2, 1fr); gap: 1.0rem; }
    .middle_bar.faction-select-layout { margin: 0; min-height: 100vh; padding-bottom: 2.0rem; }
    .faction-select-layout .mainbox { margin-bottom: 0; }
    .faction-card { padding: 1.0rem 0.8rem; }
    .faction-card img.faction-crest { max-width: 6.0rem; }
    .faction-base { padding: 0.5rem 0.6rem; margin-top: 0.7rem; }
    .offer-input-row { grid-template-columns: 1fr; gap: 1.2rem; }
    .res-nav { flex-wrap: wrap; }
    .tab-header-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; }
    .tab-header-container .tab-btn-inline { margin: 0; }
    .content .sim-grid { grid-template-columns: 1fr; gap: 1.0rem; }
    .content .sim-col input { font-size: 1.6rem; height: 3.2rem; }
    .content .sim-points { flex-direction: column; }
    .amount-input, .build-select, .form-item, .reply-input, .sb-select { font-size: 1.6rem; }
    .form-item { min-height: 3.6rem; }
    .action-group { flex-wrap: wrap; }
    body.manual-body { overflow: visible; height: auto; display: block; }
    .manual-layout { display: block; width: 100%; max-width: 100%; height: auto; }
    .manual-sidebar-wrapper { display: none; }
    .manual-mainbox-wrapper { margin: 0 !important; display: block; height: auto; max-height: none !important; }
    .mainbox .content.manual-content { padding: 1.4rem 1.6rem 2.0rem !important; overflow: visible; max-height: none; border-radius: 0; }
    .manual-mobile-nav { display: flex; align-items: center; gap: 0.8rem; position: sticky; top: 0; z-index: 1500; background: #e9e3d7; border-bottom: 2px solid #a69477; box-shadow: 0 0.2rem 0.8rem rgba(0,0,0,0.25); padding: 0.7rem 0.8rem; }
    .manual-mobile-nav img { height: 2.4rem; width: 2.4rem; }
    .manual-mobile-nav select { flex: 1; height: 3.8rem; font-size: 1.6rem; background: #efe6cd; color: #4a3720; border: 1px solid #b6a17e; border-radius: 0.4rem; padding: 0 1.0rem; font-family: var(--font-style-kaiser); cursor: pointer; }
    .manual-section { scroll-margin-top: 7.0rem; }
    .manual-content .nerd-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .manual-faction-grid { grid-template-columns: 1fr; }
}
@media screen and (max-width: 380px) {
    .mobile-bar { gap: 0.5rem; padding-left: 0.6rem; padding-right: 0.6rem; }
    .mb-menu { padding: 0.2rem 0.3rem; }
    .mb-menu-label { display: none; }
    .mb-count { font-size: 1.3rem; }
    .mb-timer { font-size: 1.1rem; }
    .mb-select { width: 4.6rem; height: 4.0rem; font-size: 1.5rem; }
    .mb-endbtn { padding: 0 1.1rem; height: 4.0rem; font-size: 1.5rem; }
}
.tut-auflage { position: fixed; inset: 0; z-index: 3000; pointer-events: none; }
.tut-maske { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; pointer-events: none; }
#tutDunkel { transition: fill-opacity 0.18s ease; }
.tut-rahmen { position: fixed; border: 0.3rem solid #e8c46a; border-radius: 0.4rem;
              box-shadow: 0 0 0 0.3rem rgba(232, 196, 106, 0.35), 0 0 1.2rem rgba(232, 196, 106, 0.55);
              pointer-events: none; animation: tut-puls 1.6s ease-in-out infinite; }
.tut-rahmen-stups { animation: tut-stups 0.42s ease-in-out 2; }
@keyframes tut-stups {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-0.5rem); }
    75%      { transform: translateX(0.5rem); }
}
@keyframes tut-puls {
    0%, 100% { box-shadow: 0 0 0 0.3rem rgba(232, 196, 106, 0.35), 0 0 1.2rem rgba(232, 196, 106, 0.55); }
    50%      { box-shadow: 0 0 0 0.6rem rgba(232, 196, 106, 0.15), 0 0 2.0rem rgba(232, 196, 106, 0.85); }
}
.tut-finger { position: fixed; width: 4.4rem; height: 4.4rem; z-index: 3002; pointer-events: none;
              filter: drop-shadow(0 0.2rem 0.3rem rgba(0, 0, 0, 0.5)); }
.tut-finger svg { width: 100%; height: 100%; display: block; }
.tut-finger-oben   { animation: tut-tippen-hoch 1.2s ease-in-out infinite; }
.tut-finger-unten  { transform: rotate(180deg); animation: tut-tippen-runter 1.2s ease-in-out infinite; }
.tut-finger-links  { transform: rotate(-90deg); animation: tut-tippen-links 1.2s ease-in-out infinite; }
.tut-finger-rechts { transform: rotate(90deg);  animation: tut-tippen-rechts 1.2s ease-in-out infinite; }
@keyframes tut-tippen-hoch   { 0%, 100% { margin-top: 0; }  50% { margin-top: -0.6rem; } }
@keyframes tut-tippen-runter { 0%, 100% { margin-top: 0; }  50% { margin-top: 0.6rem; } }
@keyframes tut-tippen-links  { 0%, 100% { margin-left: 0; } 50% { margin-left: -0.6rem; } }
@keyframes tut-tippen-rechts { 0%, 100% { margin-left: 0; } 50% { margin-left: 0.6rem; } }

.tut-blase { position: fixed; z-index: 3003; width: 34rem; max-width: calc(100vw - 1.6rem);
             background: #fdfaf3; border: 1px solid #a9926f; border-radius: 0.4rem;
             box-shadow: 0 0.5rem 1.6rem rgba(30, 22, 10, 0.5); padding: 1.0rem 1.2rem 1.2rem;
             font-family: var(--font-style-normal); color: #5e463a; }
.kw-ds-bubble { display: none; position: fixed; z-index: 4000; max-width: 32rem;
                background: #fdfaf3; border: 1px solid #a9926f; border-radius: 0.3rem;
                box-shadow: 0 0.3rem 0.8rem rgba(60, 45, 25, 0.35);
                padding: 0.7rem 0.9rem;
                font-family: var(--font-style-normal); font-size: 1.25rem; line-height: 1.5;
                color: #5e463a; }
.kw-ds-bubble.open { display: block; }
.kw-defschutz, .kw-help { cursor: pointer; }
.tut-blase-volk { width: 42rem; padding: 0; overflow: hidden;
                  border: 0.2rem solid #c9a227;
                  box-shadow: 0 0.6rem 2.2rem rgba(30, 22, 10, 0.55),
                              0 0 0 0.4rem rgba(201, 162, 39, 0.18); }
.tut-blase-volk .tut-kopf,
.tut-blase-volk .tut-titel,
.tut-blase-volk .tut-text,
.tut-blase-volk .tut-weiter-form { padding-left: 1.4rem; padding-right: 1.4rem; }
.tut-blase-volk .tut-kopf { margin-top: 0.8rem; }
.tut-blase-volk .tut-weiter-form { padding-bottom: 1.2rem; }

.tut-volk-kopf { display: flex; align-items: center; gap: 1.4rem;
                 padding: 1.4rem; background: linear-gradient(180deg, #f3e7c6 0%, #e8d7ac 100%);
                 border-bottom: 0.1rem solid #c9a227; }
.tut-volk-wappen { width: 6.4rem; height: 6.4rem; object-fit: contain;
                   filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.35)); }
.tut-volk-text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.tut-volk-ueber { font-size: 1.15rem; letter-spacing: 0.12rem; text-transform: uppercase; color: #8a7a5f; }
.tut-volk-name { font-family: var(--font-style-kaiser); font-size: 2.6rem; line-height: 1.1; color: #4a3720; }
.tut-volk-bonus { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.2rem;
                  align-self: flex-start; padding: 0.25rem 0.7rem; border-radius: 0.3rem;
                  background: #fdfaf3; border: 1px solid #c9a227;
                  font-size: 1.3rem; color: #5e463a; }
.tut-volk-bonus img { height: 1.8rem; width: 1.8rem; }
.tut-volk-bonus b { color: #6c7a2e; font-size: 1.5rem; }

.tut-blase-mitte { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.tut-kopf { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.tut-zaehler { font-size: 1.15rem; letter-spacing: 0.05rem; color: #8a7a5f; text-transform: uppercase; margin-right: auto; }
.tut-klapp { display: none; align-items: center; justify-content: center; width: 3.2rem; height: 2.6rem;
             background: none; border: 1px solid #cbb98f; border-radius: 0.3rem; color: #8a7a5f;
             font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0; }
.tut-abbruch { margin: 0; }
.tut-x { background: none; border: none; font-size: 2.2rem; line-height: 1; color: #a9926f; cursor: pointer; padding: 0 0.2rem; }
.tut-x:hover { color: #a83232; }
.tut-titel { font-family: var(--font-style-kaiser); font-size: 1.9rem; color: #4a3720; margin: 0 0 0.5rem; }
.tut-text { font-size: 1.35rem; line-height: 1.55; margin: 0; }
.tut-weiter-form { margin: 1.0rem 0 0; text-align: right; }
.tut-btn { font-family: var(--font-style-kaiser); font-size: 1.5rem; color: #4a3720; background: #efe6cd;
           border: 1px solid #b6a17e; border-radius: 0.3rem; padding: 0.5rem 1.6rem; cursor: pointer; }
.tut-btn:hover { background: #e6d9bd; }
.tut-btn-ja { background: #6c7a2e; border-color: #4c561d; color: #f4ead2; }
.tut-btn-ja:hover { background: #7b8a36; }
.tut-frage-huelle { position: fixed; inset: 0; z-index: 3100; background: rgba(30, 22, 10, 0.7);
                    display: flex; align-items: center; justify-content: center; padding: 1.6rem; }
.tut-frage { width: 46rem; max-width: 100%; background: #fdfaf3; border: 1px solid #a9926f;
             border-radius: 0.5rem; box-shadow: 0 0.6rem 2.0rem rgba(0, 0, 0, 0.5); padding: 2.0rem;
             font-family: var(--font-style-normal); color: #5e463a; }
.tut-frage h2 { font-family: var(--font-style-kaiser); font-size: 2.4rem; color: #4a3720; margin: 0 0 0.8rem; }
.tut-frage p { font-size: 1.4rem; line-height: 1.6; margin: 0 0 1.6rem; }
.tut-frage-knoepfe { display: flex; gap: 0.8rem; justify-content: flex-end; flex-wrap: wrap; }
.tut-frage-knoepfe form { margin: 0; }
@media screen and (max-width: 900px) {
    .tut-blase { left: 0 !important; right: 0; top: auto !important; bottom: var(--tut-leiste, 0px);
                 width: 100%; max-width: 100%; border-radius: 0.5rem 0.5rem 0 0;
                 padding: 0.7rem 1.0rem 0.9rem; transform: none !important;
                 box-shadow: 0 -0.4rem 1.4rem rgba(30, 22, 10, 0.45); }
    .tut-blase.tut-blase-oben { top: 0 !important; bottom: auto; border-radius: 0 0 0.5rem 0.5rem;
                 box-shadow: 0 0.4rem 1.4rem rgba(30, 22, 10, 0.45); }
    .tut-blase-mitte { top: auto !important; }
    .tut-blase-volk { width: auto; }
    .tut-text { max-height: 20vh; overflow-y: auto; font-size: 1.3rem; }
    .tut-titel { font-size: 1.7rem; margin-bottom: 0.3rem; }
    .tut-weiter-form { margin-top: 0.6rem; }
    .tut-klapp { display: inline-flex; }
    .tut-blase.tut-zu .tut-text,
    .tut-blase.tut-zu .tut-volk-kopf { display: none; }
    .tut-volk-wappen { width: 4.8rem; height: 4.8rem; }
    .tut-volk-name { font-size: 2.1rem; }
    .tut-finger { width: 3.6rem; height: 3.6rem; }
}
.tut-text-handy { display: none; }
@media screen and (max-width: 900px) {
    .tut-hat-handy .tut-text-desktop { display: none; }
    .tut-hat-handy .tut-text-handy { display: inline; }
}
.ressource.res-leer.tut-zeigen { display: flex; }
.market_ticker.tut-zeigen { display: flex; }
@media screen and (max-width: 900px) {
    .market_ticker.tut-zeigen { display: grid; }
}
@media screen and (max-width: 900px) {
    html { height: 100%; }
    body:not(.homepage-body):not(.manual-body) {
        height: 100%;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    body:not(.homepage-body):not(.manual-body) > .top_bar {
        position: static;
        flex: 0 0 auto;
        z-index: 1500;
    }
    body:not(.homepage-body):not(.manual-body) > .middle_bar {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 0 0 0.8rem;
    }
    body:not(.homepage-body):not(.manual-body) > .mobile-bar {
        position: static;
        flex: 0 0 auto;
    }
    body.nav-open:not(.homepage-body):not(.manual-body) > .top_bar,
    body.nav-open:not(.homepage-body):not(.manual-body) > .mobile-bar { display: none; }
    body.nav-open:not(.homepage-body):not(.manual-body) > .middle_bar { overflow: hidden; }
    body:not(.homepage-body):not(.manual-body) { height: 100dvh; height: var(--kw-vvh, 100dvh); }
    #colNav { top: 0; bottom: auto; height: 100vh; height: 100dvh; height: var(--kw-vvh, 100dvh); }
    .col-nav .navigation { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
    body:not(.homepage-body) > .middle_bar.faction-select-layout { min-height: 0; padding-bottom: 2.0rem; }
    .top_bar_left,
    .top_bar_right { display: none; }
    .top_bar_content { padding: 0.4rem 0.6rem 0.5rem; gap: 0; }
    .top_bar_center { order: 0; }
    .col-nav .nav-brand { display: flex; align-items: center; justify-content: flex-start; gap: 0.6rem; padding: 0; }
    .col-nav .nav-brand .logo { position: static; padding: 0; background: none; box-shadow: none; border: none; gap: 0.5rem; }
    .col-nav .nav-brand .logo img { height: 2.6rem; width: 2.6rem; }
    .col-nav .nav-brand .logo_description p:first-child { font-size: 1.5rem; line-height: 1.5rem; letter-spacing: 0.15rem; }
    .col-nav .nav-brand .logo_description > div > p:first-child { font-size: 0.9rem; line-height: 0.9rem; letter-spacing: 0.08rem; }
    .col-nav .nav-actions { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0; }
    .col-nav .nav-actions .theme-switch-label { display: none; }
    .col-nav .nav-actions .buttonFramed { width: 3.0rem; height: 3.0rem; }
    .col-nav .nav-actions .buttonFramed > img { height: 2.0rem; width: 2.0rem; }
    .col-nav .nav-actions .flagBtn > svg { width: 2.0rem; height: 2.0rem; }
    .col-main > .mainBorder > .title,
    .col-main > .mainbox > .title { display: none; }
    .col-main > .mainBorder > .title-header:not(:has(button)),
    .col-main > .mainbox > .title-header:not(:has(button)) { display: none !important; }
    .col-main > .mainBorder > .title-header > span:first-child,
    .col-main > .mainbox > .title-header > span:first-child { display: none; }
    .col-main > .mainBorder > .title-header,
    .col-main > .mainbox > .title-header { justify-content: flex-start !important; padding: 0.6rem 0.8rem !important; }
    .ressource { display: flex; flex: 1 1 25%; min-width: 5.6rem; height: 3.0rem; gap: 0.35rem; }
    .ressource.res-leer { display: none; }
    .ressource > span { font-size: 1.2rem; }
    .ressource > img { height: 1.7rem; }
    .ressource_box { border-radius: 0.4rem; }
    .top_bar_center { flex-wrap: wrap; }
    .ressource_box { flex: 1 1 0; min-width: 0; }
    .res-toggle { flex: 0 0 3.2rem; margin-left: 0.4rem; align-self: stretch; }
    body.kurse-offen .res-toggle .arr { transform: rotate(180deg); }
    .chat-history { max-height: 24.0rem; }
    .res-info { display: none; flex: 1 1 100%; width: 100%; order: 4; margin-top: 0.4rem;
                background: #faf3e2; border: 1px solid #a9926f; border-radius: 0.4rem;
                box-shadow: inset 0 0 0 1px #e8dcc0; padding: 0.7rem 0.9rem;
                font-size: 1.2rem; font-weight: normal; font-family: var(--font-style-normal);
                color: #4a3720; line-height: 1.45; text-align: left; }
    .res-info.on { display: block; }
    .res-info strong { display: block; font-family: var(--font-style-kaiser); font-size: 1.35rem;
                       color: var(--color-primary-dark); margin-bottom: 0.3rem;
                       border-bottom: 1px solid #e6decb; padding-bottom: 0.3rem; }
    .res-info .res-tt-warn { display: block; margin-top: 0.5rem; padding-top: 0.5rem;
                             border-top: 1px solid #e6decb; color: #a83232; font-weight: bold; }
    .ressource.res-an { background: #f6f1e4; }
}
.ressource .res-plus  { color: #2f7d32 !important; }
.ressource .res-minus { color: #a83232 !important; }