@font-face {
font-family: 'Segoe UI';
font-style: normal;
font-weight: 400;
src: local('Segoe MT UI'), url('segoe-mt.WOFF') format('woff');
font-display:swap;
}
@font-face {
font-family: 'Segoe UI';
font-style: normal;
font-weight: bold;
src: local('Segoe MT UI Bold'), url('segoe-mt-semibold.WOFF') format('woff');
font-display:swap;
}
html,body{height:100%;font-size:67.5%;color:#000;scroll-behavior:smooth;}
a{-webkit-touch-callout: none;-webkit-user-select: none}
body	{ font-family:'Segoe UI',Helvetica,Arial; font-weight:400; font-size:1.2em; margin:0;background:#FFF;color:#000;transition:all .5s }
h1	{ font-size:2.4em;line-height:1.4em;font-weight:400;margin:.25em 10px }
h2	{ font-size:1.2em;line-height:1.6em;font-weight:400;margin:.25em 10px  }
h3	{ font-size:1em; margin:0;white-space:normal }
p	{ margin:0 10px }
th	{ border-bottom:1px solid #EFEFEF;border-top:1px solid #EFEFEF; font-weight:normal;text-transform:uppercase; text-align:left;font-size:0.95em;max-width:95px;overflow:hidden;padding:0.5em 0.25em;line-height:1.5em;height:3em;color:#000;background:rgba(255,255,255,0.3);position:sticky }
td	{ border-bottom:1px solid #EFEFEF; text-align:left;font-size:0.95em;max-width:95px;overflow:hidden;padding:0.5em 0.25em;line-height:1.5em;height:3em;text-overflow: ellipsis }
td, td * { transition:transform .5s }
td table td{height:1em;padding:0.4em} /*Zuginfo-Subtables*/
th a.tableorder { display:inline-block;transform:scaleX(1.2) translateY(-1px);padding-left:2px;color:rgba(0,0,0,0.3); }
th a.orderactive { color:rgba(0,0,0,1); }
tr[onclick] {cursor:pointer}
tr:hover { background-color:#FDD !important }
tr:nth-child(even) {background-color: #F8F8F8}
tr.bewertung {background-color: #FEE}
tr.bewertung td {border-bottom:2px solid #FFF}

#tabs { font-size:1.5em;line-height:1.5em }
#tabs a { display:inline-block;padding:0 0.5em }
#tabs a.active { border-bottom:2px solid #D32F2F; }
.tab { position:relative;vertical-align:top;display:inline-block;overflow:hidden;transition:left .6s ease, width .4s ease }

.filterselector { margin:0.5em;padding:0.5em;display:inline-block;border-bottom:1px solid #EEE;min-width:20vw }
.filterselect { margin:0.5em -1em;z-index:10;background:#FFF;position:absolute;max-height:50vh;overflow:auto;line-height:3em;white-space:nowrap;min-width:15vw;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px }
.filterselect a {display:block;padding:0 1em}
.filterselect a:hover {background:rgba(0,0,0,0.1)}

#mt {position:absolute;top:-10em;box-sizing:border-box;width:100%;z-index:1000;border-bottom:1px solid #DDD;display:block;margin:0;transition:all .4s ease}
#mt p {color:#FFF;font-size:1em;margin:1em}
#mt span {background:#FFF;display:block;vertical-align:middle}
.mtError    {background:#D32F2F;top:0px !important}
.mtWarning{background:#C47000;top:0px !important}
.mtSuccess{background:#388E3C;top:0px !important}
button.secondary{ background:transparent;border:transparent;font-size:1em;cursor:pointer;padding:0.25em;margin:0.25em }
button.secondary:hover{ background:#CCC; }

#textform fieldset label { display:block; float:left; width:200px; text-align:right; margin:5px 5px 0px 0px}
#textform fieldset input { margin:5px 5px 0px 0px }

#appbar {position:fixed;bottom:calc(1.6em + 4px);height:44px;padding:0;width:100%;left:0;background:rgba(43,43,43,.95);z-index:1000}
#appbar a {display:inline-block;position:relative;text-align:center;padding:-10px;width:50%;cursor:pointer;transition:all .3s ease;line-height:0.05em;font-weight:bold;color:#FFF !important}

.blautxt, .rottxt, .lilatxt, .italotxt, .leotxt, .wbtxt, .grautxt, .gruentxt {position:absolute;display:inline;z-index:0;font-size:7pt;white-space:nowrap;opacity:1}
.blautxt     { color:rgba(0,80,239,1)}
.rottxt      { color:rgba(229,20,0,1)}
.lilatxt     { color:rgba(216,0,115,1)}
.leotxt     { color:rgba(240,130,0,1)}
.wbtxt     { color:rgba(0,143,200,1)}
.italotxt     { color:rgb(166,22,10,1)}
.grautxt     { color:rgba(153,153,153,1)}
.gruentxt     { color:rgba(0,163,0,1) }

.tooltip { position:absolute; left:0px; font-size:8pt; color:#FFF; height:96px; text-align:center; z-index:2; max-height:0px; overflow:hidden; transition:max-height 1s ease, transform 1s ease;  }
.tooltip  * a { color:inherit }

.blauoben, .rotoben, .lilaoben, .italooben, .leooben, .wboben, .grauoben, .gruenoben { border-top: 8px solid transparent; border-right: 8px solid transparent; border-left: 8px solid transparent; width:0; height:0; display:inline-block }
.blauoben { border-bottom: 8px solid rgba(0,80,239,.8)}
.rotoben  { border-bottom: 8px solid rgba(229,20,0,.8)}
.lilaoben  { border-bottom: 8px solid rgba(216,0,115,.8)}
.leooben  { border-bottom: 8px solid rgba(240,130,0,.8)}
.wboben  { border-bottom: 8px solid rgba(0,143,200,.8)}
.italooben { border-bottom: 8px solid rgba(166,22,10,.8)}
.grauoben  { border-bottom: 8px solid rgba(153,153,153,.8)}
.gruenoben  { border-bottom: 8px solid rgba(0,163,0,.8)}

.blau, .rot, .lila, .italo, .leo, .wb, .grau, .gruen {padding:10px; margin-left:6px; margin-right:6px;margin-top:-3px;white-space:nowrap}
.blau     { background:rgba(0,80,239,.8)}
.rot      { background:rgba(229,20,0,.8)}
.lila     { background:rgba(216,0,115,.8)}
.leo     { background:rgba(240,130,0,.8)}
.wb     { background:rgba(0,143,200,.8)}
.italo     { background:rgb(166,22,10,.8)}
.grau     { background:rgba(153,153,153,.8)}
.gruen     { background:rgba(0,163,0,.8) }

.blaupunkt, .rotpunkt, .lilapunkt, .italopunkt, .leopunkt, .wbpunkt, .graupunkt, .gruenpunkt {  position:absolute;display:inline;z-index:1;width: 0; height: 0; border-bottom: 8px solid transparent; border-left: 8px solid rgba(255,255,255,1); border-top: 8px solid transparent; }
.blaupunkt:before , .rotpunkt:before , .lilapunkt:before , .italopunkt:before, .leopunkt:before , .wbpunkt:before, .graupunkt:before , .gruenpunkt:before { border-bottom: 4px solid transparent; border-top: 4px solid transparent; content: ''; display: block; position: relative; left: -6px; top: -4px; }
.blaupunkt:before { border-left: 4px solid rgba(0,80,239,1); }
.rotpunkt:before { border-left: 4px solid rgba(229,20,0,1); }
.lilapunkt:before { border-left: 4px solid rgba(216,0,115,1); }
.leopunkt:before { border-left: 4px solid rgba(240,130,0,1); }
.wbpunkt:before { border-left: 4px solid rgba(0,143,200,1); }
.italopunkt:before { border-left: 4px solid rgb(166,22,10,1); }
.graupunkt:before { border-left: 4px solid rgba(153,153,153,1); }
.gruenpunkt:before { border-left: 4px solid rgba(0,163,0,1); }

.station {position:absolute;left:119px;height:7px;width:7px;z-index:1; background:rgba(0,0,0,1); border-radius:50%;box-sizing:border-box;border:1px solid rgba(255,255,255,1);outline:2px solid transparent; transition:all .5s}

#zoomdiv { width:100vw;height:calc(100vh - 10px - 20px - 30px);top:20px;border:0;overflow:hidden;position:absolute }
#karte { position:relative;min-width:600px;top:60px;left:5px}
#zoomdiv #karte {touch-action: none; -ms-touch-action: none;}
#karte *[id^="pkt"]{transition:all 60s linear, height .1s, width .1s, border-left 1s, transform 0s; transform: rotate(var(--rotation)); }
#karte *[id^="txt"]{transition:all 60s linear, opacity .5s, transform 0s }

#karte.z1 { transform:scale(1.333); transform-origin:0 0; }
#karte.z1 *[id^="pkt"] { transform:scale(0.75) rotate(var(--rotation)); }
#karte.z1 *[id^="txt"] { transform:scale(0.75) translate(-12.5%,2px) }
#karte.z1 *.tooltip { transform:scale(0.75) !important; }

#karte.z2 { transform:scale(1.5); transform-origin:0 0; }
#karte.z2 *[id^="pkt"] { transform:scale(0.667) rotate(var(--rotation)); }
#karte.z2 *[id^="txt"] { transform:scale(0.667) translate(-25%,2px) }
#karte.z2 *.tooltip { transform:scale(0.667) !important; }

#karte.z3 { transform:scale(2); transform-origin:0 0; }
#karte.z3 *[id^="pkt"] { transform:scale(0.5) rotate(var(--rotation)); }
#karte.z3 *[id^="txt"] { transform:scale(0.5) translate(-50%,5px) }
#karte.z3 *.tooltip { transform:scale(0.5) !important; }

#karte.z4 { transform:scale(3); transform-origin:0 0; }
#karte.z4 *[id^="pkt"] { transform:scale(0.333) rotate(var(--rotation)); }
#karte.z4 *[id^="txt"] { transform:scale(0.333) translate(-110%,13px) }
#karte.z4 *.tooltip { transform:scale(0.333) !important; }



#OSMap {touch-action: none; -ms-touch-action: none;position:absolute;top:0;z-index:1;width:100%;height:100%;min-height:60vh;max-height:80vh;filter:brightness(95%)}
#OpenLayers_Control_Zoom_5 {bottom:0;font-size:2.5em;z-index:100}
#OpenLayers_Control_Attribution_7{transform:rotate(90deg);transform-origin:100% 0%;right:0;bottom:0;font-size:0.8em;color:#000}
.olButton {padding:0.5em}
#uhr {position:fixed;top:42px;z-index:50;right:1em;font-size:8pt;padding:3px;transition:all .5s ease-in}
#u0 {position:absolute;right:0;opacity:0;transition:all 1s linear}
#u1 {position:absolute;right:0;opacity:0;transition:all 1s linear}
#loader{position:fixed;top:42px;left:0;width:100vw;z-index:50;font-size:8pt;padding:2px 6px;transition:opacity .75s 1s}
#loaderwrap{position:fixed; display:block;bottom:0;left:0;z-index:550;width:100vw;height:10px;transition:opacity .75s 1s;opacity:1}
#loaderline{position:absolute; display:block;bottom:0;left:-99vw;z-index:560;width:49vw;transform:scaleX(2);transform-origin:0% 0%;height:10px;background:linear-gradient(#FFF 6px, #F00 7px, #FFF 8px);transition:left 5s, opacity .75s 1s;opacity:1;border-radius: 10px 10px 2px 2px;}
#karte  img {filter: invert(0); transition:all .5s}
#strecke {position:relative;top:0px;width:120px;border-right:solid 5px #000;font-size:7pt;filter:invert(0);transition:all .5s;margin-bottom:100px}
#fluegelstrecke {position:relative;top:48px;display:block;max-width:100vw;margin:1em}
#toolbar {z-index:49;position:fixed;bottom:2.2em;height:30px;text-align:center;width:100vw;background:rgba(255,255,255,1);filter:invert(0);transition:all .5s}
#toolbar a{display:inline-block;padding:5px}
#zugdaten{border-collapse: collapse; width:100vw; max-width:100vw}
.datenoeffner {position:absolute;width:0;height:.5em;border-left:1px solid rgba(0,0,0,.6);}
#pricingtable{border-collapse: collapse; width:100vw; max-width:100vw;table-layout:fixed}
#pricingtable * td {white-space:normal !important;text-align:center}
#pricingtable * td:nth-of-type(even) {background-color: rgba(229,20,0,0.2)}

#Laufweg {width:calc(100% - 20px);max-width:calc(100vw - 20px); overflow:hidden; white-space:nowrap; margin:0 auto 0.5em }
#Zwischenhalte {font-size:0.8em; display: inline-block; padding-left:100%; animation: marquee 35s linear infinite; }
	@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
#Zwischenhalte:hover { animation-play-state: paused }
#fehltwas{position:relative;z-index:2;background:#FFF;padding:0.5em}
#Hinweise{position:relative;z-index:2;background:#FFF;font-size:0.8em;display:none}
#stickynr{position:sticky;position:-webkit-sticky;top:40px;margin:-2.5em 0 0.25em;z-index:3;text-align:center;color:#FFF;background:cover;padding:0.5em;height:1.5em}
#productdiv{color:#FFF;background-image:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.2) 10%, rgba(0,0,0,0) 50%) }
#hero { position:relative;color:#FFF;display:inline-block;width:100%;padding-top:40px;background: #FFF no-repeat center / cover;z-index:4 }
#subherohome{ height:100vh;max-height:450px;margin-top:-40px;line-height:1.35em;background-image:linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5), rgba(0,0,0,0)) }
#subherohome h1 {margin-top:0;color:rgba(255,255,255,0)}

.zugreihung { display:inline-block;padding:0;transition:all .5s ease;border-collapse:initial }
.zugreihung tr { background-color:transparent !important }
.zugreihung:hover,.zugreihung.active {  }
/*DIV .wagenreihung { display:inline-block;height:inherit;line-height:inherit;text-align:center;border:1px solid #FFF; padding:0; } */
.wagenreihung { height:18px;line-height:inherit;text-align:center }
.wagenreihung .wagenextra { display:block;opacity:0;font-size:0;min-width:40px;transition:all .5s ease }
.zugreihung:hover * .wagenextra,.zugreihung.active * .wagenextra { font-size:0.9em;opacity:1;min-width:50px }

.hiddeninfo { overflow:hidden; transition: all .7s ease; max-height: 0px; margin:0;padding:0 }
.hiddeninfo_show { overflow:hidden; transition: all .7s ease; max-height: 1000px; }

/* wahrscheinlich nicht
.fahrplanlink {position:relative;height:60px;margin:5px;padding:8px;width:auto;min-width:266px;display:block;color:#FFF}
.fahrplanlink a {color:#FFF}
*/

.statkachel {position:relative;margin:0;padding:4px;height:calc(33vw - 8px);max-height:100px;width:calc(33vw - 8px);max-width:100px;font-size:75%;display:inline-block;color:#FFF;vertical-align:bottom;text-align:center}
.statkachel h3 {text-transform:uppercase}
.statkachel .statsub { display:block;position:relative;bottom:2px }
.statgruen { background:linear-gradient(to bottom right,rgba(0,147,55,0.8),rgba(0,147,55,1) 50%) }
.statorange { background:linear-gradient(to bottom right,rgba(228,144,59,0.8),rgba(228,144,59,1) 50%) }
.statrot { background:linear-gradient(to bottom right,rgba(228,59,59,0.8),rgba(228,59,59,1) 50%) }
.zugbild {position:relative;height:calc(33vw - 8px);max-height:100px;width:calc(34vw - 8px);max-width:266px;margin:0;padding:4px;display:inline-block;vertical-align:bottom}
.zugbild em { font-size:2em;color:#FFF;text-shadow:0 0 4px rgba(0,0,0,1) }
.zugbild span {display:block;position:absolute;bottom:0;left:0;width:calc(100% - 16px);padding:4px 8px;background:rgba(0,0,0,.5);color:#FFF }

.nomo {display:none}
.onmo {display:inline}

.circle { text-align:center;position:relative;width:3em;height:3em;display:inline-block;font-size:1em;background-color: transparent;vertical-align:middle; margin:.1em }
.cbig { width:2.6em;height:2.6em;font-size:2.6em; }
.circle__svg {position:absolute;top:0;left:0; height:100%;width:100%; transform: rotate(-90deg);}
.cbig .circle__svg .circle__progress--path { stroke:rgba(255,255,255,.35) }
.csmall .circle__svg .circle__progress--path { stroke:rgba(60,60,60,.35) }
.circle__content { width: 100%; top: 50%; left: 50%; position: absolute; text-align: center; transform: translate(-50%, -55%); }
.cbig .circle__content { transform: translate(-50%, -70%) !important; }
.circle__progress { fill: none; stroke-width: 0.25em; }
.circle__progress--fill { stroke-dasharray: 250; stroke-dashoffset: 250; transition: all 1s ease-out; }

.uhrbig { text-align:center;position:relative;width:2em;height:2em;display:inline-block;font-size:2.6em;border-radius:50%; background-color: transparent; border:8px solid rgba(255,255,255,.35); vertical-align:middle; margin:.15em }
.uhrbig > div { overflow: hidden; position: absolute; top: -8px; right: 50%; bottom: 50%; left: -8px; transform-origin: 100% 100% }
.uhrbig > div > div { position:absolute;box-sizing: border-box; display: block; border: solid 8px currentColor; width: 200%; height: 200%; border-radius: 50%;	 }
.uhrbig > div.b0:after,.uhrbig > div.b15:after,.uhrbig > div.b30:after,.uhrbig > div.b45:after { box-sizing: border-box; display: block; border: solid 8px #FFF; width: 200%; height: 200%; border-radius: 50%;	content: '' }

/* 10% = 126deg = 90 + ( 360 * .1 ) */
/* the skew angle is 90deg - the angle you want for the arc */
.b0 { transform: rotate(90deg) skewX(90deg); }
.b0:after { transform: skewX(-90deg); }
.b15 { transform: rotate(90deg) skewX(0deg); }
/* .b15:after, .b30:after, .b45:after { transform: skewX(0deg); } */
.b30 { transform: rotate(180deg) skewX(0deg); }
.b45 { transform: rotate(270deg) skewX(0deg); }

.uhr { text-align:center;position:relative;width:2em;height:2em;display:inline-block;border-radius:50%; background-color: transparent; border:4px solid rgba(60,60,60,.35); vertical-align:middle; margin:.15em }
.uhr > div { overflow: hidden; position: absolute; top: -4px; right: 50%; bottom: 50%; left: -4px; transform-origin: 100% 100% }
.uhr > div > div { position:absolute;box-sizing: border-box; display: block; border: solid 4px currentColor; width: 200%; height: 200%; border-radius: 50%;	 }
.uhr > div.b0:after,.uhr > div.b15:after,.uhr > div.b30:after,.uhr > div.b45:after { box-sizing: border-box; display: block; border: solid 4px currentColor; width: 200%; height: 200%; border-radius: 50%;	content: '' }
.zugausfall { color:#E43B3B }

a	{ color:#E51400; text-decoration:none }
a.button, input[type="submit"] {display:inline-block;margin:5px;padding:8px;min-width:60px;line-height:1em;color:#FFF;background:rgba(228,59,59,0.9);border:0}
a.button:hover, input[type="submit"]:hover {background:rgba(228,59,59,1)}
#homesuche{display:inline-block;border:0; background:rgba(255,255,255,0.9); margin:5px;padding:8px;min-width:184px;line-height:1em}
#logoform{position:fixed;top:0.25em;left:calc(50% - 30vw - 8px);width:calc(60vw + 16px);z-index:0}
#logosuche{position:relative;display:inline-block;border:0; background:rgba(255,255,255,0.9); margin:0;padding:8px;width:0vw;line-height:1em;transition: all .5s}
#logosuche_ajax { position:absolute;top:calc(0.5em + 1em + 10px);left:calc(50% - 30vw - 8px - 7em);z-index:500 }
.ajax { position:absolute;margin-left:7em;padding:0 .3em 1.3em .3em;text-align:left;background:#FFF;border:1px solid #EEE;line-height:2.5em;height:0;overflow:hidden;transition:all .5s ease;opacity:0 }

#wrap{min-height: 100%;width:100vw; position: relative}
#content {position:relative;width:100vw;top:0;margin-bottom:4em;float:left}
#footer{position:fixed;display:block;z-index:10;color:#FFF;background:rgba(0,0,0,0.85);width:100%;padding:2px;text-align:center;bottom:0;font-size:0.8em;height:1.6em}

#Logo {display:block;position:fixed;top:0;left:0;height:40px;z-index:500;width:100vw; background-image:linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,0));color:#FFF;line-height:34px;font-size:2.4em;text-align:center}
#Logo img {border:0;vertical-align:top;height:34px;width:34px}
#Logo:hover { background:rgba(229,20,0,0.75) }
#jumper{display:block; position:fixed;background:transparent; top:0vw; left:calc(100vw - 38px);padding:3px 10px;z-index:500;font-size:34px;line-height:34px;color:#FFF;font-weight:bold}
#suchlupe{display:block; position:fixed;background:transparent; top:0vw; left:calc(100vw - 76px);transform: rotate(45deg);padding:3px 10px;z-index:500;font-size:34px;line-height:34px;color:#FFF;font-weight:bold}
#Logobg {z-index:3;position:fixed;top:0;width:100vw;display:block;height:40px;background:rgba(229,20,0,0.666)}
#Inhalt{position:absolute;left:0px;padding:0 0 6em 0;opacity:0;transition:all 0.2s;background:rgba(255,255,255,1)}
#Navigation {left:-198px; z-index:501;position:fixed;top:0px;width:188px; height:100vh;margin-right:10px; overflow-x:hidden;overflow-y: auto; transition: all .5s }
#Navigation a { color:#FFF; background:rgba(43,43,43,.9); text-decoration:none; display:block; width:178px; padding:7px; vertical-align:middle; background:rgba(0,0,0,0.5); transition: all .25s }
#Navigation a:hover { background:rgba(229,20,0,0.75) }
#Navigation a.active { background:rgba(229,20,0,0.75) }
#Navigation form { display:block; margin:0px; width:178px; padding:4px 7px; vertical-align:middle; background:rgba(0,0,0,0.5); transition: all .25s }
#Navigation form:hover { background:rgba(229,20,0,0.75) }
#Navigation form.active { background:rgba(229,20,0,0.75) }
#Navigation input { width:150px; padding:3px;margin:0; vertical-align:middle; border:1px solid #EFEFEF }
#Bhfsuche a {display:block; min-width:200px; padding:7px; vertical-align:middle; border-bottom:1px solid #EFEFEF}
#Bhfsuche a:hover { display:block; min-width:200px; padding:7px; vertical-align:middle; border-bottom:1px solid #EFEFEF; background:#FDD}

#detaildiv {visibility:hidden; background:#FFF; padding:2em 1em; position:fixed; top:5em; left:5%; min-height:5em; max-width:80%; max-height:70vh; border: solid 1px #000; z-index:5000; overflow-y:auto;opacity:0;transition:opacity 0.5s }
#detaildiv .closer {position:absolute;right:5px;top:5px;height:1em;padding:0.2em;font-size:2em}
#graph{white-space:nowrap;max-width:100vw;overflow-x:auto;overflow-y:clip;height:calc(300px + 6em);max-height:70vh;padding:1em}
#information{ display:block;position:fixed;bottom:1em;right:1em;width:calc(100vw - 4em);background:rgba(229,20,0,0.8);color:#FFF;z-index:1000;padding:1em;box-shadow:0 0 4px rgba(0,0,0,1) }

fieldset {border:0;border-top:1px solid #E51400}
legend {display:block;padding:0.25em 0.5em;max-width:85vw}
input{border-radius:0;border:1px solid #999;margin:5px;padding:5px}
form .stars input[type="radio"] {display:none}
form .stars input[type="radio"]:checked ~ label {color:#FDD}
form .stars:hover input[type="radio"]:checked ~ label {color:#E51400}
form .stars label {font-size:2em;float:left;cursor:pointer;color:#E51400}
form .stars label:hover {color:#E51400 !important}
form .stars label:hover ~ label { color:#FDD !important}

em {font-weight:bold;font-style:normal}

.submit { position:absolute; right:26px; border:0px !important; vertical-align:middle; width:16px !important; background:transparent !important; height:16px; top:6px; cursor:pointer }