/* Immer ganze Dateien, immer hier im Chat, css immer alphabetisch sortieren */

:root {
--bg: #ece9e5;
--body-font: Verdana, Arial, Helvetica, sans-serif;
--content-offset-left: 0px;
--header-col-gap: 48px;
--header-height: 200px;
--image-width: 455px;
--left-band-height: 154px;
--logo-width: 326px;
--menu-gap-x: 18px;
--menu-gap-y: 2px;
--menu-height: 16px;
--menu-left: 0px;
--menu-top: 140px;
--menu-width: 430px;
--middle-width: 134px;
--page-width: 1080px;
--right-block-shift: 181px;
--sub-top: 69px;
--subsub-top: 69px;
--subsub-width: 232px;
--text-width: 320px;
--thumb-gap: 0px;
--thumb-width: 20px;
--thumbs-width: 42px;
--title-bar-height: 7px;
--title-bar-width: 121px;
--title-gap: 10px;
--title-offset-left: 650px;
--title-top: 12px;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

a {
color: inherit;
text-decoration: none;
}

.bildMitRahmen {
border: 1px solid #9a9a9a;
cursor: pointer;
display: block;
height: auto;
max-width: none;
object-fit: contain;
width: var(--image-width);
}

body {
align-items: center;
background: var(--bg);
color: #000;
display: flex;
flex-direction: column;
font-family: var(--body-font);
min-height: 100vh;
padding-top: var(--header-height);
position: relative;
}

body::before {
background: #c0c0c0;
content: "";
height: calc(var(--header-height) + var(--left-band-height));
left: 0;
position: fixed;
top: 0;
width: calc(50vw + (var(--page-width) / 2) + 25px);
z-index: 0;
}

.brand-logo {
display: block;
max-width: 100%;
width: var(--logo-width);
}

.bridge-strip {
height: var(--left-band-height);
position: relative;
width: var(--page-width);
}

.bridge-tile {
display: block;
position: absolute;
}

.bridge-tile img {
border: 1px solid #9a9a9a;
cursor: pointer;
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}

.bridge-tile:hover img {
border-color: #cc0000;
}

.content-grid {
align-items: start;
display: grid;
grid-template-columns: var(--text-width) 1fr var(--thumbs-width) var(--image-width);
margin-left: var(--content-offset-left);
width: var(--page-width);
}

.fixed-header {
background: var(--bg);
height: var(--header-height);
left: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}

.fliesstext {
color: #000;
font-size: 0.9rem;
font-weight: normal;
line-height: 1.25;
margin: 0 0 1.5em 0;
overflow-wrap: break-word;
white-space: normal;
word-break: normal;
}

.fliesstextGrau {
color: #666666;
font-size: 0.75rem;
font-weight: normal;
line-height: 1.25;
margin: 0 0 1.5em 0;
overflow-wrap: break-word;
white-space: normal;
word-break: normal;
}

.fliesstextRot {
color: #cc0033;
font-size: 0.9rem;
font-weight: normal;
line-height: 1.25;
margin: 0 0 1.5em 0;
overflow-wrap: break-word;
white-space: normal;
word-break: normal;
}

.header-grid {
align-items: start;
column-gap: var(--header-col-gap);
display: grid;
grid-template-columns: var(--logo-width) var(--middle-width) var(--subsub-width);
min-height: 200px;
padding-top: 18px;
position: relative;
width: var(--page-width);
}

.hidden {
display: none !important;
}

.inline-title-large {
font-size: 0.97rem;
font-weight: bold;
line-height: 1;
white-space: nowrap;
}

.inline-title-small {
font-size: 0.59rem;
line-height: 1;
white-space: nowrap;
}

.logo-area {
grid-column: 1;
grid-row: 1;
margin-top: 71px;
width: var(--logo-width);
}

.logo-link {
display: block;
width: var(--logo-width);
}

.m_SubTitle_Grau {
color: #000000;
font-size: 0.9em;
font-weight: normal;
line-height: 1.25;
margin: 0 0 1.5em 0;
overflow-wrap: break-word;
white-space: normal;
word-break: normal;
}

.m_SubTitle_GrauRed {
color: #cc0033;
font-size: 0.9em;
font-weight: normal;
line-height: 1.25;
margin: 0 0 1.5em 0;
overflow-wrap: break-word;
white-space: normal;
word-break: normal;
}

.main-image-box {
grid-column: 4;
width: var(--image-width);
}

.main-image-box img {
border: 1px solid #9a9a9a;
cursor: pointer;
display: block;
height: auto;
max-width: none;
object-fit: contain;
width: var(--image-width);
}

.main-navigation {
display: grid;
gap: 0 var(--menu-gap-x);
grid-template-columns: repeat(4, max-content);
left: var(--menu-left);
min-width: var(--menu-width);
position: absolute;
top: var(--menu-top);
width: var(--menu-width);
}

.main-sub-area {
grid-column: 2;
grid-row: 1;
margin-left: var(--right-block-shift);
padding-top: var(--sub-top);
width: var(--middle-width);
}

.menu-btn {
display: block;
line-height: 0;
margin: 0;
padding: 0;
position: relative;
}

.menu-btn img {
border: none;
display: block;
height: var(--menu-height) !important;
max-width: none !important;
width: auto !important;
}

.menu-btn img.img-red {
display: none;
}

.menu-btn.active img.img-black,
.menu-btn:hover img.img-black {
display: none;
}

.menu-btn.active img.img-red,
.menu-btn:hover img.img-red {
display: block;
}

.menu-btn-empty {
cursor: default;
display: block;
line-height: 0;
margin: 0;
opacity: 0;
padding: 0;
pointer-events: none;
position: relative;
}

.menu-btn-empty img {
border: none;
display: block;
height: var(--menu-height) !important;
max-width: none !important;
width: auto !important;
}

.mini-thumbnail {
border: 1px solid #c7c7c7;
cursor: pointer;
display: block;
object-fit: cover;
width: var(--thumb-width);
}

.mini-thumbnail:hover {
border-color: #cc0000;
}

.page-shell {
margin: 0 auto;
position: relative;
width: var(--page-width);
z-index: 1;
}

.scrollable-content {
display: block;
margin-top: calc(var(--left-band-height) * -1);
padding: 0;
position: relative;
width: 100%;
z-index: 2;
}

/* =========================================
   Bridge-spezifische Korrekturen (2026-07-03, 19:10)
   Gültig für Seiten mit <body class="bridge-page">
   ========================================= */

.bridge-page .scrollable-content {
  /* Kein Hochschieben für Bridges */
  margin-top: 0;
  position: static;
  z-index: auto;
}

/* Falls nötig: Bridge-Strip neutral einbetten */
.bridge-page .bridge-strip {
  margin-top: 0;
}

.sub-column {
align-items: start;
display: flex;
flex-direction: column;
gap: var(--menu-gap-y);
width: var(--middle-width);
}

.subsub-area {
grid-column: 3;
grid-row: 1;
margin-left: var(--right-block-shift);
padding-top: var(--subsub-top);
width: var(--subsub-width);
}

.subsub-column {
display: block;
width: var(--subsub-width);
}

.subsub-matrix {
display: grid;
gap: var(--menu-gap-y) 0;
grid-auto-rows: var(--menu-height);
grid-template-columns: 116px 116px;
width: var(--subsub-width);
}

.text-box {
grid-column: 1;
min-width: 0;
overflow: hidden;
padding-right: 8px;
width: var(--text-width);
}

.thumb-link {
display: block;
line-height: 0;
}

.thumbs-box {
display: block;
grid-column: 3;
width: var(--thumbs-width);
}

.thumbs-columns {
column-gap: 2px;
display: grid;
grid-template-columns: var(--thumb-width) var(--thumb-width);
justify-content: start;
width: var(--thumbs-width);
}

.thumbs-columns.thumbs-count-2 .mini-thumbnail {
height: 154px;
}

.thumbs-columns.thumbs-count-4 .mini-thumbnail {
height: 77px;
}

.thumbs-columns.thumbs-count-6 .mini-thumbnail {
height: 51.3333px;
}

.thumbs-left,
.thumbs-right {
display: flex;
flex-direction: column;
gap: 0;
}

.Title {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.1rem;
font-weight: bold;
text-decoration: none;
}

.title-bar {
background: #bdbdbd;
height: var(--title-bar-height);
width: var(--title-bar-width);
}

.title-container {
align-items: baseline;
display: flex;
gap: 4px;
min-width: 0;
}

.title-row {
display: none;
}

.title-text-large {
font-size: 0.82rem;
font-weight: bold;
line-height: 1;
white-space: nowrap;
}

.title-text-small {
font-size: 0.5rem;
line-height: 1;
white-space: nowrap;
}

@media (max-width: 1400px) {
body {
align-items: flex-start;
padding-left: 40px;
}

body::before {
width: calc(50vw + (var(--page-width) / 2) + 25px);
}
}