@charset "UTF-8";

/*
    xzindex 

    z-index table:

        .dt-direction-text:     10
        .dt-direction-gradient: 20
        #footer:                30
*/

/*
IDEA from: https://www.w3docs.com/snippets/css/how-to-create-a-blinking-effect-with-css3-animations.html
blinking usage: 'animation: blinking 2s steps(5, start) infinite;'
*/
@keyframes blinking {
	to {
		visibility: hidden;
	}
}

:root {
	/* Höhe der Datenzeilen hier einstellen (xhoehe xhöhe ) */
	--row-height: 1.38em; /*50px bei eine body-fontsize von 36px */
	--dt-row-width: 100px; /* größe von "railjet"=166px*/
	--page-background-color: #FFFFFF;
	--page-margin-left-right: 15px;
	--header-logo-position: absolute;

	--col-width-boarding: 45px;
	--col-width-scheduled-time: 3.4em;
	--col-width-actual-time: 3.4em;
	--col-width-transport-service-type-image: 171px;
	--col-width-line: 5em;
	--col-width-direction-max: 20em;
        
	--boarding-img: url('../logos/blink_r.png');
	
	--color-delayed: #ff0;
	--color-early: #660000;

	--footer-prod-color: #43a56a;
	
	/* If changed: also change testsystem styles, keyword: xtestsystem */
	--footer-target-color: var(--footer-prod-color);
	--footer-background: linear-gradient(to top, var(--footer-target-color) 40%, transparent);
	--footer-color: #d3d3d3;
	--footer-height: 4em;
	
	--header-height: 2.1em;

	--header-subheader-background-color: #43a56a;
}

@media screen and (orientation: portrait) {
  :root {
    --col-width-line: 3.5em;
	--col-width-transport-service-type-image: 80px;
  }
}

#header {
	height: 2.1em;
	border-bottom: 3px solid #ffffff;
	font-weight: bold;
	display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
	padding-top: 0.1em;
	padding-left: var(--page-margin-left-right);
	padding-right: var(--page-margin-left-right);

	background-color: var(--header-subheader-background-color);
}

#header .center {
    margin: 0 auto;
}

#header #header-logo {
	height: 100%;
}

.right{
	padding-right: var(--page-margin-left-right);
	padding-left: var(--page-margin-left-right);
}

#header #header-logo img {
	height: 68px;
	object-fit: contain; /* Bild wird proportional skaliert */

	/*Logo-Position ist in einer Flucht mit der direction-Spalte -- Position hängt von allen davorliegen Spaltenbreiten ab*/
	left: calc(var(--col-width-boarding) + var(--col-width-scheduled-time) + var(--col-width-actual-time) + var(--col-width-transport-service-type-image) + var(--col-width-line) + (3px * 5));

	position: var(--header-logo-position);
}

@media screen and (max-width: 1199px) {
	#header #header-logo img {
	  /* auf kleinen Bildschirmen kann das Logo nicht in der Flucht wie die Richtung-Spalte sein*/
	  position: static;
	}
  }

#header #header-logo-datasource {
	margin-right: var(--page-margin-left-right);
	padding-right: var(--page-margin-left-right);
}

#header-text {
	float: left;
}

#subheader {
	/* display: grid;  // bei grid wird der Platz für den Inhalt begrenzt und der Inhalt wird zu früh zweizeilig
	   grid-template-columns: repeat(2, 0.25fr); 
	*/
	display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
	padding-left: var(--page-margin-left-right);
	padding-right: var(--page-margin-left-right);

	background-color: var(--header-subheader-background-color);
}

#clock {
	/* margin und padding notwendig damit innerhalb von flex der rechte Rand entsteht*/
	margin-right: var(--page-margin-left-right);
	padding-right: var(--page-margin-left-right);
	text-align: right;
}

th.dt-header:last-child {
	padding-right: var(--page-margin-left-right);
}

div.image-boarding {
	/* https://www.w3docs.com/snippets/css/how-to-create-a-blinking-effect-with-css3-animations.html */
	animation: blinking 2s steps(5, start) infinite;
	height: 40px;

	background-image: var(--boarding-img);
    background-position-y: center;
    background-position-x: 0.25em;
    background-size: 33%;
    background-repeat: no-repeat;
	width: 60px; 
}

.dt-boarding-column {
	max-width: var(--col-width-boarding);
	min-width: var(--col-width-boarding);
	width: var(--col-width-boarding);
}

.dt-scheduled-time-column {
	width: var(--col-width-scheduled-time);
	min-width: var(--col-width-scheduled-time);
	max-width: var(--col-width-scheduled-time);
}

.dt-actual-time-column {
	width: var(--col-width-actual-time);
	min-width: var(--col-width-actual-time);
	max-width: var(--col-width-actual-time);
}

.dt-actual-time-column .early {
	/* color: #600000; // KI-Vorschlag */
	color: var(--color-early);
	font-weight: bold;
}

.dt-platform-column .changed,
.dt-actual-time-column .cancelled,
.dt-actual-time-column .delayed {
	color: var(--color-delayed);
	font-weight: bold;
}

.dt-transport-service-type-column_image {
	width: var(--col-width-transport-service-type-image);
	max-width: var(--col-width-transport-service-type-image);
	min-width: var(--col-width-transport-service-type-image);
}

.dt-line-column {
	width: var(--col-width-line);
	max-width: var(--col-width-line);
	min-width: var(--col-width-line);
	white-space: nowrap;
    overflow: hidden;
    /* text-overflow: ellipsis; */
}

.dt-direction-column {
	/* Kein Zeilenumbruch damit einzeilig */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: var(--col-width-direction-max);
	min-width: 5em;
        text-overflow: ellipsis;
}

.dt-transport-service-type-text-column {
	width: var(--col-width-transport-service-type-text);
	max-width: var(--col-width-transport-service-type-text);
}

.dt-platform-column {
	width: calc(var(--page-margin-left-right) + 2.45em);
}

div.image-div {
	height:  60px;
	width:   2em;
	margin:  0px;
	padding: 0px;
}

div.image-div40 {
	height:  40px;
	/* width:   2em; */
	margin:  0px;
	margin-right: 0.15em;
	padding: 0px;
	background-size: 40px 40px;
	background-repeat: no-repeat;
	background-position-x: right;

	--image-height: 40px;
}

/* xTransportServiceType */

div#STRASSENBAHN {
	background-image: url('../logos/bim_klein.gif');
}

div#STADTBUS, div#SCHNELLBUS, div#FERNBUS, div#EXPRESSBUS, div#SCHIENENERSATZVERKEHR { /* We could put our own SEV logo here too */
	background-image: url('../logos/bus_klein.gif');
}

div#NACHTBUS {
	background-image: url('../logos/nachtbus.gif');
}

div#REGIONALBUS {
	background-image: url('../logos/regionalbus.gif');
}

div#O_BUS {
	background-image: url('../logos/obu.gif');
	--aspect-ratio: 166 / 60;
	background-size: calc(var(--image-height) * var(--aspect-ratio)) var(--image-height); 
}

#BUS_ZUG {
	background-image: url('../logos/hmp.gif'); /* als auch hog.gif, nmg.gif, nmp.gif */
	--aspect-ratio: 166 / 60;
	background-size: calc(var(--image-height) * var(--aspect-ratio)) var(--image-height); 
}

div#D_ZUG {
	background-image: url('../logos/d.gif');
	--aspect-ratio: 166 / 60;
	background-size: calc(var(--image-height) * var(--aspect-ratio)) var(--image-height); 
}

div#DPN_ZUG {
	background-image: url('../logos/dpn.gif');
	--aspect-ratio: 166 / 60;
	background-size: calc(var(--image-height) * var(--aspect-ratio)) var(--image-height); 
}

div#REGIONALZUG {
	background-image: url('../logos/r.gif');
	--aspect-ratio: 84 / 60;
	background-size: calc(var(--image-height) * var(--aspect-ratio)) var(--image-height); 
}

div#RB_ZUG {
	background-image: url('../logos/rb.gif');
	--aspect-ratio: 166 / 60;
	background-size: calc(var(--image-height) * var(--aspect-ratio)) var(--image-height); 
}

div#REGIONALEXPRESS {
	background-image: url('../logos/rex.gif');
	--aspect-ratio: 84 / 60;
	background-size: calc(var(--image-height) * var(--aspect-ratio)) var(--image-height); 
}

div#RAILJET {
	background-image: url('../logos/rj.gif');
	--aspect-ratio: 166 / 60;
	background-size: calc(var(--image-height) * var(--aspect-ratio)) var(--image-height); 
}

div#S_BAHN {
	background-image: url('../logos/s.gif');
	--aspect-ratio: 84 / 60;
	background-size: calc(var(--image-height) * var(--aspect-ratio)) var(--image-height); 
}

div#ZUG {
	background-image: url('../logos/zug_klein_ab27032025.gif');
}

div#INTERCITY {
	background-image: url('../logos/ic.gif');
	--aspect-ratio: 166 / 60;
	background-size: calc(var(--image-height) * var(--aspect-ratio)) var(--image-height); 
}

div#EUROCITY {
	background-image: url('../logos/ec.gif');
	--aspect-ratio: 166 / 60;
	background-size: calc(var(--image-height) * var(--aspect-ratio)) var(--image-height); 
}

div#EURONIGHT {
	background-image: url('../logos/en.gif');
	--aspect-ratio: 166 / 60;
	background-size: calc(var(--image-height) * var(--aspect-ratio)) var(--image-height); 
}

#footer {
    position: fixed;
    bottom: 0;
    height: var(--footer-height);
    font-size: 0.5em;
    width: 100vw;
    background: var(--footer-background);
    align-items: flex-end;
    display: flex;
	justify-content: space-between;


	color: var(--footer-color);
	/* derzeit nicht von den Standard-Margins abhängig, damit nie am Seitenrand ansteht wenn Standard-Margins 0*/
    z-index: 30;
}

#footer a, #footer a:visited  {
	color: inherit;
	margin-bottom: 5px;
}

#footer-text {
	margin-bottom: 5px;
	margin-left: var(--page-margin-left-right);
}

#footer-status {
	text-align: right;
	margin-bottom: 5px;
	margin-right: var(--page-margin-left-right);
}

.no-wrap-column {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 20em; /* Lege eine maximale Breite fest, zwingend notwendig */
  }

  
@media screen and (max-width: 1500px), screen and (orientation: portrait) {
        /* on small screens, hide every column after that one */
        tr > :nth-child(n+7) {
                display: none;
                visibility: hidden;
        }
        
        .dt-direction-column {
                max-width: calc( 100vw -
                    var(--col-width-boarding) - 
                    var(--col-width-scheduled-time) - 
                    var(--col-width-actual-time) - 
                    var(--col-width-transport-service-type-image) - 
                    var(--col-width-line) -
                    1em);
                
        	min-width: 2em;
        }
}

.dt-direction-grid {
        /* .dt-direction-gradient needs to be on top of .dt-direction-text */
        /* using grid to gain more control over behaviour */
        display: grid;

        grid-template-columns: 100%; 
        grid-template-rows: 100%; 
        
        width: 100%;
        height: 100%;
}

.dt-direction-grid > * {
        /* both occupy the same space*/
        grid-row: 1 / 2;
        grid-column: 1 / 2;
}

.dt-direction-text {
        width: 100%;
        z-index: 10;
        justify-self: start;
        overflow: hidden;
}

.dt-direction-gradient {
        width: 1.1em;
        height: 100%;
        z-index: 20;
        justify-self: end;
}

.dt-even-row  .dt-direction-gradient {
        background: linear-gradient(to left, var(--even-row-background-color) 10%, transparent);
}
.dt-odd-row  .dt-direction-gradient {
        background: linear-gradient(to left, var(--odd-row-background-color) 10%, transparent);
}

#infobox {
        bottom: 0;
        left: 0;
        right: 0;
        background-color: var(--infobox-background-color);
        height: var( --infobox-height); /* 2 for the text, .5 for the footer. 0.5em for the top padding */
        position: fixed;
        
        box-sizing: border-box;
        padding: 0.25em;
}

#infobox-text {
        background-color: transparent;
        max-height: calc(var(--column-height) * 2);
        color: #000000;
        white-space: pre-line; /* Interpret \n etc correctly */
        overflow: hidden;
        text-overflow: ellipsis;
}