1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
header {
h3 {
span:not(:last-child):after {
content: " → ";
}
}
p {
font-weight: bold;
span:not(:last-child):after {
content: " | ";
}
}
}
.card {
.train-info {
flex-wrap: wrap;
background-color: rgb(238, 238, 238);
padding: .5em .2em;
span {
margin: 0 1em;
}
}
.table {
grid-template-columns: 1fr 1fr 3.5fr 1fr;
.head span {
border-top: 2px solid rgb(204, 204, 204);
}
}
}
p {
color: white;
width: 100%;
}
p::before {
filter: drop-shadow( 0 0 5px rgba(0, 0, 0, .6) );
margin-right: 4px;
}
p.change,
p.walk,
p.transfer {
text-shadow: 0 0 15px rgba(0, 0, 0, .6);
text-align: center;
}
a[class^="icon-"] {
margin: 0 .3em;
}
.icon-bahnexpert {
float: right;
}
@media (max-width: 650px) {
.station {
justify-content: unset !important;
}
}
@media (max-width: 799px) {
header {
p > span {
display: flex;
flex-wrap: wrap;
}
p > span:after {
content: unset !important;
}
}
}
p.change::before {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M9 3 5 6.99h3V14h2V6.99h3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99z" fill="white"/></svg>');
}
p.walk::before {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2M9.8 8.9 7 23h2.1l1.8-8 2.1 2v6h2v-7.5l-2.1-2 .6-3C14.8 12 16.8 13 19 13v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1L6 8.3V13h2V9.6z" fill="white"/></svg>');
}
p.transfer::before {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="m21.71 11.29-9-9a.996.996 0 0 0-1.41 0l-9 9a.996.996 0 0 0 0 1.41l9 9c.39.39 1.02.39 1.41 0l9-9a.996.996 0 0 0 0-1.41M14 14.5V12h-4v3H8v-4c0-.55.45-1 1-1h5V7.5l3.5 3.5z" fill="white"/></svg>');
}
.icon-hint {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M5 3h14a2 2 0 0 1 2 2v14c0 .53-.21 1.04-.59 1.41-.37.38-.88.59-1.41.59H5c-.53 0-1.04-.21-1.41-.59C3.21 20.04 3 19.53 3 19V5c0-1.11.89-2 2-2m6 6h2V7h-2zm3 8v-2h-1v-4h-3v2h1v2h-1v2z"/></svg>');
}
.icon-status {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m8 10V7h-2v6zm0 4v-2h-2v2z"/></svg>');
}
.icon-warning {
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M13 13h-2V7h2m-2 8h2v2h-2m4.73-14H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27z"/></svg>');
}
@media (min-width: 800px) {
.card {
margin: 50px auto;
}
}