html, body {font-family: Verdana, Arial, sans-serif; height:100%}
a:link, a:visited { color: navy; padding: 0px 0px; text-decoration: none; display: inline-block; }
a:hover, a:active { background-color: #e4e4ff; }
a.as:hover, a.as:active { background-color: #6464dc8; text-color: #fefefe; }
a.smimg:link, a.smimg:visited { padding: 0px 0px }
.map { height: 380px; }
.smimg { padding: 0px 0px; }
.tntxt { font-family: Verdana, Arial, Helvetica; font-size: 0.7em; }
.smtxt { font-family: Verdana, Arial, Helvetica; font-size: 1.2em; }
.trip_gallery { font-family: Verdana, Arial, Helvetica; font-size: 1.0em; }
.dbdbg { font-family: Hack, Courier; font-size: 0.6em; color: navy; }
.citxt { font-family: Verdana, Arial, Helvetica; font-size: 0.8em; padding-top: 2px; padding-bottom: 2px; text-align: left; }
.sichtungtxt { font-family: -apple-system, Georgia, Verdana, Arial; font-size: 0.85em; }
.box { float: left; width: 100%; margin-right: 2%; padding: 4px; background: #eee; box-sizing: border-box; }
.boxdbl { float: left; width: 100%; margin-right: 2%; padding: 4px; background: #eee; box-sizing: border-box; }
.box:last-child { margin-right: 0; }
h1 { color: navy; font-size:1.25em}
h2 { color: navy; font-size:1.0em}
hr.hs { border-top: 0.7px solid gray; margin-top: 0.3em; margin-bottom: 0.3em; }
p { color: black; font-size:1.0em}
.logintext { color: navy; font-size: 1em; font-family: Verdana, Helvetica, sans-serif; text-align: justify; padding-bottom: 5px }
/* Default-Verhalten für Sidebar und Content */
.main { display:block; width:90%;background:#f4f4f4; padding-top: 10px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; font-family: Verdana, Arial }
.mainleft { float:left; width:40%;background:#f4f4f4; padding-top: 10px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; font-family: Verdana, Arial }
.mainright{ width:60%;background:#f4f4f4; padding-top: 10px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; font-family: Verdana, Arial }
.sidebar { display:block; width:90%; padding-right: 15px; padding-left: 15px;background:#cacaca }
.sidebarright { display:block; width:95%; padding-right: 5px; padding-left: 5px;background:#cacaca }
.sichtungenleft { float:left; width:100%; }
.llist { display:block; padding-right: 15px; padding-left: 15px; font-family: Verdana, Arial, Helvetica; font-size: 0.7em; }
.logintable { width: 90vw}
.landingtable { width: 50vw}
.ctxt { font-family:Arial; font-size:0.9em; text-justify:auto }
.tatbl { background-color:#ffeeee; border:1px solid #000; padding:5px; font-size: 1.2em; text-align: center; font-family: DIN Alternate, Georgia, Garamond, serif }
.tatbldark { background-color:#ddcccc; border:1px solid #000; padding:5px; font-size: 1.2em; text-align: center; font-family: DIN Alternate, Georgia, Garamond, serif }
.fznummer93 { background-color:#ffffff; padding: 1px; border: 1px solid #777; font-family: Helvetica; font-weight: bold; }
.fznummer { background-color:#ffffff; padding: 1px; border: 1px solid #777; font-family: DIN Alternate, Helvetica; }
.keinDatum { border-radius: 4px; background-color: yellow; color: red; border: 1px solid red; padding: 1px; }
.t_zr { color: red; }
.t_zg { color: grey; }
.t_lg { color: #aaa; }
.t_fd { font-family: DIN Alternate, Monaco, Courier; }
.t_fb { font-family: DIN Alternate, Monaco, Courier; font-size: 9px; border: 1px solid navy; }
.l_tt { font-family: Menlo, Monaco, Courier; font-size: 12px }
.l_dg { font-family: Avenir, Sans Serif; color: grey; font-size: 14px }
.f_ds { font-family: Avenir, Sans Serif; color: black; font-size: 15px }
.f_tr { font-family: Helvetica, Sans Serif; color: black; font-size: 14px }
.sichtung_tag { background-color: #007aff; color:white; border-radius: 6px; padding-left: 4px; padding-right: 4px; }
.sichtung_tag_ff9500 { background-color: #ff9500; color:white; border-radius: 6px; padding-left: 4px; padding-right: 4px; }
.sichtung_tag_ff0000 { background-color: #ff0000; color:white; border-radius: 6px; padding-left: 4px; padding-right: 4px; }
.sichtung_tag_4cd964 { background-color: #4cd964; color:white; border-radius: 6px; padding-left: 4px; padding-right: 4px; }
.sichtung_tag_ffffff { background-color: #ffffff; color:white; border-radius: 6px; padding-left: 4px; padding-right: 4px; }
.sichtung_add_tag_button { vertical-align:bottom; background-color:#4cd964; color: white; border-width: 1px; border-radius: 4px; height: 28px; width: 28px; }
.sichtung_box { display: inline-block; float: left; margin-left: 0; height: 48px; overflow: clip; color: navy; line-height: 16px; width: calc(100% - 48px); }
.sichtung_box_done { display: inline-block; float: right; margin-left: auto; margin-right: 0; height: 48px; width: 48px; background-color: #2a2; color: white; }
.sichtung_tags_to_add { background-color: #5ac8fa4f; font-family: -apple-system; font-size: 12px; height: 24px; padding-top: 4px; padding-left: 2px; border-bottom: 2px solid transparent; }
.suche_tag { background-color: #cacace; color:white; border-radius: 6px; padding-left: 4px; padding-right: 4px; border-top: 1px solid white; border-bottom: 1px solid white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suche_tag.bt0 { color:#003166;border-color: #fff; background-color: #bbb }
.suche_tag.bt1 { color:#ff3b30;border-color: #fff; background-color: #bbb }
.suche_tag.bt2 { color:#e68507;border-color: #fff; background-color: #bbb }
.suche_tag.bt3 { color:#ffda03;border-color: #fff; background-color: #bbb }
.suche_tag.bt4 { color:#359846;border-color: #fff; background-color: #bbb }
.suche_tag.bt5 { color:#007aff;border-color: #fff; background-color: #bbb }
.sichtung_headbutton { padding: 1px; border: 1px solid #d1d9ff; float:left; width: 72px; height: 18px; border-radius: 8px; background-color: #cacace; text-align: center; }
.sichtung_metatext { display: block; width: 100%; height: 18px; font-family: -apple-system; }
.dbmessage { width: 30em; font-size: 11pt; font-family: PT Sans, -apple-system, Menlo, Monaco, Courier; color: #228BE6; background-color: #B2EBF6; padding: 3pt; }
.dbinternal { font-size: 9pt; font-family: PT Sans, Menlo, Monaco, Courier; border: 1px inset grey; color: #228BE6; background-color: #B2EBF6; padding: 1pt; padding-left: 3pt; padding-right: 3pt}
.fpzeit { font-size: 10pt; font-family: Andale Mono, Menlo, Monaco, Courier; border: 1px solid black; color: yellow; background-color: navy; padding: 1pt; padding-left: 1pt; padding-right: 1pt}
table { width=50% }
.picture_selector_picture { position: absolute; top: 0; left: 0; z-index: 1 }
.dep-line{font-size:12px;font-family:-apple-system;text-align:center;padding:.2rem;color:white;background:#424242;border-radius:.2rem;display:inline-block;font-weight:500;line-height:1;height:fit-content;width:fit-content;min-width:4ch;margin:0 auto}
.dep-line.Bus,.dep-line.RUF,.dep-line.AST{background-color:#a3167e;border-radius:5rem;padding:.2rem .5rem}
.dep-line.STR,.dep-line.Tram,.dep-line.Str,.dep-line.Strb,.dep-line.STB{background-color:#c5161c;border-radius:5rem;padding:.2rem .5rem}
.dep-line.S,.dep-line.RS,.dep-line.RER,.dep-line.SKW{background-color:#008d4f;border-radius:5rem;padding:.2rem .5rem}
.dep-line.U,.dep-line.M{background-color:#014e8d;border-radius:5rem;padding:.2rem .5rem}
.dep-line.RE,.dep-line.IRE,.dep-line.REX{background-color:#ff4f00}
.dep-line.RB,.dep-line.MEX,.dep-line.TER,.dep-line.R{background-color:#1f4a87}
.dep-line.IC,.dep-line.ICE,.dep-line.EC,.dep-line.ECE,.dep-line.D,.dep-line.IR,.dep-line.TGV,.dep-line.OGV,.dep-line.EST,.dep-line.TLK,.dep-line.EIC{background-color:#ff0404;font-weight:700;font-style:italic;padding:.2rem}
.dep-line.RJ,.dep-line.RJX{background-color:#c63131}
.dep-line.NJ,.dep-line.EN{background-color:#29255b}
.dep-line.WB{background-color:#2e85ce}
.dep-line.FLX{background-color:#71d800;color:black}
/* Breakpoint bei 576px = 36em für Smartphone im Querformat */
/* Spalten untereinander 40:60, h1 = dunkelblau */
@media all and (min-width: 36em){
.main { float:left; width:95%; padding-top: 10px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; }
.mainleft { float:left; width:50%;background:#f4f4f4; padding-top: 10px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; font-family: Verdana, Arial }
.mainright{ width:60%;background:#f4f4f4; padding-top: 10px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; font-family: Verdana, Arial }
.sidebar { float:left; width:20%; background: #aabbcc; }
.sidebarright { float:right; width:90%; background: #aabbcc; }
.llist { float:left; width:20%; padding-right: 15px; padding-left: 15px; font-family: Verdana, Arial, Helvetica; font-size: 1.0em; }
h1 { color: navy; font-size:1.1em; text-align: center }
p { color: black; font-size:0.8em}
.ctxt { color: black; font-size:0.8em }
.ctbl { width:50% }
.smtxt { font-family: Verdana, Arial, Helvetica; font-size:1.2em; padding-bottom: 3px; }
.trip_gallery { font-family: Avenir, Verdana, Arial, Helvetica; font-size:1.0em; }
.ditxt { font-family: Hack, Courier; font-size: 0.6em; color: navy; }
.citxt { font-family: Palatino, Garamond, Monaco, Courier New, Mono, Helvetica; font-size:0.8em; padding-top: 2px; padding-bottom: 2px; padding-left: 2px; text-align: left; border:0.7px solid white; background-color: white; }
.sichtungenleft { float:left; width:calc(100% - 400px); }
.picture_selector_picture { position: absolute; top: 256; left: 8; z-index: 1 }
}
/* Breakpoint bei 800px=50em für Desktop im Querformat */
/* Spalten nebeneinander 30:70, h1 = grün */
@media all and (min-width: 88em){
.main { float: left; width:79%; padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 20px; font-family: Avenir, Verdana, Helvetica, sans-serif; }
.mainleft { position: relative; display: flex; float: left; width:50%; padding-top: 10px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px; font-family: Verdana, Helvetica, sans-serif; }
.mainright{ position: relative;display: flex; float: right; width:45%; padding-top: 10px; padding-right: 5px; padding-bottom: 30px; padding-left: 5px; font-family: Verdana, Helvetica, sans-serif; }
.sidebar { float: left; width:15%;background:#dfdfdf }
.sidebarright { float: right; width:16%;background:#dfdfdf }
.sichtungenleft { float:left; width: calc ( 100%-400px); }
.llist { float:left; width:24%; padding-right: 2px; padding-left: 2px; font-family: Verdana, Arial, Helvetica; font-size: 0.9em; }
.boxul { float: left; width: 100%; margin-right: 2%; margin-top: 2px; margin-bottom: 2px; box-sizing: border-box; }
.box { float: left; width: 31%; margin-right: 2%; padding: 10px; border: 1px solid lightgrey; margin-top: 2px; margin-bottom: 2px; background: #4dc; box-sizing: border-box; }
.boxdbl { float: left; width: 40%; margin-right: 2%; padding: 5px; border: 2px solid lightgrey; margin-top: 2px; margin-bottom: 2px; background: #4dc; box-sizing: border-box; }
.box:last-child { margin-right: 0; }
.rightbar { width:25%;background:#cccccc }
h1 { color: navy; font-size:1.2em ; text-align: center }
.ctxt { color: black; font-size:0.7em }
.ctbl { width:90% }
a.smimg:link, a.smimg:visited { float: right; text-align: right; display: block; padding: 1px 1px }
.smimg { display: block; float: right; padding: 1px 1px}
h2 { color: navy; font-size:1.1em}
.logintable { width: 20vw}
.logintext { color: navy; font-size: 0.9em; font-family: Verdana, Helvetica, sans-serif; text-align: justify; padding-bottom: 5px }
.tntxt { font-family: Verdana, Arial Helvetica; font-size:0.7em; padding-bottom: 2px ; }
.smtxt { font-family: Verdana, Arial, Helvetica; font-size:0.9em; padding-bottom: 2px ; }
.trip_gallery { font-family: Avenir, Verdana, Arial, Helvetica; font-size:0.9em; }
.trip-thumb-capt { font-family: Avenir, Verdana, Arial, Helvetica; font-size:0.9em; padding-bottom: -2px ; }
.trip-picture-capt { font-family: Palatino, Garamond, Monaco, Courier New, Mono, Helvetica; font-size: 1.2em; }
.ditxt { font-family: Hack, Courier; font-size:0.7em; color: grey; padding-bottom: -1px ; }
.avtxt { font-family: Avenir, Verdana; font-size:1.0em; color: black; padding-bottom: -1px ; }
.dintxt { font-family: DIN Alternate, Monaco, Mono; font-size:0.8em; color: black; padding-bottom: -1px ; }
.sichtungtxt { font-family: Avenir, Georgia, Verdana, Arial, Helvetica; font-size: 1.2em; padding-top: -2px; padding-bottom: -2px; text-align: left; }
.pftxt { font-family: Palatino, Garamond, Monaco, Courier New, Mono, Helvetica; font-size:1.2em; padding-top: 2px; padding-bottom: 2px; }
.citxt { font-family: Charter, Palatino, Garamond, Monaco, Courier New, Mono, Helvetica; font-size:0.9em; padding-top: 2px; padding-bottom: 2px; padding-left: 2px; text-align: left; border:0.7px solid white; background-color: white; }
hr.hs { border-top: 0.5px solid gray; margin-top: 0.1em; margin-bottom: 0.1em; }
a.as:hover, a.as:active { background-color: #6464dc8; text-color: #fefefe; }
.wrap { width: 1120px; height: 700px; overflow: hidden; }
.picture_selector_picture { position: absolute; top: 256; left: 8; z-index: 1 }
}
.timetable { border-collapse: collapse; width: 100%; }
.timetabletr { border-bottom: 1px solid #ddd; nth-child(even) { background-color: #D6EEEE;}; hover {background-color: #D6EEEE;}; }