@font-face {
font-family: 'Open Sans Condensed';
src:url('../fonts/OpenSansCondensed-SemiBold.woff2') format('woff2'),
url('../fonts/OpenSansCondensed-SemiBold.woff') format('woff'),
url('../fonts/OpenSansCondensed-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}

body {
margin: 0;
padding: 0;
background-color: navy;
color: white;
font-family: 'Open Sans Condensed', sans-serif;
overflow-x: hidden;
}
canvas {
background-color: navy;
border: none;
display: block;
}
.header, .footer {
width: 100%;
height: 160px;
background-color: midnightblue;
}
.display-trenner-links, .display-trenner, .display-trenner-rechts {
background-color: midnightblue;
}

.display-container {
position: relative;
width: 100%;
overflow: visible;
}

.screen-wrapper {
position: absolute;
top: 0;
left: 50%;
width: 4260px;
height: 1400px;
box-sizing: border-box;
transform-origin: top center;
}

.main-frame {
display: grid;
grid-template-columns: 200px 1920px 40px 960px 960px 200px;
grid-template-rows: 800px 280px 160px;
gap: 0;
position: relative;
background-color: navy;
width: 4260px;
height: 1080px;
transform-origin: top center;
}

.display-trenner-links { grid-column: 1; grid-row: 1 / 3; }
.display1 { grid-column: 2; grid-row: 1; }
.display1-wagenreihung { grid-column: 2; grid-row: 2; }
.display-trenner { grid-column: 3; grid-row: 1 / 3; }
.display2-zug1 { grid-column: 4; grid-row: 1; }
.display2-zug1-wagenreihung { grid-column: 4; grid-row: 2; }
.display2-zug2 { grid-column: 5; grid-row: 1; }
.display2-zug2-wagenreihung { grid-column: 5; grid-row: 2; }
.display-trenner-rechts { grid-column: 6; grid-row: 1 / 3; }
.footer { grid-column: 1 / 7; grid-row: 3; }

.hidden {
    display: none;
}

/* Improve responsiveness for form-row */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Reduced gap for smaller screens */
    justify-content: flex-start;
    align-items: flex-end; /* Align bottoms for better look */
    margin-bottom: 12px; /* Increased from 8px */
}

.form-row:last-child {
    margin-bottom: 0; /* Remove margin from last form-row in each frame */
}

/* Media queries for responsiveness */
@media (max-width: 768px) { /* Phone/tablet */
    .form-row {
        flex-direction: column; /* Stack vertically */
        align-items: stretch;
    }
    .settings-frame {
        width: 100%; /* Full width on small screens */
        padding: 8px;
    }
    .settings-frame label {
        min-width: auto;
        max-width: none;
    }
    .settings-frame input[type="text"],
    .settings-frame input[type="number"],
    .settings-frame input[type="datetime-local"] {
        min-width: auto;
        max-width: none;
        width: 100%;
    }
}

@media (min-width: 769px) and (max-width: 1400px) { /* Tablet/laptop */
    .form-row {
        gap: 15px;
    }
    .settings-frame {
        width: 80%;
    }
}

@media (min-width: 1201px) { /* Desktop */
    .form-row {
        gap: 20px;
    }
    .settings-frame {
        width: auto;
    }
}

.settings-container {
    align-items: center; /* Center frames on smaller screens */
    width: 100%;
    max-width: none;
    padding: 0 10px;
    box-sizing: border-box;
}

/* Each frame box */
.settings-frame {
background-color: navy;
color: white;
padding: 10px;
width: auto;
margin-bottom: 5px; /* Reduced from 10px */
}

.settings-frame h3 {
margin-top: 0;
margin-bottom: 8px;
border-bottom: 1px solid rgba(255,255,255,0.3);
padding-bottom: 3px;
font-size: 1.1rem;
}

/* Each row of settings */
.settings-frame .form-row {
display: flex;
flex-wrap: wrap;
gap: 20px;              /* spacing between fields */
}

/* Labels stack text above input */
.settings-frame label {
display: flex;
flex-direction: column;
font-size: 0.9rem;
font-weight: 600;
margin: 0;              /* reset inline spacing */
}

/* Text + number + datetime inputs */
.settings-frame input[type="text"],
.settings-frame input[type="number"],
.settings-frame input[type="datetime-local"] {
  background-color: white;
  color: black;
  border: none;
  padding: 5px;
  margin-top: 4px;        /* spacing between label text and field */
  border-radius: 3px;
  width: auto;            /* let the input shrink/grow naturally */
  min-width: 140px;       /* prevent it from collapsing too small */
  max-width: 250px;       /* cap width for consistent layout */
  box-sizing: border-box; /* include padding in width */
}

.settings-frame input.short-input {
  min-width: 60px; 
  max-width: 80px; /* Reduced width for specific short inputs */
}

/* Radio + checkbox inline */
.settings-frame input[type="radio"],
.settings-frame input[type="checkbox"] {
margin-right: 5px;
margin-top: 4px;        /* align vertically with text */
}

/* Buttons */
.settings-frame button {
background-color: navy;
color: white;
border: 1px solid white;
padding: 5px 10px;
cursor: pointer;
margin: 0;              /* remove uneven gaps */
border-radius: 3px;
}

.settings-frame button:hover {
background-color: #001a4d;
}

/* Special layout for radio groups */
.settings-frame label.radio-group {
flex-direction: column;      /* stack heading above */
align-items: flex-start;
font-weight: 600;
gap: 4px;                    /* space between heading and buttons */
}

/* Container for radio options inline */
.settings-frame label.radio-group .options {
display: flex;
gap: 15px;                   /* spacing between radios */
font-weight: normal;
}

.scroll-container {
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  background-color: transparent;
  pointer-events: none;
}

.scroll-text {
  display: inline-block;
  white-space: nowrap;
  padding-left: 10px; /* Add padding to match non-scrolling case */
  animation: scroll-left var(--scroll-duration, 30s) linear infinite;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0); /* Start at padding-left position */
  }
  100% {
    transform: translateX(calc(-100% + 10px)); /* Adjust for padding */
  }
}

#download-btn {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
background-color: navy;
color: white;
border: 1px solid white;
padding: 5px 10px;
cursor: pointer;
}