/*
https://htmlcolors.com/hex-to-hsl
*/

:root {
  --hue-base: 220;
  --sat-base: 15%;
  --rot-base: 0deg;
  --font-scale: 1;
  --overscan-x: 0vw;
  --overscan-y: 0vh;
  --selected-background: hsl(var(--hue-base), var(--sat-base), 50%);
  --colored-font: hsl(var(--hue-base), var(--sat-base), 25%);
  --selectedable-background: hsl(var(--hue-base), var(--sat-base), 70%);
  --button-background: hsl(var(--hue-base), calc(1.9 * var(--sat-base)), 70%);
  
  --regular-background: hsl(var(--hue-base), var(--sat-base), 10%); /* #8e9ab4 */
  --row2-background: hsl(var(--hue-base), var(--sat-base), 13%); /* #828fab */
  
  
  --medium-background: hsl(var(--hue-base), var(--sat-base), 20%); /* #6f7f9f */
  --dark-background: hsl(var(--hue-base), var(--sat-base), 5%); /* #5c6b8a */
 /*
  --text-color: hsl(var(--hue-base), var(--sat-base), 75%); 
  --text-high-color: hsl(var(--hue-base), var(--sat-base), 90%); 
  --text-gray-color: hsl(var(--hue-base), var(--sat-base), 55%); 
  --text-dkgray-color: hsl(var(--hue-base), var(--sat-base), 40%); 
  */
  
  --text-color: hsl(var(--hue-base), var(--sat-base), 75%); 
  --text-high-color: hsl(var(--hue-base), var(--sat-base), 85%); 
  --text-gray-color: hsl(var(--hue-base), var(--sat-base), 55%); 
  --text-dkgray-color: hsl(var(--hue-base), var(--sat-base), 35%); 
  
  
}

* {
    margin: 0;
    padding: 0;
	line-height: normal;
} 

html {
	background-color: #000000; 
	background-color: var(--regular-background,#000000);
	width: 100%;
	height: 100%;
	scroll-behavior: smooth;
	
} 

body {
	font-weight: normal;
	font-size: 11px; 
	color: var(--text-color,#f0f1f5);
	background-color: #000000; 
	background-color: var(--regular-background,#000000);
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;

	/*
	line-height: 1.3;
	*/
	
	font-style: normal;
	FONT-FAMILY: "Segoe UI", Tahoma, Verdana, Arial, Helvetica, "MS Sans Serif", sans-serif;
}

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

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

a:hover { 
	color: inherit;
	text-decoration: underline;
}

a:active { 
	color: inherit;
	text-decoration: underline;
}

.thhead { 
	background-color: #5c6b8a; /* fallback */	  
	background-color: var(--dark-background,#5c6b8a);
	position: -moz-sticky;
	position: -ms-sticky;
	position: -o-sticky;
	position: -webkit-sticky;
	position: sticky;
	-webkit-appearance: none;	
	top: 0px;
	z-index: 999;
	overflow-y: visible;
	
	border-radius: 5vw;
}

table.table_fahrplan {
    border-collapse: collapse;
	padding: 0px;

    color: var(--text-color,#f0f1f5);
			
	background-color: #000000; 
	background-color: var(--regular-background,#000000);
			
	width: 100%;
	height: 100%;
	border-spacing: 0px;
	border: 0px;
		
    text-align: left;
	font-weight: bold;

	font-size: 220%;
	font-size: 3.2vw;
	font-size: clamp(calc(6px * var(--font-scale)), calc(3.6vw * var(--font-scale)), calc(100px * var(--font-scale)));
	
    font-style: normal;
    
}

.rotate90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.rotate270 {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}


scaleimage {
	max-width: 100%;
	height: auto;
}

table tr.bordersum {
	border-top-style: solid;
	border-top-color: #5c6b8a; 
	border-top-color: var(--dark-background,#5c6b8a);
	border-top-width: 2px;

	border-bottom-style: solid;
	border-bottom-color: #5c6b8a; 
	border-bottom-color: var(--dark-background,#5c6b8a);
	border-bottom-width: 3px;
}

.optional {
	display: table-cell;
}


@media screen and (max-device-width: 650px) and (orientation: portrait){
	.optional {
	   display:none!important;
	}
}	

@media screen and (max-device-width: 650px) and (orientation: landscape){
	.optional {
		display: table-cell!important;
	}
}	

@media screen and (orientation: landscape){
	.table_fahrplan {
		font-size: clamp(calc(14px * var(--font-scale)), min(calc(1.45vw * var(--font-scale)), calc(2.3vh * var(--font-scale))), calc(112px * var(--font-scale)))!important;
	}
}	

td {
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 5px;
	padding-right: 5px;  
	
	padding-top: min(15px, 1.6vw);
	padding-bottom: min(15px, 1.6vw);
	padding-left: min(3px, 1.4vw);
	padding-right: min(3px, 1.4vw);  
}

th {
	padding-top: 6px;
	padding-bottom: 8px;
	padding-left: 5px;
	padding-right: 5px;  
	
	padding-top: min(6px, 1.0vw);
	padding-bottom: min(8px, 1.0vw);
	padding-left: min(3px, 1.4vw);
	padding-right: min(3px, 1.4vw);  
	
    font-weight: normal;
	
	background-color: #5c6b8a; /* fallback */	  
	background-color: var(--dark-background,#5c6b8a);
	
}

.mediumback {
	background-color: var(--medium-background,#5c6b8a);	
	
}




table tr.tralt:nth-child(even) {
	background-color: #8491AB; /* fallback */	  
	background-color: var(--regular-background,#8491AB);
}

table tr.tralt:nth-child(odd) {
    background-color: #8C99B3; /* fallback */	
	background-color: var(--row2-background,#8C99B3);
}

.textlight {
    color: var(--text-high-color,#f0f1f5);
}	

.textgrey {
    color: var(--text-gray-color,#f0f1f5);
}	

.textdkgrey {
    color: var(--text-dkgray-color,#f0f1f5);
}	

.textred {
    color: hsl(0, 65%, 40%);
}	

.alnleft {
	text-align: left!important;
}

.alntop {
	vertical-align: top!important;
}

.alvcenter {
	vertical-align: center!important;
}

.alncenter {
	text-align: center!important;
}

.alnright {
	text-align: right!important;
}

.column {
    float: left;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.nobr { 
	white-space: nowrap 
}

.bold {
	font-weight: bold!important;
}

.normal {
	font-weight: normal!important;
}

.font40 {
	font-size: 40%;
}

.font50 {
	font-size: 50%;
}

.font60 {
	font-size: 60%;
}

.font80 {
	font-size: 80%;
}

.font125 {
	font-size: 125%;
}

.font150 {
	font-size: 150%;
}

.font200 {
	font-size: 200%;
}

.hidden {
  display: none;
}

/* Overscan-Rand in derselben dunklen Farbe wie Kopf und Footer. */
html:has(> body.station-overview),
html:has(> body.station-single),
body.station-overview,
body.station-single { background-color: var(--dark-background); }

/* Optionale Mehrfachansicht: ?multi=1 */
body.station-overview {
	width: 100%;
	height: 100vh;
	height: 100dvh;
	box-sizing: border-box;
	padding: var(--overscan-y) var(--overscan-x);
	overflow: hidden;
}
.station-grid {
	display: grid;
	width: 100%;
	height: 100%;
	gap: 2px;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
}
.station-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.station-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.station-grid-4 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
}
.station-grid iframe {
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	border: 0;
}
.station-message { align-self: center; text-align: center; font-size: calc(20px * var(--font-scale)); }

/* Jede eingebettete Anzeige passt sich an ihre eigene Breite an. */
.station-frame table.table_fahrplan {
	table-layout: fixed;
	font-size: clamp(calc(10px * var(--font-scale)), calc(2.7vw * var(--font-scale)), calc(28px * var(--font-scale))) !important;
}
.station-frame td, .station-frame th { overflow-wrap: anywhere; }
.station-frame .nobr { white-space: normal; }
.station-frame .thhead { border-radius: 0; }

/* Drei Spalten: Schrift etwa so gross wie in der Zweispaltenansicht. */
.station-frame-three table.table_fahrplan {
	font-size: clamp(calc(10px * var(--font-scale)), calc((4.05vw + 0.027px) * var(--font-scale)), calc(28px * var(--font-scale))) !important;
}

/* Hide scrollbar controls while keeping wheel, touchpad and touch scrolling. */
* { scrollbar-width: none; }
::-webkit-scrollbar { display: none; width: 0; height: 0; }
body.station-overview { display: flex; flex-direction: column; }
.station-overview > .station-grid { flex: 1; min-height: 0; height: auto; }
.overview-footer { flex: none; padding: 5px 8px; color: var(--text-gray-color); background: var(--dark-background); font-size: 11px; }
.overview-footer div { line-height: 1.4; }
.station-overview-frame .station-heading,
.station-overview-frame .station-heading span { text-align: left !important; }
.station-overview-frame .station-heading { padding-top: 4px; padding-bottom: 4px; }
.station-overview-frame .station-distance { display: block; margin-top: 2px; }
.station-overview-frame .station-distance br { display: none; }

/* Zeitangaben bleiben zusammen; bei Platzmangel nur Zahl und Min. */
.departure-time, .departure-countdown, .departure-line { display: inline-block; white-space: nowrap; overflow-wrap: normal; }
.countdown-compact .countdown-long { display: none; }

.departure-message { display: block; }
.departure-message-repeat { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Mehrere Haltestellen als getrennte Flaechen statt einer durchgehenden Tabelle. */
.station-grid:is(.station-grid-2, .station-grid-3, .station-grid-4) {
    box-sizing: border-box;
    padding: clamp(6px, 0.65vw, 12px);
    gap: clamp(12px, 1.2vw, 20px);
    background: #080a0d;
}
.station-grid:is(.station-grid-2, .station-grid-3, .station-grid-4) iframe {
    border-radius: 9px;
    background: var(--regular-background);
    box-shadow: 0 3px 12px rgb(0 0 0 / 25%);
}

/* Verbindungsfehler bleiben auch beim Scrollen klar erkennbar. */
#departure-error { caption-side: top; text-align: left; padding: 10px; background: #332b1c; color: #efcf98; font-size: 14px; font-weight: normal; }
#departure-error[hidden] { display: none; }
.connection-message { display: block; font-weight: bold; }
.connection-detail { display: block; margin: 5px 0; font-size: 12px; }
#departure-error button, .connection-panel button { padding: 6px 10px; color: inherit; background: #252932; border: 1px solid #606574; border-radius: 5px; cursor: pointer; }
.connection-page { display: grid; place-items: center; min-height: 100vh; }
.connection-panel { max-width: 620px; margin: 20px; padding: 24px; background: var(--row2-background); border-radius: 9px; font-size: 16px; }
.connection-panel h1 { font-size: 24px; margin-bottom: 16px; }
.connection-panel p { line-height: 1.5; margin-bottom: 16px; }

/* Only visible panels determine the grid; empty panels continue polling. */
.overview-footer[hidden], .station-grid > [hidden] { display: none !important; }

/* Four visible panels: compact column headings and departure rows. */
.station-frame-four .thhead > tr:last-child { font-size: 65%; }
.station-frame-four .thhead > tr:last-child > th { padding-top: 3px; padding-bottom: 4px; }
.station-frame-four #departures > tr > td { padding-top: min(7px, 0.8vw); padding-bottom: min(7px, 0.8vw); }
.station-frame-four #departures > tr > td,
.station-frame-four #departures .departure-message { line-height: 1.15; }

/*
 * Resolution-independent kiosk typography.
 * Reference: 1920x1200 with 28px timetable text. Each iframe scales by its
 * available width and height, so 16:9, 16:10 and HiDPI fullscreen displays
 * keep the same proportions without a breakpoint jump.
 */
html:has(body.station-overview-frame) { overflow-x: hidden; overflow-y: auto; }
body.station-overview-frame {
    --timetable-font-size: clamp(calc(14px * var(--font-scale)), min(calc(3vw * var(--font-scale)), calc(2.45vh * var(--font-scale))), calc(112px * var(--font-scale)));
    overflow: visible;
}
body.station-overview-frame.station-frame-three {
    --timetable-font-size: clamp(calc(14px * var(--font-scale)), min(calc(4.5vw * var(--font-scale)), calc(2.45vh * var(--font-scale))), calc(112px * var(--font-scale)));
}
body.station-overview-frame.station-frame-four {
    --timetable-font-size: clamp(calc(14px * var(--font-scale)), min(calc(3vw * var(--font-scale)), calc(5vh * var(--font-scale))), calc(112px * var(--font-scale)));
}
.station-overview-frame table.table_fahrplan { font-size: var(--timetable-font-size) !important; height: auto; }
.station-overview-frame .station-heading > .font200 { font-size: 180%; }
.station-overview-frame .station-distance { font-size: 64.2857%; }
.station-overview-frame #departures .font60 { font-size: 64.2857%; }
.station-overview-frame #departures > tr > td { padding-top: 0.357em; padding-bottom: 0.357em; }
.station-overview-frame.station-frame-four #departures > tr > td { padding-top: 0.214em; padding-bottom: 0.214em; }
.station-overview-frame.station-frame-four .thhead > tr:last-child { font-size: 70%; }
.station-overview-frame #content > tbody:not(#departures) { display: none; }
.station-overview-frame #departure-error { font-size: 64.2857%; }
.station-overview-frame .connection-detail { font-size: 88.8889%; }
.overview-footer { font-size: clamp(calc(8px * var(--font-scale)), min(calc(0.625vw * var(--font-scale)), calc(1vh * var(--font-scale))), calc(48px * var(--font-scale))); color: hsl(var(--hue-base), var(--sat-base), 47%); }
.table_fahrplan > tfoot > tr { font-size: 35%; color: hsl(var(--hue-base), var(--sat-base), 30%); }

/* Einzelansicht: Footer bleibt im Vollbild sichtbar und verdeckt keine letzte Zeile. */
body.station-single {
    --single-footer-reserve: clamp(calc(64px * var(--font-scale)), min(calc(4vw * var(--font-scale)), calc(6vh * var(--font-scale))), calc(144px * var(--font-scale)));
    box-sizing: border-box;
    padding: var(--overscan-y) var(--overscan-x) calc(var(--single-footer-reserve) + var(--overscan-y));
}
body.station-single .table_fahrplan > tfoot {
    position: fixed;
    z-index: 1000;
    left: var(--overscan-x);
    right: var(--overscan-x);
    bottom: var(--overscan-y);
    display: table;
    box-sizing: border-box;
    width: auto;
    table-layout: fixed;
    background: var(--dark-background);
    box-shadow: 0 -3px 12px rgb(0 0 0 / 35%);
}
body.station-single .table_fahrplan > tfoot > tr {
    font-size: clamp(calc(8px * var(--font-scale)), min(calc(0.625vw * var(--font-scale)), calc(1vh * var(--font-scale))), calc(48px * var(--font-scale)));
}
body.station-single .table_fahrplan > tfoot td { padding: 0.5em; }

/* Compact station heading without reducing the readable type size. */
.station-overview-frame .thhead > tr:first-child > th { padding-top: 0; padding-bottom: 2px; }
.station-overview-frame .station-heading { padding-top: 0; padding-bottom: 0; }
.station-overview-frame .station-heading > .font200 { display: block; line-height: 1.1; }

.departure-target { display: block; max-width: 100%; overflow: hidden; white-space: normal; overflow-wrap: normal; word-break: normal; text-overflow: ellipsis; }

.departure-realtime { font-size: 75%; white-space: nowrap; overflow-wrap: normal; }

/* Adjustable light text in departure rows; headings and semantic colors stay intact. */
#departures {
    --text-color: hsl(var(--hue-base), var(--sat-base), calc(var(--departure-brightness, 100%) * 0.75));
    --text-high-color: hsl(var(--hue-base), var(--sat-base), calc(var(--departure-brightness, 100%) * 0.85));
    color: var(--text-color);
}

/* Limit all notices of one departure together; default: five lines. */
#departures p.textgrey.font60 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--notice-lines, 5);
    overflow: hidden;
    line-height: 1.15;
    max-height: calc(var(--notice-lines, 5) * 1.15em);
}
#departures p.textgrey.font60 .departure-message { line-height: inherit; }

#departures[data-noticelines="0"] p.textgrey.font60 { display: none; }

/* Shared location options: one unobtrusive control above the display. */
.options-toggle { position:fixed; top:calc(8px + var(--overscan-y)); right:calc(12px + var(--overscan-x)); z-index:1001; width:36px; height:36px; padding:6px; border:0; border-radius:50%; background:#15171be6; color:#8993a6; cursor:pointer; opacity:.75; }
.options-toggle:hover, .options-toggle:focus-visible { opacity:1; background:#2b303a; outline:2px solid #8993a6; }
.options-toggle img { display:block; }
#location-options { margin:auto; box-sizing:border-box; width:min(620px, calc(100vw - 32px)); max-height:calc(100dvh - 40px); overflow:auto; border:1px solid #414855; border-radius:14px; padding:24px; background:#1d2027; color:#b6bcc9; box-shadow:0 16px 60px #0009; font:16px/1.4 system-ui,sans-serif; }
#location-options::backdrop { background:#06080bb8; }
#options-form { margin:0; }
#options-form header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
#options-form h2 { margin:0; font-size:25px; font-weight:600; }
#options-form header p { margin:4px 0 0; color:#8993a6; }
#options-form #options-close { font-size:27px; padding:0 8px; border:0; background:transparent; color:#9ba6ba; }
.options-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.options-fields label { display:flex; flex-direction:column; gap:6px; font-size:14px; color:#a3adbe; }
.options-fields input, .options-fields select { box-sizing:border-box; width:100%; min-width:0; height:40px; padding:8px 10px; border:1px solid #454d5c; border-radius:6px; background:#14171d; color:#c4cad5; font:16px system-ui,sans-serif; color-scheme:dark; }
.options-fields input:focus, .options-fields select:focus { outline:2px solid #8495b4; outline-offset:1px; }
.options-note { margin:18px 0 0; color:#8591a6; font-size:13px; }
#options-message { min-height:1.4em; margin:14px 0; color:#dfb879; }
#options-form footer { display:flex; justify-content:flex-end; gap:10px; }
#options-form button { cursor:pointer; font:15px system-ui,sans-serif; padding:9px 15px; border:1px solid #505b70; border-radius:6px; color:#c9cfdb; background:#292f3b; }
#options-form #options-save { background:#485b78; border-color:#647a9a; color:#eef1f6; }
#options-form button:disabled { opacity:.5; cursor:wait; }
@media(max-width:520px) { .options-fields { grid-template-columns:1fr; } #location-options { padding:18px; } }

.location-selection { min-height:100vh; display:grid; place-items:center; margin:0; padding:24px; box-sizing:border-box; background:#0b0c0f; color:#b6bcc9; font:18px/1.5 system-ui,sans-serif; }
.location-selection main { box-sizing:border-box; width:min(560px,100%); padding:28px; border-radius:14px; background:#1d2027; box-shadow:0 12px 40px #0005; }
.location-selection h1 { margin:0 0 12px; font-size:28px; }
.location-selection p { margin:0 0 20px; color:#929db0; }
.location-selection nav { display:grid; gap:10px; }
.location-selection nav a { display:block; padding:12px 16px; border:1px solid #414b5d; border-radius:7px; background:#292f3b; color:#c1c9d8; text-decoration:none; overflow-wrap:anywhere; }
.location-selection nav a:hover, .location-selection nav a:focus-visible { background:#354155; outline:2px solid #8495b4; outline-offset:2px; }

.overview-footer .footer-heading { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 16px; }
.overview-footer .footer-cookie-note { margin-left:auto; text-align:right; }