wagon order: slightly less ugly. just slightly.

<div class="container">

<div style="height: 2em;">

(experimentell, die URL wird sich noch ändern und die Anzeige wird noch schöner)

</div>

  <div style="position: relative; width: 100%; height: 60ex;">

%   for my $section ($wr->sections) {

      <div style="position: absolute; left: 1em; width: 2em;

%     if ($wagon->is_first_class) {

%       $bg = 'background-color: #ffff99;';

%     }

<div style="position: absolute; left: 3em; right: 0em;

      <div style="position: absolute; left: 6em;

      top: <%= $wagon->{position}{start_percent} %>%; bottom: <%= 100 - $wagon->{position}{end_percent} %>%;">

%       if ($wr->direction == 100) {

          ↓

%       }

%       else {

          ↑

%       }

      </div>

      <div style="position: absolute; left: 3em;

      top: <%= $wagon->{position}{start_percent} %>%; bottom: <%= 100 - $wagon->{position}{end_percent} %>%;

border: 1px solid black; <%= $bg %>">

      min-width: 2em; text-align: right;

      border: 1px solid black; padding-left: 0.2em; padding-right: 0.2em; <%= $bg %>">

%       if ($wagon->is_locomotive or $wagon->is_powercar) {

          LOK

%       }

%       else {

%=        $wagon->number // '?'

%       }

   

      </div>

      <div style="position: absolute; left: 7em; right: 0em;

      top: <%= $wagon->{position}{start_percent} %>%; bottom: <%= 100 - $wagon->{position}{end_percent} %>%;">

%=      $wagon->type

      </div>

%   }