:root {
            /* Hastighet i sekunder: Lägre siffra = snabbare tåg */
            --train-speed: 12s; 
            --smoke-speed: 5s; 
        }
@media (min-width: 768px) {

body {
background:#eee;
   background: url('../images/bg.jpg') no-repeat center center fixed;
   background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
padding: 100px 100px;
}

headtop {
padding:2rem 0;
}

headtop .container {
   background: rgba(0,0,0,0.7);
   background-image: url('../images/headerv.1.png');
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
   border-radius: 20px 20px 0 0;
   //padding:2rem 2rem;
   height:100px;
}
headtop .imgcursor {
   position: absolute;
   left: 120;
   cursor: pointer;
}
.widget {
        list-style-type:none;
        margin:0;
        padding:0;
}

.page-wrap {

        //padding:2rem 0;
}

.container {
//background:#dddddd;
background: rgba(0,0,0,0.7);
color:#FFF;
}

meny .menu {
//background:#dddddd;
        list-style-type:none;
        margin:0;
        padding:0;
        font-size: 100%;
        justify-content: center;
        align-items:center;
	display:flex;
}
meny .menu .container {
        display:flex;
        justify-content: center;
        align-items:center;
        height:100%;
}
meny .menu li {
        position:relative;
}

meny .menu li a {
        padding:.25rem 1rem;
        color:#FFF;
        text-decoration:none;
}
meny .menu li a:visited {
        text-decoration:none;
}

meny .menu li a:hover {
        color:#008CBA;
        text-decoration:none;
}
meny .menu li a:active {
        color:#008CBA;
        text-decoration:none;
}
meny .menu li .sub-menu {
        display:none;
        position:absolute;
        z-index:999;
        top:0;
        left:40%;
        background:#fff;
        box-shadow:1px 1px 10px rgba(0,0,0,0.1);
        margin:0;
        padding:0;
        list-style-type:none;
        width:150px;
        border-radius:.5rem;
}
meny .menu li .sub-menu a {
        color:red;
        padding:.25rem;
        text-align:center;
        display:block;
        text-decoration:none;
}

meny .menu li .sub-menu a:hover {
        color:#FFF;
}

meny .menu > .menu-item-has-children:hover > .sub-menu {
        display:block;
}

meny .menu .menu-item-has-children .sub-menu > .menu-item-has-children:hover .sub-menu {
        display:block;
}

meny .menu .sub-menu li .sub-menu {
        top:0;
        left:100%;
}
a:link, a:visited {
        color: white;
}
a:hover, a:active {
        color: #008CBA;
}

.train {
position: absolute;
left: -200px;
top: 30px;
}

.train-animate {
  animation-name: trainObject;
  animation-duration: 10s;
  animation-timing-function: linear;
}

@keyframes trainObject {
  0% {
    left: calc(0% + -400px);
    transition-timing-function: ease-in;
  }

  50% {
    transform: translateX(calc(50%));
  }

  100% {
    left: calc(100% + 240px);
    transition-timing-function: ease-out;
  }
}

samling .menu {
        list-style-type:none;
        margin:0;
        padding:15px;
        font-size: 100%;
        justify-content: center;
        align-items:center;
        display:flex;
}
samling .menu .container {
        display:flex;
        justify-content: center;
        align-items:center;
        height:100%;
}
samling .menu li {
//        position:relative;
}
samling .menu li a {
        padding:.25rem 1rem;
        color:#FFF;
        text-decoration:none;
}
samling .menu li a:visited {
        text-decoration:none;
}

samling .menu li a:hover {
        color:#008CBA;
        text-decoration:none;
}
samling .menu li a:active {
        color:#008CBA;
        text-decoration:none;
}
.gallery-item {
   float: left;
   margin-top: 10px;
   text-align: center;
   width: 33%;
}
.gallery-item img {
   border: 2px solid #cfcfcf;
}
.fancybox-content {
  // border: 5px solid #cfcfcf;
}
.fancybox-caption {
   padding-top: 25px;
   font-size: 150%;
}
#toggle {
display:none;
}
#popout {
display:none;
}
.gwolle-gb .gwolle-gb-write-button input.button {
    border: 0px solid #e5e5e5;
    color: #fffeee;
}
.gwolle-gb-write-button input.button:hover {
    background:#008CBA;
}

.gwolle-gb .gwolle-gb-read {
    color: #fff;
}

footer {
   padding:0;
}
footer .container {
   background: rgba(0,0,0,0.7);
   text-align: right;
   height:40px;
   align-items:center;
   padding:5px;
   color:#fff;
   border-radius: 0 0 20px 20px;
}

}


@media (min-width: 992px) {

body {
background:#eee;
   background: url('../images/bg.jpg') no-repeat center center fixed;
   background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
padding: 100px 100px;
}

headtop {
padding:2rem 0;
}

headtop .container {
   background: rgba(0,0,0,0.7);
   background-image: url('../images/headerv.1.png');
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
   border-radius: 20px 20px 0 0;
   //padding:2rem 2rem;
   height:100px;
}
headtop .imgcursor {
   position: absolute;
   left: 120;
   cursor: pointer;
}
.widget {
        list-style-type:none;
        margin:0;
        padding:0;
}

.page-wrap {

        //padding:2rem 0;
}

.container {
//background:#dddddd;
background: rgba(0,0,0,0.7);
color:#FFF;
}

meny .menu {
//background:#dddddd;
        list-style-type:none;
        margin:0;
        padding:0;
        padding-top: 25px;
        font-size: 110%;
	display:block;
}

meny .menu li {
        position:relative;
}

meny .menu li a {
        padding:.25rem 1rem;
        color:#FFF;
        text-decoration:none;
}
meny .menu li a:visited {
        text-decoration:none;
}

meny .menu li a:hover {
        color:#008CBA;
        text-decoration:none;
}
meny .menu li a:active {
        color:#008CBA;
        text-decoration:none;
}
meny .menu li .sub-menu {
        display:none;
        position:absolute;
        z-index:999;
        top:0;
        left:40%;
        background:#fff;
        box-shadow:1px 1px 10px rgba(0,0,0,0.1);
        margin:0;
        padding:0;
        list-style-type:none;
        width:150px;
        border-radius:.5rem;
}
meny .menu li .sub-menu a {
        color:red;
        padding:.25rem;
        text-align:center;
        display:block;
        text-decoration:none;
}

meny .menu li .sub-menu a:hover {
        color:#FFF;
}

meny .menu > .menu-item-has-children:hover > .sub-menu {
        display:block;
}

meny .menu .menu-item-has-children .sub-menu > .menu-item-has-children:hover .sub-menu {
        display:block;
}

meny .menu .sub-menu li .sub-menu {
        top:0;
        left:100%;
}
a:link, a:visited {
        color: white;
}
a:hover, a:active {
        color: #008CBA;
}

.train {
position: absolute;
left: -200px;
top: 30px;
}

.train-animate {
  animation-name: trainObject;
  animation-duration: 10s;
  animation-timing-function: linear;
}

@keyframes trainObject {
  0% {
    left: calc(0% + -400px);
    transition-timing-function: ease-in;
  }

  50% {
    transform: translateX(calc(50%));
  }

  100% {
    left: calc(100% + 240px);
    transition-timing-function: ease-out;
  }
}

samling .menu {
        list-style-type:none;
        margin:0;
        padding:10px;
        font-size: 120%;
        justify-content: center;
        align-items:center;
        display:flex;
}
samling .menu .container {
        display:flex;
        justify-content: center;
        align-items:center;
        height:100%;
}
samling .menu li {
//        position:relative;
}
samling .menu li a {
        padding:.25rem 1rem;
        color:#FFF;
        text-decoration:none;
}
samling .menu li a:visited {
        text-decoration:none;
}

samling .menu li a:hover {
        color:#008CBA;
        text-decoration:none;
}
samling .menu li a:active {
        color:#008CBA;
        text-decoration:none;
}
.gallery-item {
   float: left;
   margin-top: 10px;
   text-align: center;
   width: 33%;
}
.gallery-item img {
   border: 2px solid #cfcfcf;
}
.fancybox-content {
//   border: 5px solid #cfcfcf;
}
.fancybox-caption {
   padding-top: 25px;
   font-size: 150%;
}
#toggle {
display:none;
}
#popout {
display:none;
}
.gwolle-gb .gwolle-gb-write-button input.button {
    border: 0px solid #e5e5e5;
    color: #fffeee;
}
.gwolle-gb-write-button input.button:hover {
    background:#008CBA;
}

.gwolle-gb .gwolle-gb-read {
    color: #fff;
}
footer {
   padding:0;
}
footer .container {
   background: rgba(0,0,0,0.7);
   text-align: right;
   height:40px;
   align-items:center;
   padding:5px;
   color:#fff;
   border-radius: 0 0 20px 20px;
}

}

@media (min-width: 1200px) {

body {
background:#eee;
   background: url('../images/bg.jpg') no-repeat center center fixed;
   background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
padding: 100px 100px;
}

headtop {
padding:2rem 0;
}

headtop .container {
   background: rgba(0,0,0,0.7);
   background-image: url('../images/header.png'), url('../images/headerv.1.png');
   background-repeat: no-repeat, no-repeat;
   background-position: left 10px center, center center;
   background-size: 120px, contain;
   border-radius: 20px 20px 0 0;
   //padding:2rem 2rem;
   height:100px;
}
headtop .imgcursor {
   position: absolute;
   left: 120;
   cursor: pointer;
}
.widget {
        list-style-type:none;
        margin:0;
        padding:0;
}

.page-wrap {

        //padding:2rem 0;
}

.container {
//background:#dddddd;
background: rgba(0,0,0,0.7);
color:#FFF;
}

meny .menu {
//background:#dddddd;
        list-style-type:none;
        margin:0;
        padding:0;
        padding-top: 25px;
        font-size: 115%;
	display:block;
}

meny .menu li {
        position:relative;
}

meny .menu li a {
        padding:.25rem 1rem;
        color:#FFF;
        text-decoration:none;
}
meny .menu li a:visited {
        text-decoration:none;
}

meny .menu li a:hover {
        color:#008CBA;
        text-decoration:none;
}
meny .menu li a:active {
        color:#008CBA;
        text-decoration:none;
}
meny .menu li .sub-menu {
        display:none;
        position:absolute;
        z-index:999;
        top:0;
        left:40%;
        background:#fff;
        box-shadow:1px 1px 10px rgba(0,0,0,0.1);
        margin:0;
        padding:0;
        list-style-type:none;
        width:150px;
        border-radius:.5rem;
}
meny .menu li .sub-menu a {
        color:red;
        padding:.25rem;
        text-align:center;
        display:block;
        text-decoration:none;
}

meny .menu li .sub-menu a:hover {
        color:#FFF;
}

meny .menu > .menu-item-has-children:hover > .sub-menu {
        display:block;
}

meny .menu .menu-item-has-children .sub-menu > .menu-item-has-children:hover .sub-menu {
        display:block;
}

meny .menu .sub-menu li .sub-menu {
        top:0;
        left:100%;
}
a:link, a:visited {
        color: white;
}
a:hover, a:active {
        color: #008CBA;
}

.train {
position: absolute;
left: -200px;
top: 30px;
}

.train-animate {
  animation-name: trainObject;
  animation-duration: 10s;
  animation-timing-function: linear;
}

@keyframes trainObject {
  0% {
    left: calc(0% + -400px);
    transition-timing-function: ease-in;
  }

  50% {
    transform: translateX(calc(50%));
  }

  100% {
    left: calc(100% + 240px);
    transition-timing-function: ease-out;
  }
}

samling .menu {
        list-style-type:none;
        margin:0;
        padding:10px;
        font-size: 120%;
        justify-content: center;
        align-items:center;
        display:flex;
}
samling .menu .container {
        display:flex;
        justify-content: center;
        align-items:center;
        height:100%;
}
samling .menu li {
//        position:relative;
}
samling .menu li a {
        padding:.25rem 1rem;
        color:#FFF;
        text-decoration:none;
}
samling .menu li a:visited {
        text-decoration:none;
}

samling .menu li a:hover {
        color:#008CBA;
        text-decoration:none;
}
samling .menu li a:active {
        color:#008CBA;
        text-decoration:none;
}
.gallery-item {
   float: left;
   margin-top: 10px;
   text-align: center;
   width: 33%;
}
.gallery-item img {
   border: 2px solid #cfcfcf;
}
.fancybox-content {
  // border: 5px solid #cfcfcf;
}
.fancybox-caption {
   padding-top: 25px;
   font-size: 150%;
}
#toggle {
display:none;
}
#popout {
display:none;
}
.gwolle-gb .gwolle-gb-write-button input.button {
    border: 0px solid #e5e5e5;
    color: #fffeee;
}
.gwolle-gb-write-button input.button:hover {
    background:#008CBA;
}

.gwolle-gb .gwolle-gb-read {
    color: #fff;
}

footer {
   padding:0;
}
footer .container {
   background: rgba(0,0,0,0.7);
   text-align: right;
   height:40px;
   align-items:center;
   padding:5px;
   color:#fff;
   border-radius: 0 0 20px 20px;
}

}

@media (min-width: 1320px) {

body {
background:#eee;
   background: url('../images/bg.jpg') no-repeat center center fixed;
   background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
padding: 100px 100px;
}

headtop {
padding:2rem 0;
}

headtop .container {
   background: rgba(0,0,0,0.7);
   background-image: url('../images/header.png'), url('../images/headerv.1.png');
   background-repeat: no-repeat, no-repeat;
   background-position: left 10px center, center center;
   background-size: 180px, contain;
   border-radius: 20px 20px 0 0;
   //padding:2rem 2rem;
   height:100px;
}
headtop .imgcursor {
   position: absolute;
   left: 120;
   cursor: pointer;
}
.widget {
        list-style-type:none;
        margin:0;
        padding:0;
}

.page-wrap {

        //padding:2rem 0;
}

.container {
//background:#dddddd;
background: rgba(0,0,0,0.7);
color:#FFF;
}

meny .menu {
//background:#dddddd;
        list-style-type:none;
        margin:0;
        padding:0;
        padding-top: 25px;
        font-size: 120%;
	display:block;
}

meny .menu li {
        position:relative;
}

meny .menu li a {
        padding:.25rem 1rem;
        color:#FFF;
        text-decoration:none;
}
meny .menu li a:visited {
        text-decoration:none;
}

meny .menu li a:hover {
        color:#008CBA;
        text-decoration:none;
}
meny .menu li a:active {
        color:#008CBA;
        text-decoration:none;
}
meny .menu li .sub-menu {
        display:none;
        position:absolute;
        z-index:999;
        top:0;
        left:40%;
        background:#fff;
        box-shadow:1px 1px 10px rgba(0,0,0,0.1);
        margin:0;
        padding:0;
        list-style-type:none;
        width:150px;
        border-radius:.5rem;
}
meny .menu li .sub-menu a {
        color:red;
        padding:.25rem;
        text-align:center;
        display:block;
        text-decoration:none;
}

meny .menu li .sub-menu a:hover {
        color:#FFF;
}

meny .menu > .menu-item-has-children:hover > .sub-menu {
        display:block;
}

meny .menu .menu-item-has-children .sub-menu > .menu-item-has-children:hover .sub-menu {
        display:block;
}

meny .menu .sub-menu li .sub-menu {
        top:0;
        left:100%;
}
a:link, a:visited {
        color: white;
}
a:hover, a:active {
        color: #008CBA;
}

.train {
position: absolute;
left: -200px;
top: 30px;
}

.train-animate {
  animation-name: trainObject;
  animation-duration: 10s;
  animation-timing-function: linear;
}

@keyframes trainObject {
  0% {
    left: calc(0% + -400px);
    transition-timing-function: ease-in;
  }

  50% {
    transform: translateX(calc(50%));
  }

  100% {
    left: calc(100% + 240px);
    transition-timing-function: ease-out;
  }
}

samling .menu {
        list-style-type:none;
        margin:0;
        padding:10px;
        font-size: 130%;
        justify-content: center;
        align-items:center;
        display:flex;
}
samling .menu .container {
        display:flex;
        justify-content: center;
        align-items:center;
        height:100%;
}
samling .menu li {
//        position:relative;
}
samling .menu li a {
        padding:.25rem 1rem;
        color:#FFF;
        text-decoration:none;
}
samling .menu li a:visited {
        text-decoration:none;
}

samling .menu li a:hover {
        color:#008CBA;
        text-decoration:none;
}
samling .menu li a:active {
        color:#008CBA;
        text-decoration:none;
}
.gallery-item {
   float: left;
   margin-top: 10px;
   text-align: center;
   width: 33%;
}
.gallery-item img {
   border: 2px solid #cfcfcf;
}
.fancybox-content {
 //  border: 5px solid #cfcfcf;
}
.fancybox-caption {
   padding-top: 25px;
   font-size: 150%;
}
#toggle {
display:none;
}
#popout {
display:none;
}
.gwolle-gb .gwolle-gb-write-button input.button {
    border: 0px solid #e5e5e5;
    color: #fffeee;
}
.gwolle-gb-write-button input.button:hover {
    background:#008CBA;
}

.gwolle-gb .gwolle-gb-read {
    color: #fff;
}
footer {
   padding:0;
}
footer .container {
   background: rgba(0,0,0,0.7);
   text-align: right;
   height:40px;
   align-items:center;
   padding:5px;
   color:#fff;
   border-radius: 0 0 20px 20px;
}

}
@media (max-width: 768px) {
            :root {
                /* Snabbare tempo för mobil */
                --train-speed: 12s; 
                --smoke-speed: 4s; 
            }
body {
background:#eee;
   background: url('../images/bg.jpg') no-repeat center center fixed;
   background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
padding: 5px 5px;
}

headtop {
padding:2rem 0;
}

headtop .container {
   background: rgba(0,0,0,0.7);
   background-image: url('../images/mobile_headerv.1.png');
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
   border-radius: 20px 20px 0 0;
   //padding:2rem 2rem;
   height:100px;
}
headtop .imgcursor {
   position: absolute;
   left: 120;
}
.widget {
        list-style-type:none;
        margin:0;
        padding:0;
}

.page-wrap {

        //padding:2rem 0;
}

.container {
//background:#dddddd;
background: rgba(0,0,0,0.7);
color:#FFF;
}

meny .menu {
//background:#dddddd;
        list-style-type:none;
        margin:0;
        padding:0;
	display:none;
}

meny .menu li {
        position:relative;
}

meny .menu li a {
        padding:.25rem 1rem;
        color:#FFF;
        text-decoration:none;
}
meny .menu li a:visited {
        text-decoration:none;
}

meny .menu li a:hover {
        color:#008CBA;
        text-decoration:none;
}
meny .menu li a:active {
        color:#008CBA;
        text-decoration:none;
}
meny .menu li .sub-menu {
        display:none;
        position:absolute;
        z-index:999;
        top:0;
        left:40%;
        background:#fff;
        box-shadow:1px 1px 10px rgba(0,0,0,0.1);
        margin:0;
        padding:0;
        list-style-type:none;
        width:150px;
        border-radius:.5rem;
}
meny .menu li .sub-menu a {
        color:red;
        padding:.25rem;
        text-align:center;
        display:block;
        text-decoration:none;
}

meny .menu li .sub-menu a:hover {
        color:#FFF;
}

meny .menu > .menu-item-has-children:hover > .sub-menu {
        display:block;
}

meny .menu .menu-item-has-children .sub-menu > .menu-item-has-children:hover .sub-menu {
        display:block;
}

meny .menu .sub-menu li .sub-menu {
        top:0;
        left:100%;
}
a:link, a:visited {
        color: white;
}
a:hover, a:active {
        color: #008CBA;
}

.train {
position: absolute;
left: -200px;
top: 30px;
}


samling .menu {
        list-style-type:none;
        margin:0;
        padding:5px;
        font-size: 100%;
        justify-content: center;
        align-items:center;
        display:flex;
}
samling .menu .container {
        display:flex;
        justify-content: center;
        align-items:center;
        height:100%;
}
samling .menu li {
//        position:relative;
}
samling .menu li a {
        padding:.25rem 1rem;
        color:#FFF;
        text-decoration:none;
}
samling .menu li a:visited {
        text-decoration:none;
}

samling .menu li a:hover {
        color:#008CBA;
        text-decoration:none;
}
samling .menu li a:active {
        color:#008CBA;
        text-decoration:none;
}
.gallery-item {
   float: left;
   margin-top: 10px;
   text-align: center;
   width: 48%;
}
.gallery-item img {
   border: 2px solid #cfcfcf;
}
.fancybox-content {
 //  border: 5px solid #cfcfcf;
}
.fancybox-caption {
   padding-top: 25px;
   font-size: 150%;
}

.train-container { padding: 45px 20px; }

footer {
   padding:0;
}
footer .container {
   background: rgba(0,0,0,0.7);
   text-align: right;
   height:40px;
   align-items:center;
   padding:5px;
   color:#fff;
   border-radius: 0 0 20px 20px;
}
#popout {
position: fixed;
z-index: 2;
height: 100%;
width: 250px;
background: rgb(25, 25, 25);
background: rgba(25, 25, 25, .9);
color: white;
top: 0px;
left: -250px;
overflow:auto;
}


#toggle {
float: right;
position: absolute;
top: 10px;
right: 35px;
width: 28px;
height: 24px;

}
.nav-menu li {
//border-bottom:1px solid #eee;
list-style-type:none;
padding:20px;
width:100%;
}

.nav-menu li:hover {
background:#008CBA;
}

.nav-menu li a {
color:#FFF;
text-decoration:none;
width:100%;
}

.gwolle-gb .gwolle-gb-write-button input.button {
    border: 0px solid #e5e5e5;
    color: #fffeee;
}
.gwolle-gb-write-button input.button:hover {
    background:#008CBA;
}

.gwolle-gb .gwolle-gb-read {
    color: #fff;
}

.gwolle-gb div.label,
.gwolle-gb .gwolle_gb_notice {
    color: #fff;
}

}
.mirror-horizontal {
  display: inline-block;
  transform: scaleX(-1);
}
        /* --- GRUNDSTRUKTUR --- */


        .train-container {
            position: relative;
            //background-color: #2c3e50;
            background-color: rgba(44,62,80,0.8);
            border-radius: 30px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.4);
            width: 100%;
            max-width: 700px;
            padding: 60px;
            box-sizing: border-box;
        }

        .content {
            position: relative;
            z-index: 1;
            text-align: center;
            color: white;
            //background-color: rgba(0, 0, 0, 0.25);
            padding: 10px;
            border-radius: 15px;
        }

        .content h2 { color: #f1c40f; margin-top: 0; }
        
        /* --- RÄLSEN --- */
        .track-wrapper { position: absolute; top: 23px; bottom: 23px; left: 23px; right: 23px; pointer-events: none; }
        .track-svg { width: 100%; height: 100%; display: block; overflow: visible; }
        .track-svg rect { fill: none; }
        .sleepers { stroke: #5c4033; stroke-width: 16px; stroke-dasharray: 5 7; }
        .rails { stroke: #bdc3c7; stroke-width: 10px; }
        .gap { stroke: #2c3e50; stroke-width: 6px; }

        /* --- TÅGET --- */
        @property --travel { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
        @keyframes chug { 0% { --travel: 0%; } 100% { --travel: 100%; } }
        
        .train-part {
            position: absolute; top: 0; left: 0;
            offset-path: inset(23px round 12px);
            /* Här används hastighetsvariabeln */
            animation: chug var(--train-speed) linear infinite;
            z-index: 10; box-sizing: border-box;
        }

        .engine { width: 35px; height: 18px; background-color: #e74c3c; border-radius: 4px 10px 10px 4px; border: 2px solid #c0392b; z-index: 12; offset-distance: calc(var(--travel) + 67px); }
        .wagon { width: 25px; height: 16px; border-radius: 2px; border: 2px solid #1a252f; }
        .wagon::after { content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 6px; height: 4px; background-color: #1a252f; }
        .wagon-1 { background-color: #8e44ad; z-index: 11; offset-distance: calc(var(--travel) + 31px); }
        .wagon-2 { background-color: #3498db; z-index: 10; offset-distance: calc(var(--travel) + 0px); }
        .cabin { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 14px; height: 24px; background-color: #34495e; border-radius: 3px; border: 1px solid #1a252f; }
        .headlight { position: absolute; right: -2px; top: 50%; transform: translateY(-50%); width: 4px; height: 8px; background-color: #fff8b0; border-radius: 50%; box-shadow: 12px 0 15px 4px rgba(241, 196, 15, 0.8); }

        /* --- NY OCH BÄTTRE RÖK (FLYGER BAKÅT) --- */
        .smoke {
            position: absolute;
            /* Placerar röken uppe på taket, lite framåt mot nosen */
            top: -4px; 
            left: 15px; 
            width: 8px;
            height: 8px;
            background-color: rgba(200, 200, 200, 0.6);
            border-radius: 50%;
            /* 1.5 sekunder ger en snabb och intensiv rökpuff */
            animation: puff 1.5s infinite ease-out;
            pointer-events: none;
            z-index: 13;
        }

        /* Jämn spridning av rökringarna */
        .smoke-1 { animation-delay: 0s; }
        .smoke-2 { animation-delay: 0.5s; }
        .smoke-3 { animation-delay: 1.0s; }

        @keyframes puff {
            0% { 
                /* Röken startar liten och precis vid skorstenen */
                transform: translate(0, 0) scale(0.5); 
                opacity: 0.8; 
            }
            100% { 
                /* -40px skjuter röken bakåt relativt tåget.
                   -15px skjuter den lite snett uppåt från taket. */
                transform: translate(-40px, -15px) scale(3); 
                opacity: 0; 
            }
        }