fix: point the application form finisher at epteam

fix: datepicker obscured by logo in header searchbar
fix: reuse the MyEP api connection instead of a client per call
2026-09-23 09:26:12 +02:00 · 2026-09-23 09:24:25 +02:00 · 2026-09-22 16:49:44 +02:00 · 2026-09-22 15:49:34 +02:00 · 2026-09-22 15:29:34 +02:00 · 2026-09-22 14:49:04 +02:00
123 changed files with 3513 additions and 6906 deletions
@@ -26,8 +26,9 @@ timezone: Europe/Berlin
 composer_version: "2"
 web_environment:
    - TYPO3_CONTEXT=Development
-nodejs_version: "18"
+nodejs_version: "24"
 corepack_enable: false
+omit_containers: [ddev-ssh-agent]

 # Key features of DDEV's config.yaml:

@@ -1 +1 @@
-16
+24
@@ -1817,21 +1817,22 @@
        },
        {
            "name": "league/oauth2-client",
-            "version": "2.9.0",
+            "version": "2.9.1",
            "source": {
                "type": "git",
                "url": "https://github.com/thephpleague/oauth2-client.git",
-                "reference": "26e8c5da4f3d78cede7021e09b1330a0fc093d5e"
+                "reference": "8cedfef9d01a8d1fd2ecfabb41734b17592c4b71"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/thephpleague/oauth2-client/zipball/26e8c5da4f3d78cede7021e09b1330a0fc093d5e",
-                "reference": "26e8c5da4f3d78cede7021e09b1330a0fc093d5e",
+                "url": "https://api.github.com/repos/thephpleague/oauth2-client/zipball/8cedfef9d01a8d1fd2ecfabb41734b17592c4b71",
+                "reference": "8cedfef9d01a8d1fd2ecfabb41734b17592c4b71",
                "shasum": ""
            },
            "require": {
                "ext-json": "*",
-                "guzzlehttp/guzzle": "^6.5.8 || ^7.4.5",
+                "guzzlehttp/guzzle": "^6.5.8 || ^7.8.2 || ^8.0",
+                "guzzlehttp/psr7": "^1.9.1 || ^2.6.3 || ^3.0",
                "php": "^7.1 || >=8.0.0 <8.6.0"
            },
            "require-dev": {
@@ -1876,9 +1877,9 @@
            ],
            "support": {
                "issues": "https://github.com/thephpleague/oauth2-client/issues",
-                "source": "https://github.com/thephpleague/oauth2-client/tree/2.9.0"
+                "source": "https://github.com/thephpleague/oauth2-client/tree/2.9.1"
            },
-            "time": "2025-11-25T22:17:17+00:00"
+            "time": "2026-09-16T13:14:31+00:00"
        },
        {
            "name": "league/period",
@@ -63,41 +63,39 @@ host('prod')
    ->setForwardAgent(true)
    ->setSshMultiplexing(true)
    ->setDeployPath('/usr/home/eptypo3/public_html/{{application}}')
-    ->set('buspronet_path', '/usr/home/eptypo3/public_html/kuschick/buspronet/buspronet')
    ->set('bin/php', '/usr/bin/php74')
    ->set('http_user', 'eptypo3')
    ->set('writable_mode', 'chmod')
-    ->set('bin/composer', '/usr/bin/composer')
-    ->set('composer_options', '--prefer-dist --no-progress --no-interaction --optimize-autoloader')
    ->set('rsync_src', __DIR__)
    ->set('rsync', $rsyncOptions)
-    ->set('cachetool_args', '--web=SymfonyHttpClient --web-path={{current_path}}/public/ --web-url=https://www.ep-reisen.de')
+    ->set('cachetool_args', '--web=SymfonyHttpClient --web-path={{current_path}}/{{typo3_webroot}}/ --web-url=https://www.ep-reisen.de')
 ;

 task('deploy', [
    'deploy:info',
+    // Build locally first, so a failing build aborts before the server is touched at all.
+    'deploy:assets:build',
    'deploy:setup',
    'deploy:lock',
    'deploy:release',
-    'deploy:assets:build',
    'rsync',
    'deploy:shared',
    'deploy:writable',
+    // The schema has to exist before the new code starts serving traffic.
    'typo3:database:migrate',
    'typo3:language:update',
+    // deploy:publish == deploy:symlink, deploy:unlock, deploy:cleanup, deploy:success
    'deploy:publish',
-    'cachetool:clear:opcache',
-    'typo3:cache:flush',
-    'deploy:buspronet:symlink',
 ]);

-task('deploy:buspronet:symlink', function () {
-    run('ln -s {{buspronet_path}} {{release_or_current_path}}/public/buchung');
-});
+// Caches belong to the release that goes live, so they are cleared after the symlink flip. Hooking
+// into deploy:symlink rather than appending to the list above keeps them inside deploy:publish, ahead
+// of deploy:unlock and deploy:success - a failing cache task must not follow a declared success.
+after('deploy:symlink', 'cachetool:clear:opcache');
+after('deploy:symlink', 'typo3:cache:flush');

 task ('deploy:assets:build', function () {
    runLocally('ddev exec npm ci');
-    runLocally('ddev exec npm rebuild node-sass');
    runLocally('ddev exec npm run build');
 });

@@ -1,62 +1,48 @@
 {
  "name": "eptheme",
-  "description": "EP Reisen TYPO3 website package",
-  "version": "3.0.0",
-  "author": "Björn Fromme, [email protected]",
-  "license": "proprietary",
  "scripts": {
    "dev": "./node_modules/.bin/encore dev --watch",
    "build": "NODE_ENV=production ./node_modules/.bin/encore production"
  },
  "engines": {
-    "node": ">=16"
+    "node": ">=20.19.0"
  },
+  "browserslist": [
+    "defaults"
+  ],
  "dependencies": {
    "@hotwired/stimulus": "^3.2.1",
    "@hotwired/stimulus-webpack-helpers": "^1.0.1",
    "@iframe-resizer/parent": "^5.3.2",
    "@splidejs/splide": "^2.4.21",
-    "axios": "^1.6.2",
    "cooltipz-css": "^1.6.8",
    "dayjs": "^1.10.6",
-    "es6-slide-up-down": "^1.0.0",
    "flatpickr": "^4.6.9",
    "glightbox": "^3.0.9",
    "htmx.org": "^1.9.12",
    "jquery": "^3.6.0",
-    "lazysizes": "^5.3.2",
    "leaflet": "^1.7.1",
    "normalize.css": "^8.0.1",
-    "picturefill": "^3.0.3",
    "slick-carousel": "^1.8.1",
    "sticky-js": "^1.3.0",
    "stimulus-use": "^0.52.0",
    "vue": "^2.6.14",
-    "vue-router": "^3.5.2",
-    "vue-session": "^1.0.0",
-    "vuex": "^3.6.2",
-    "whatwg-fetch": "^3.6.2"
+    "vue-session": "^1.0.0"
  },
  "devDependencies": {
-    "@babel/plugin-proposal-object-rest-spread": "^7.16.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/preset-env": "^7.16.0",
-    "@symfony/webpack-encore": "^2.1.0",
+    "@symfony/webpack-encore": "^4.7.0",
    "@tailwindcss/aspect-ratio": "^0.4.0",
    "@tailwindcss/forms": "^0.5.2",
    "autoprefixer": "^10.4.8",
-    "core-js": "^3.22.5",
-    "document-register-element": "^1.14.10",
    "file-loader": "^6.2.0",
    "postcss": "^8.4.16",
-    "postcss-loader": "^6.2.1",
+    "postcss-loader": "^8.2.1",
    "sass": "^1.53.0",
-    "sass-loader": "^12.6.0",
-    "sass-mq": "^6.0.0",
-    "smoothscroll-polyfill": "^0.4.4",
+    "sass-loader": "^14.2.1",
+    "sass-mq": "^7.0.1",
    "tailwindcss": "^3.1.8",
    "tailwindcss-alt": "^3.0.0",
-    "vue-custom-element": "^3.3.0",
    "vue-loader": "^15.11.1",
    "vue-template-compiler": "^2.6.14"
  }
@@ -85,6 +85,11 @@ $GLOBALS['TYPO3_CONF_VARS']['SYS']['caching']['cacheConfigurations']['rootline']
    'groups' => ['pages'],
 ];

+// Assets are served through the bunny.net CDN, which gzip/brotli-compresses at the edge.
+// Pre-gzipped .gzip twins are served with Content-Encoding: gzip and cannot be processed
+// by the CDN, so stop generating them. mod_deflate still compresses direct origin hits.
+$GLOBALS['TYPO3_CONF_VARS']['FE']['compressionLevel'] = 0;
+
 // suppress php deprecation warnings flooding typo3 logs
 $GLOBALS['TYPO3_CONF_VARS']['SYS']['errorHandlerErrors'] =
    $GLOBALS['TYPO3_CONF_VARS']['SYS']['errorHandlerErrors'] & ~E_DEPRECATED & ~E_USER_DEPRECATED;
@@ -4,9 +4,6 @@ import Vue from 'vue'
 import $ from 'jquery'
 import VueSession from 'vue-session'

-import 'lazysizes';
-import 'lazysizes/plugins/attrchange/ls.attrchange';
-
 const slick = require('slick-carousel');
 const Sticky = require('sticky-js');
 const $window = $(window);
@@ -38,9 +38,9 @@
                <div class="card card--no-form offerlist-item__card">
                    <div class="card__inner">
                        <picture>
-                            <source media="(max-width: 512px)" :data-srcset="offer.teaserImageMobile +  ' 500w'"/>
-                            <img class="card__image scale lazyload" data-sizes="auto"
-                                 :data-src="offer.teaserImage" alt="">
+                            <source media="(max-width: 512px)" :srcset="offer.teaserImageMobile"/>
+                            <img class="card__image scale"
+                                 :src="offer.teaserImage" alt="" loading="lazy">
                        </picture>
                        <div class="card__caption">
                            <span class="card__subtitle" v-html="offer.name"></span>
@@ -55,7 +55,6 @@
 </template>

 <script>
-    import axios from 'axios';
    import $ from 'jquery';

    export default {
@@ -82,13 +81,21 @@
            load() {
                this.loading = true;
                sessionStorage.setItem('filterSettings', JSON.stringify(this.filterSettings));
-                axios({
-                    url: this.endpointUri,
-                    method: 'post',
-                    data: $.param({'tx_epevents_ajax[filterSettings]': this.filterSettings})
+                fetch(this.endpointUri, {
+                    method: 'POST',
+                    credentials: 'same-origin',
+                    headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
+                    body: $.param({'tx_epevents_ajax[filterSettings]': this.filterSettings})
                }).then(response => {
-                    this.offers = response.data.offers;
-                    this.filterOptions = response.data.filterOptions;
+                    // fetch only rejects on network errors, so surface HTTP errors here
+                    // to keep the previous behaviour of falling through to .catch()
+                    if (!response.ok) {
+                        throw new Error(response.statusText);
+                    }
+                    return response.json();
+                }).then(data => {
+                    this.offers = data.offers;
+                    this.filterOptions = data.filterOptions;
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
@@ -1,7 +1,10 @@
+@use "breakpoints";
+@use "mixins";
+
 .badge {
    display: none;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        display: block;
        position: relative;
        z-index: 10;
@@ -27,15 +30,15 @@
    font-size: 20px;
    font-weight: 700;
    line-height: 130%;
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        font-size: 32px;
    }
 }

 .badge__outline {
-    @include sectionFills(0.15);
+    @include mixins.sectionFills(0.15);
 }

 .badge__inner {
-    @include sectionFills();
+    @include mixins.sectionFills();
 }
@@ -1,3 +1,5 @@
+@use "mixins";
+
 .banner {
    position: relative;
    margin-bottom: 20px;
@@ -8,7 +10,7 @@
    min-height: 300px;
    padding: 48px 0;
    color: white;
-    @include sectionBackgrounds(0.8);
+    @include mixins.sectionBackgrounds(0.8);
    display: flex;
    justify-content: space-around;
    align-items: center;
@@ -1,14 +1,20 @@
+@use "breakpoints";
+@use "colors";
+@use "fonts";
+@use "mixins";
+@use "variables";
+
 html,
 body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
-    font-family: $font-main, Sans-Serif;
+    font-family: fonts.$font-main, Sans-Serif;
    font-weight: 400;
    font-size: 16px;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        font-size: 18px;
    }

@@ -41,13 +47,13 @@ html {
    height: auto;
    margin-left: auto;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        display: none;
    }
 }

 .navtoggle__icon {
-    fill: $color-font-main;
+    fill: colors.$color-font-main;
    transition: all 0.25s ease-in-out;

    .mobilenav--open & {
@@ -62,7 +68,7 @@ html {
    right: 2%;
    width: 40px;
    height: 40px;
-    background-color: $color-brand-primary;
+    background-color: colors.$color-brand-primary;
    opacity: 0.75;
 }

@@ -76,12 +82,12 @@ a {
    &.anchor {
        display: block;
        height: 0;
-        padding-top: $header-height-mobile;
-        margin-top: -$header-height-mobile;
+        padding-top: variables.$header-height-mobile;
+        margin-top: -(variables.$header-height-mobile);

-        @include mq($from: tablet) {
-            padding-top: $header-height-desktop;
-            margin-top: -$header-height-desktop;
+        @include breakpoints.mq($from: tablet) {
+            padding-top: variables.$header-height-desktop;
+            margin-top: -(variables.$header-height-desktop);
        }
    }
 }
@@ -126,7 +132,7 @@ ul {
            left: 0;
            content: "\25CF";
            font-size: 18px;
-            @include sectionColoursFromParent();
+            @include mixins.sectionColoursFromParent();
        }
    }
 }
@@ -144,8 +150,8 @@ p {
 hr {
    max-width: 25%;
    margin: 32px auto 32px 0;
-    color: $color-ruler;
-    background-color: $color-ruler;
+    color: colors.$color-ruler;
+    background-color: colors.$color-ruler;
    height: 1px;
    border: none;
 }
@@ -161,7 +167,7 @@ h3,
 }

 .headline {
-    @include sectionColoursFromParent();
+    @include mixins.sectionColoursFromParent();

    &--icon {
        display: flex;
@@ -186,7 +192,7 @@ h1,
    text-transform: uppercase;
    padding-bottom: 18px;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        font-size: 32px;
        padding-bottom: 24px;
    }
@@ -200,11 +206,11 @@ h1,
        display: block;
        font-size: 16px;
        line-height: 120%;
-        color: $color-brand-primary;
+        color: colors.$color-brand-primary;
        text-transform: none;
-        @include sectionColoursFromParent();
+        @include mixins.sectionColoursFromParent();

-        @include mq($from: tablet) {
+        @include breakpoints.mq($from: tablet) {
            font-size: 24px;
        }

@@ -221,7 +227,7 @@ h2,
    padding-bottom: 16px;
    font-weight: 400;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        font-size: 24px;
        padding-bottom: 24px;
    }
@@ -231,7 +237,7 @@ h3 {
    font-weight: 400;
    font-size: 16px;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        font-size: 18px;
        padding-bottom: 8px;
    }
@@ -243,7 +249,7 @@ h3 {
    height: auto;
    padding-right: 16px;

-    @include mq($from: mobile) {
+    @include breakpoints.mq($from: mobile) {
        width: 96px;
    }
 }
@@ -1,3 +1,6 @@
+@use "breakpoints";
+@use "colors";
+
 .box {
    width: 100%;
 }
@@ -13,7 +16,7 @@
    color: white;
    text-align: center;
    text-decoration: none;
-    background-color: $color-brand-secondary;
+    background-color: colors.$color-brand-secondary;
    border: none;
    width: 100%;
    font-size: 20px;
@@ -23,18 +26,18 @@

 .box__content {
    padding: 32px 16px;
-    background-color: $color-brand-primary;
+    background-color: colors.$color-brand-primary;
    color: white;
 }

 .box__form {
    display: none;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        display: block;
        width: 100%;
        height: auto;
-        fill: $color-brand-primary;
+        fill: colors.$color-brand-primary;
    }

    &--top {
@@ -52,7 +55,7 @@
    font-size: 16px;
    line-height: 32px;

-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
        font-size: 20px;
        line-height: 32px;

@@ -66,7 +69,7 @@
 .box__nav {
    margin-top: -32px;
    padding-bottom: 32px;
-    background-color: $color-brand-primary;
+    background-color: colors.$color-brand-primary;
 }

 .box__nav__item {
@@ -78,7 +81,7 @@

    &--active,
    &:hover {
-        background-color: $color-brand-light;
+        background-color: colors.$color-brand-light;
    }
 }

@@ -1,6 +1,9 @@
+@use "breakpoints";
+@use "colors";
+
 .brands {
    padding-top: 32px;
-    border-top: 1px solid $color-divider;
+    border-top: 1px solid colors.$color-divider;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
@@ -9,7 +12,7 @@
 .brands__item {
    width: 50%;

-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
        width: 25%;
    }
 }
@@ -1,7 +1,9 @@
-$mq-breakpoints: (
-    mobile: $viewport-width-mobile,
-    tablet: $viewport-width-tablet,
-    desktop: $viewport-width-desktop
-);
+@use "variables";

-@import "~sass-mq";
+@forward "sass-mq" with (
+    $breakpoints: (
+        mobile: variables.$viewport-width-mobile,
+        tablet: variables.$viewport-width-tablet,
+        desktop: variables.$viewport-width-desktop
+    )
+);
@@ -1,3 +1,7 @@
+@use "breakpoints";
+@use "colors";
+@use "mixins";
+
 .button {
    display: inline-block;
    font-weight: 700;
@@ -5,7 +9,7 @@

    &--default {
      display: inline-block;
-      background-color: $color-brand-primary;
+      background-color: colors.$color-brand-primary;
      color: white;
      padding: 4px 16px;
    }
@@ -13,7 +17,7 @@
    &--page-header {
          display: block;
          min-width: 186px;
-          background-color: $color-brand-primary;
+          background-color: colors.$color-brand-primary;
          color: white;
          font-size: 18px;
          padding: 0 32px 0 24px;
@@ -26,14 +30,14 @@
        display: block;
        min-width: 220px;
        text-align: center;
-        background-color: $color-brand-primary;
-        @include sectionBackgroundsFromParent();
+        background-color: colors.$color-brand-primary;
+        @include mixins.sectionBackgroundsFromParent();
        color: white;
        line-height: 48px;
        border: none;
        outline: none;

-        @include mq($from: tablet) {
+        @include breakpoints.mq($from: tablet) {
            box-shadow: 8px 8px 8px rgba(black, 0.2);
            font-size: 24px;
        }
@@ -43,7 +47,7 @@
        width: 100%;
        display: inline-block;

-        @include mq($from: tablet) {
+        @include breakpoints.mq($from: tablet) {
            width: auto;
        }
    }
@@ -56,7 +60,7 @@

        &:hover {
            background: white;
-            color: $color-font-main;
+            color: colors.$color-font-main;
        }
    }

@@ -65,7 +69,7 @@
    }

    &--icon {
-        background-color: $color-brand-primary;
+        background-color: colors.$color-brand-primary;
        color: white;
        width: 16px;
        height: 16px;
@@ -1,5 +1,8 @@
+@use "breakpoints";
+@use "mixins";
+
 .card {
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
        &:not(.card--no-form) {
            padding-bottom: 48px;
        }
@@ -20,12 +23,12 @@
    padding: 16px;
    color: white;
    text-transform: uppercase;
-    @include sectionBackgrounds(0.75);
+    @include mixins.sectionBackgrounds(0.75);
    transition: background-color 0.25s ease-in-out;

-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
        .card:hover & {
-            @include sectionBackgrounds();
+            @include mixins.sectionBackgrounds();
        }
    }
 }
@@ -33,7 +36,7 @@
 .card__form {
    display: none;

-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
        display: block;
        opacity: 0;
        transition: opacity 0.25s ease-in-out;
@@ -50,7 +53,7 @@
    }

    polygon {
-        @include sectionFills();
+        @include mixins.sectionFills();
    }
 }

@@ -1,21 +1,25 @@
+@use "colors";
+@use "mixins";
+@use "variables";
+
 .carousel {

    &--background {
-        background-color: $color-background;
+        background-color: colors.$color-background;
        padding-bottom: 48px;
        margin-bottom: 8px;
    }

-    @include sectionBackgrounds(0.25);
+    @include mixins.sectionBackgrounds(0.25);
 }

 .carousel__outer {
-    @include container($viewport-width-max);
+    @include mixins.container(variables.$viewport-width-max);
    position: relative;
 }

 .carousel__inner {
-    @include container($content-width-max);
+    @include mixins.container(variables.$content-width-max);
 }

 .carousel__item {
@@ -36,7 +40,7 @@
    height: 32px;

    fill: white;
-    @include sectionColoursFromParent;
+    @include mixins.sectionColoursFromParent;

    &--prev {
        left: -5px;
@@ -59,7 +63,7 @@
    }

    .testimonials & {
-        fill: $color-brand-primary;
+        fill: colors.$color-brand-primary;
    }
 }

@@ -1,8 +1,10 @@
+@use "sass:color";
+
 //$color-brand-primary: #0084d4;
 $color-brand-primary: #19a0d2;
 $color-brand-secondary: #1e314b;
 $color-brand-light: #8CCFE8;
-$color-background: lighten(#dbdee2, 5%);
+$color-background: color.adjust(#dbdee2, $lightness: 5%);

 $color-font-main: #1e314b;
 $color-divider: rgba($color-background, 0.8);
@@ -1,3 +1,6 @@
+@use "breakpoints";
+@use "colors";
+
 .configurator {
    background: url(../images/bg_configurator.jpg) no-repeat top left;
    background-size: cover;
@@ -39,7 +42,7 @@
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
-    background-color: rgba($color-brand-secondary, 0.85);
+    background-color: rgba(colors.$color-brand-secondary, 0.85);
    color: white;
 }

@@ -51,7 +54,7 @@
    display: none;
    color: white;

-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
        display: block;
    }
 }
@@ -83,11 +86,11 @@
    text-decoration: none;
    text-transform: uppercase;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        flex-wrap: nowrap;
    }

-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
        align-items: center;
    }
 }
@@ -98,12 +101,12 @@
    margin-bottom: 8px;
    font-weight: 700;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        width: 30%;
        margin-bottom: 0;
    }

-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
        width: 20%;
        margin-bottom: 0;
    }
@@ -113,11 +116,11 @@
    width: 100%;
    padding-right: 40px;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        width: 70%;
    }

-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
        width: 80%;
    }
 }
@@ -131,11 +134,11 @@
    font-size: 14px;
    font-weight: 700;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        font-size: 16px;
    }

-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
        margin-bottom: 0;
    }
 }
@@ -151,13 +154,13 @@
    text-decoration: none;
    text-align: center;
    color: white;
-    background-color: $color-brand-primary;
+    background-color: colors.$color-brand-primary;
    border-radius: 16px;
    font-family: "fontello";

    &.closed {
        background-color: white;
-        color: $color-brand-primary;
+        color: colors.$color-brand-primary;

        &:before {
            content: '\e800';
@@ -204,7 +207,7 @@
        margin-bottom: 8px;
    }

-    @include mq($from: mobile) {
+    @include breakpoints.mq($from: mobile) {
        width: 50%;

        .active & {
@@ -212,7 +215,7 @@
        }
    }

-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
        width: 25%;

        .active & {
@@ -240,10 +243,10 @@
    }

    .selected &:after {
-        background-color: rgba($color-brand-secondary, 0.75);
+        background-color: rgba(colors.$color-brand-secondary, 0.75);
    }

-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
        &:hover:after {
            content: "";
            width: 100%;
@@ -251,7 +254,7 @@
            position: absolute;
            top: 0;
            left: 0;
-            background-color: rgba($color-brand-primary, 0.5);
+            background-color: rgba(colors.$color-brand-primary, 0.5);
        }
    }

@@ -260,12 +263,12 @@
        background-position: center 32px;
        background-size: 96px;

-        @include mq($from: tablet) {
+        @include breakpoints.mq($from: tablet) {
            background-position: center 16px;
            background-size: 128px;
        }

-        @include mq($from: desktop) {
+        @include breakpoints.mq($from: desktop) {
            background-position: center 8px;
            background-size: 96px;
        }
@@ -382,7 +385,7 @@
    flex-wrap: wrap;
    justify-content: space-between;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        flex-wrap: nowrap;
    }
 }
@@ -391,7 +394,7 @@
    width: 100%;
    padding-bottom: 16px;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        width: 66.6666%;
        padding-right: 32px;
    }
@@ -401,7 +404,7 @@
    width: 100%;
    padding-bottom: 16px;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        width: 33.3333%;
    }
 }
@@ -456,7 +459,7 @@
    line-height: 32px;
    text-align: center;
    background-color: white;
-    color: $color-brand-primary;
+    color: colors.$color-brand-primary;
    border-radius: 16px;
    font-family: 'fontello';

@@ -1,3 +1,6 @@
+// .headline* live in _base.scss; @extend needs that module loaded explicitly.
+@use "base";
+
 .cookiefirst {
    h2 {
        @extend .headline;
@@ -1,10 +1,14 @@
+@use "breakpoints";
+@use "colors";
+@use "mixins";
+
 .form {
  margin: 0;
  padding: 0;
  position: relative;
  max-width: 100%;

-  @include mq($from: desktop) {
+  @include breakpoints.mq($from: desktop) {
    &:not(&--horizontal) {
      max-width: 75%;
    }
@@ -16,7 +20,7 @@

  &--horizontal {
    width: 100%;
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
      display: flex;
      justify-content: space-between;
      align-items: center;
@@ -42,7 +46,7 @@
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
-    background-color: $color-brand-light;
+    background-color: colors.$color-brand-light;
    color: white;
    border-radius: 8px;
  }
@@ -50,7 +54,7 @@
  &--mobile {
    display: block;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
      display: none;
    }
  }
@@ -58,7 +62,7 @@
  &--tablet {
    display: none;

-    @include mq($from: tablet, $until: desktop) {
+    @include breakpoints.mq($from: tablet, $until: desktop) {
      display: block;
    }
  }
@@ -66,7 +70,7 @@
  &--desktop {
    display: none;

-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
      display: block;
    }
  }
@@ -79,7 +83,7 @@
      padding-top: 20px;
    }

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
      width: 33.3333%;
    }
  }
@@ -88,20 +92,20 @@
 .form__item__error {
  padding: 8px;
  font-size: 90%;
-  color: $color-formerror;
+  color: colors.$color-formerror;
 }

 .form__field {
-  @include nooutline;
+  @include mixins.nooutline;
  border: none;
  border-radius: 8px;
  width: 100%;
  padding: 8px 16px;
  color: white;
-  background-color: $color-brand-light;
+  background-color: colors.$color-brand-light;

  .form--box & {
-    background-color: $color-brand-light;
+    background-color: colors.$color-brand-light;
    color: white;
  }

@@ -114,10 +118,10 @@
    display: block;
    padding: 8px;
    width: 100%;
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
      width: 50%;
    }
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
      width: 25%;
    }
  }
@@ -127,7 +131,7 @@
  }

  .has-errors & {
-    border: 1px solid $color-formerror;
+    border: 1px solid colors.$color-formerror;
  }
 }

@@ -158,7 +162,7 @@
  display: block;
  width: 100%;
  color: white;
-  background-color: $color-brand-secondary;
+  background-color: colors.$color-brand-secondary;
  border: none;
  font-weight: 700;
  text-decoration: none;
@@ -166,7 +170,7 @@
  padding: 8px 32px;
  margin-bottom: 16px;

-  @include mq($from: tablet) {
+  @include breakpoints.mq($from: tablet) {
    display: inline-block;
    width: auto;
    margin-bottom: 0;
@@ -189,10 +193,10 @@
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
-  background-color: rgba($color-divider, 0.75);
+  background-color: rgba(colors.$color-divider, 0.75);

  .form--box & {
-    background-color: rgba($color-brand-primary, 0.75);
+    background-color: rgba(colors.$color-brand-primary, 0.75);
  }
 }

@@ -1,7 +1,10 @@
+@use "breakpoints";
+@use "colors";
+
 .helpernav {
    display: none;

-    @include mq($from: mobile) {
+    @include breakpoints.mq($from: mobile) {
        display: block;
        position: relative;
    }
@@ -24,7 +27,7 @@
    z-index: 10;
    min-width: 300px;
    padding: 16px 32px;
-    background-color: $color-brand-primary;
+    background-color: colors.$color-brand-primary;
 }

 .helpernav__item {
@@ -32,7 +35,7 @@
  &:hover:not(.helpernav__item--disabled) {

    & > .helpernav__link {
-      background-color: $color-brand-primary;
+      background-color: colors.$color-brand-primary;
    }

    & > .helpernav__subnav {
@@ -1,11 +1,16 @@
+@use "breakpoints";
+@use "colors";
+@use "mixins";
+@use "variables";
+
 .herounit {
    position: relative;
    width: 100%;
-    max-width: $viewport-width-max;
+    max-width: variables.$viewport-width-max;
    margin: 0 auto;

    &--indent {
-        max-width: $content-width-max - 16px;
+        max-width: variables.$content-width-max - 16px;
    }
 }

@@ -16,22 +21,22 @@

    height: 240px;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        height: 384px;
    }

-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
        height: 420px;
    }

    .herounit--large & {
        height: 300px;

-        @include mq($from: tablet) {
+        @include breakpoints.mq($from: tablet) {
            height: 480px;
        }

-        @include mq($from: desktop) {
+        @include breakpoints.mq($from: desktop) {
            height: 700px;
        }
    }
@@ -39,7 +44,7 @@
    .herounit--indent & {
        height: 320px;

-        @include mq($from: tablet) {
+        @include breakpoints.mq($from: tablet) {
            height: 480px;
        }
    }
@@ -48,7 +53,7 @@
 .herounit__mask {
    display: none;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        position: absolute;
        z-index: 10;
        top: 0;
@@ -67,9 +72,9 @@
    width: 100%;
    height: 100%;
    padding: 32px;
-    background-color: rgba($color-brand-secondary, 0.2);
+    background-color: rgba(colors.$color-brand-secondary, 0.2);

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        background-color: transparent;
        padding: 64px 16px 0 96px;
        max-width: 45%;
@@ -83,7 +88,7 @@
    font-size: 32px;
    line-height: 95%;

-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
        font-size: 48px;
    }

@@ -101,10 +106,10 @@
        span {
            font-weight: 700;
            text-transform: uppercase;
-            color: $color-brand-primary;
+            color: colors.$color-brand-primary;
        }

-        @include mq($from: desktop) {
+        @include breakpoints.mq($from: desktop) {
            font-size: 56px;
        }
    }
@@ -120,7 +125,7 @@
    color: white;
    text-transform: none;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        font-size: 20px;
    }

@@ -128,12 +133,12 @@
        font-size: 22px;
        font-weight: 700;

-        @include mq($from: tablet) {
+        @include breakpoints.mq($from: tablet) {
            font-size: 24px;
            padding-bottom: 48px;
        }

-        @include mq($from: desktop) {
+        @include breakpoints.mq($from: desktop) {
            font-size: 32px;
            padding-bottom: 96px;
        }
@@ -146,7 +151,7 @@
    line-height: 120%;
    color: white;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        display: block;
    }
 }
@@ -154,7 +159,7 @@
 .herounit__icon {
    display: none;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        display: block;
        width: 100%;
        height: auto;
@@ -173,11 +178,11 @@
    left: 50%;
    transform: translateX(-50%);

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        top: 85%;
    }

-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
@@ -190,34 +195,34 @@
    height: 48px;
    border: none;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        display: block;
    }

    & > polygon {
-        fill: $color-brand-primary;
-        @include sectionFills();
+        fill: colors.$color-brand-primary;
+        @include mixins.sectionFills();
    }
 }

 #gradient__from {
-    stop-color: $color-brand-secondary;
+    stop-color: colors.$color-brand-secondary;
 }

 #gradient__to {
    .section-default & {
-        stop-color: $color-brand-primary;
+        stop-color: colors.$color-brand-primary;
    }
    .section-incentives & {
-        stop-color: $color-incentives;
+        stop-color: colors.$color-incentives;
    }
    .section-teambuilding & {
-        stop-color: $color-teambuilding;
+        stop-color: colors.$color-teambuilding;
    }
    .secolor-meeting & {
-        stop-color: $color-meetings;
+        stop-color: colors.$color-meetings;
    }
    .secolor-events & {
-        stop-color: $color-events;
+        stop-color: colors.$color-events;
    }
 }
@@ -1,9 +1,12 @@
+@use "breakpoints";
+@use "colors";
+
 .iconbar {
    @apply hidden lg:block fixed z-100 top-[30vh] right-0 overflow-hidden;
 }
 .iconbar {
    display: none;
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
        display: block;
    }
    position: fixed;
@@ -20,7 +23,7 @@
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
-    background-color: $color-brand-light;
+    background-color: colors.$color-brand-light;
    margin-bottom: 2px;

    &:hover {
@@ -30,7 +33,7 @@

 .iconbar__icon {
    padding: 4px;
-    background-color: $color-brand-primary;
+    background-color: colors.$color-brand-primary;

    svg {
        display: block;
@@ -1,3 +1,6 @@
+@use "breakpoints";
+@use "mixins";
+
 .iconnav {
    display: flex;
    flex-wrap: wrap;
@@ -21,7 +24,7 @@
        opacity: 1;
    }

-    @include mq($from: mobile) {
+    @include breakpoints.mq($from: mobile) {
        width: 25%;
    }
 }
@@ -36,5 +39,5 @@
 .iconnav__label {
    text-transform: uppercase;
    font-weight: 700;
-    @include sectionColours();
+    @include mixins.sectionColours();
 }
@@ -1,7 +1,10 @@
+@use "breakpoints";
+@use "mixins";
+
 main {
    padding-top: 96px;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        padding-top: 140px;
    }
 }
@@ -10,7 +13,7 @@ main {
    width: 100%;
    padding-top: 32px;
    padding-bottom: 32px;
-    @include clearfix();
+    @include mixins.clearfix();

    &.nopad {
        &--bottom {
@@ -23,18 +26,18 @@ main {
 }

 .content__title {
-    @include container();
+    @include mixins.container();
    text-align: center;
 }

 .content__inner {
-    @include container();
+    @include mixins.container();

    .content--has-sidebar & {
        display: flex;
        flex-wrap: wrap;

-        @include mq($from: tablet) {
+        @include breakpoints.mq($from: tablet) {
            flex-wrap: nowrap;
        }
    }
@@ -45,40 +48,40 @@ main {
    padding: 0 0 32px;
    overflow: hidden;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        padding: 0;
    }
 }

 .content__plain {
-    @include clearfix();
-    @include mq($from: tablet) {
+    @include mixins.clearfix();
+    @include breakpoints.mq($from: tablet) {
        padding-right: 96px;
    }
 }

 .content__background {
-    @include clearfix();
-    @include sectionBackgrounds(0.15);
+    @include mixins.clearfix();
+    @include mixins.sectionBackgrounds(0.15);
    padding: 24px 48px 24px 32px;
 }

 .content__float {
-  @include clearfix();
+  @include mixins.clearfix();
 }

 .content__sidebar {
    width: 100%;
    padding: 32px 0;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        flex: 0 0 320px;
        padding: 0 0 0 32px;
    }
 }

 .content__form {
-    @include sectionFills(0.15);
+    @include mixins.sectionFills(0.15);
    width: 100%;
    height: auto;
    display: block;
@@ -93,7 +96,7 @@ main {

 .desktop-only {
    display: none;
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        display: block;
    }
 }
@@ -1,4 +1,6 @@
@use "sass:math";
+@use "variables" as *;
+@use "colors" as *;

@mixin clearfix {
    &::after {
@@ -1,3 +1,6 @@
+@use "breakpoints";
+@use "colors";
+
 .mobilenav {
    position: fixed;
    z-index: 50;
@@ -7,10 +10,10 @@
    height: 0;
    padding-top: 96px;
    overflow: hidden;
-    background: rgba($color-brand-secondary, 0.9);
+    background: rgba(colors.$color-brand-secondary, 0.9);
    transition: height 0.25s ease-in-out;

-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
        display: none;
    }

@@ -1,3 +1,5 @@
+@use "breakpoints";
+
 .news-entry {
  width: 100%;
  &:not(:last-child) {
@@ -13,7 +15,7 @@
  display: flex;
  flex-direction: column;

-  @include mq($from: desktop) {
+  @include breakpoints.mq($from: desktop) {
    flex-direction: row;
  }
 }
@@ -22,7 +24,7 @@
  width: 100%;
  margin-bottom: 8px;

-  @include mq($from: desktop) {
+  @include breakpoints.mq($from: desktop) {
    width: 50%;
  }
 }
@@ -39,7 +41,7 @@
 .news-entry__teaser {
  width: 100%;

-  @include mq($from: desktop) {
+  @include breakpoints.mq($from: desktop) {
    padding-left: 24px;
    width: 50%;
  }
@@ -1,3 +1,5 @@
+@use "breakpoints";
+
 .offerlist {
  position: relative;
 }
@@ -13,7 +15,7 @@
 }

 .offerlist__teasers {
-  @include mq($from: tablet) {
+  @include breakpoints.mq($from: tablet) {
    display: flex;
    flex-wrap: wrap;
  }
@@ -24,13 +26,13 @@
  text-decoration: none;
  margin-bottom: 32px;
  display: block;
-  @include mq($from: mobile) {
+  @include breakpoints.mq($from: mobile) {
    display: flex;
  }
-  @include mq($from: tablet) {
+  @include breakpoints.mq($from: tablet) {
    width: 50%;
  }
-  @include mq($from: desktop) {
+  @include breakpoints.mq($from: desktop) {
    width: 33.3333%;
  }
 }
@@ -1,25 +1,30 @@
+@use "breakpoints";
+@use "colors";
+@use "mixins";
+@use "variables";
+
 .page-footer {
    width: 100%;
-    background: linear-gradient(to right, $color-brand-secondary, $color-brand-primary);
+    background: linear-gradient(to right, colors.$color-brand-secondary, colors.$color-brand-primary);
    color: white;
    padding-top: 16px;
    padding-bottom: 16px;

-    @include mq($from: mobile) {
+    @include breakpoints.mq($from: mobile) {
        padding-top: 48px;
        padding-bottom: 48px;
    }
 }

 .page-footer__inner {
-    @include container($content-width-max);
+    @include mixins.container(variables.$content-width-max);
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
    border-bottom: 1px solid white;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        padding-bottom: 48px;
    }
 }
@@ -33,14 +38,14 @@
        text-align: left;
    }

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        width: 20%;
    }

    &--hide-mobile {
        display: none;

-        @include mq($from: tablet) {
+        @include breakpoints.mq($from: tablet) {
            display: block;
        }
    }
@@ -60,14 +65,14 @@
 }

 .page-footer__bottom {
-    @include container($content-width-max);
+    @include mixins.container(variables.$content-width-max);
    padding-top: 32px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        align-items: flex-start;
        justify-content: space-between;
    }
@@ -76,7 +81,7 @@
 .page-footer__bottom__column {
    width: 100%;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        width: 33.3333%;
    }
 }
@@ -86,7 +91,7 @@
    justify-content: center;
    align-items: flex-start;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        justify-content: flex-start;
    }
 }
@@ -106,7 +111,7 @@
    font-weight: 700;
    text-align: center;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        text-align: left;
    }
 }
@@ -115,7 +120,7 @@
    text-align: center;
    padding-top: 32px;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        text-align: right;
        padding-top: 0;
    }
@@ -138,7 +143,7 @@
    text-align: center;
    padding-top: 32px;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        text-align: left;
        padding-top: 0;
    }
@@ -1,3 +1,7 @@
+@use "breakpoints";
+@use "colors";
+@use "mixins";
+
 .page-header {
    width: 100%;
    position: fixed;
@@ -5,28 +9,28 @@
    left: 0;
    z-index: 1000;
    background: white;
-    box-shadow: 0 2px 2px rgba($color-background, 0.5);
+    box-shadow: 0 2px 2px rgba(colors.$color-background, 0.5);
 }

 .page-header__bar {
-    background: linear-gradient(to right, $color-brand-primary 50%, $color-brand-secondary);
+    background: linear-gradient(to right, colors.$color-brand-primary 50%, colors.$color-brand-secondary);
 }

 .page-header__bar__main {
-    @include container();
+    @include mixins.container();
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        justify-content: space-between;
    }
 }

 .page-header__bar__search {
    display: none;
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        display: block;
        width: 50%;
    }
@@ -37,7 +41,7 @@
    justify-content: center;
    align-items: center;
    width: 100%;
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        width: 50%;
        justify-content: flex-end;
    }
@@ -53,14 +57,14 @@
 .page-header__bar__divider {
    display: none;

-    @include mq($from: mobile) {
+    @include breakpoints.mq($from: mobile) {
        display: inline-block;
        padding: 12px 8px;
    }
 }

 .page-header__main {
-    @include container();
+    @include mixins.container();
    padding: 16px;
    display: flex;
    display: -ms-flexbox;
@@ -68,11 +72,11 @@
    align-items: center;
    -ms-flex-align: center;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        padding: 32px 16px 24px;
    }

-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
        justify-content: space-between;
        align-items: baseline;
        -ms-flex-align: end;
@@ -98,7 +102,7 @@
 .page-header__sitenav {
    display: none;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        display: block;
    }
 }
@@ -106,7 +110,7 @@
 .page-header__button {
    display: none;

-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
        position: relative;
        display: block;
        min-width: 220px;
@@ -128,6 +132,6 @@
    border: none;

    & > polygon {
-        fill: $color-brand-primary;
+        fill: colors.$color-brand-primary;
    }
 }
@@ -1,3 +1,5 @@
+@use "colors";
+
 .paginator {
    list-style: none;
    margin: 0;
@@ -10,7 +12,7 @@

 .paginator__item {
    display: inline-block;
-    background-color: $color-brand-primary;
+    background-color: colors.$color-brand-primary;
    color: white;
    padding: 4px;
    text-decoration: none;
@@ -19,8 +21,8 @@
    }

    &--current {
-        border: 1px solid $color-brand-primary;
+        border: 1px solid colors.$color-brand-primary;
        background-color: white;
-        color: $color-brand-primary;
+        color: colors.$color-brand-primary;
    }
 }
@@ -1,24 +1,27 @@
+@use "breakpoints";
+@use "mixins";
+
 .searchresult {}

 .searchresult__info {
-    @include container();
+    @include mixins.container();
 }

 .searchresult-item {
    text-decoration: none;
    margin-bottom: 32px;
    display: block;
-    @include mq($from: mobile) {
+    @include breakpoints.mq($from: mobile) {
        display: flex;
    }
 }

 .searchresult-item__card {
    width: 100%;
-    @include mq($from: mobile) {
+    @include breakpoints.mq($from: mobile) {
        width: 240px;
    }
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
        width: 33.3333%;
    }
 }
@@ -27,8 +30,8 @@
    margin: 0 8px;
    padding: 32px;
    color: white;
-    @include sectionBackgrounds();
-    @include mq($from: mobile) {
+    @include mixins.sectionBackgrounds();
+    @include breakpoints.mq($from: mobile) {
        margin: 0;
        flex: 1;
    }
@@ -1,5 +1,8 @@
+@use "breakpoints";
+@use "mixins";
+
 .sitenav {
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
        padding-right: 64px;
    }
 }
@@ -25,7 +28,7 @@
    &--active,
    &:hover {
        border-bottom: 3px solid;
-        @include sectionColours();
+        @include mixins.sectionColours();
    }

 }
@@ -1,3 +1,5 @@
+@use "breakpoints";
+
 .slider {}

 .slider__arrow {
@@ -38,7 +40,7 @@
        top: 30%;
    }

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        width: 16px;
        height: 16px;
    }
@@ -1,11 +1,14 @@
+@use "breakpoints";
+@use "mixins";
+
 .statement {
-    @include container();
+    @include mixins.container();
    padding-top: 32px;
    padding-bottom: 48px;
 }

 .statement__inner {
-    @include sectionBackgrounds();
+    @include mixins.sectionBackgrounds();
    box-shadow: 0 5px 10px rgba(black, 0.2);
    text-align: center;
    padding-top: 48px;
@@ -18,7 +21,7 @@
    font-size: 24px;
    line-height: 105%;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        font-size: 48px;
    }
 }
@@ -1,3 +1,6 @@
+@use "breakpoints";
+@use "colors";
+
 .team {
    display: flex;
    justify-content: space-between;
@@ -12,11 +15,11 @@
    max-width: 400px;
    padding: 0 16px 64px;

-    @include mq($until: desktop) {
+    @include breakpoints.mq($until: desktop) {
      margin: 0 auto;
    }

-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
        width: 50%;
        max-width: 100%;
    }
@@ -57,10 +60,10 @@

 .team__position {
    display: block;
-    color: $color-brand-primary;
+    color: colors.$color-brand-primary;
 }

 .team__contact__link {
    text-decoration: none;
-    color: $color-brand-primary;
+    color: colors.$color-brand-primary;
 }
@@ -1,12 +1,15 @@
+@use "breakpoints";
+@use "mixins";
+
 .teasers {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
-    @include sectionBackgrounds(0.15);
+    @include mixins.sectionBackgrounds(0.15);
    margin: 0 -16px 0;

-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
        flex-direction: row;
    }
 }
@@ -19,15 +22,15 @@
        cursor: pointer;
    }

-    @include mq($until: tablet) {
+    @include breakpoints.mq($until: tablet) {
        padding-bottom: 16px;
    }

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        width: 50%;
    }

-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
        width: 33.3333%;
    }
 }
@@ -40,12 +43,12 @@
 }

 .teaser__caption {
-    @include sectionBackgroundsFromParent();
+    @include mixins.sectionBackgroundsFromParent();
    padding: 16px 16px 0;
 }

 .teaser__form {
-    @include sectionFills();
+    @include mixins.sectionFills();
    width: 100%;
    height: auto;
    display: block;
@@ -1,17 +1,20 @@
+@use "breakpoints";
+@use "colors";
+
 .testimonial {
    width: 100%;
    padding: 0 32px;
    text-align: center;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        font-size: 80%;
        width: 50%;
        &:not(:last-child) {
-            border-right: 1px solid $color-divider;
+            border-right: 1px solid colors.$color-divider;
        }
    }

-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
        width: 25%;
    }
 }
@@ -1,3 +1,7 @@
+@use "breakpoints";
+@use "colors";
+@use "mixins";
+
 .tiles {
    padding-bottom: 0;
 }
@@ -15,7 +19,7 @@
    padding: 16px;
    text-decoration: none;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        width: 50%;
        padding: 16px;
    }
@@ -26,12 +30,12 @@
    background-size: cover;
    background-position: center;

-    @include mq($from: mobile) {
+    @include breakpoints.mq($from: mobile) {
        min-height: 250px;
        padding: 32px;
    }

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        padding: 32px 32px 0;
        min-height: 375px;
    }
@@ -42,33 +46,33 @@
    color: white;
    text-align: center;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        width: 70%;
        margin: 0 auto;
    }
 }

 .tile__caption__inner {
-    @include sectionBackgrounds(0.75);
+    @include mixins.sectionBackgrounds(0.75);
    width: 100%;
    padding: 24px 0;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        padding: 32px 0;

        .tile:hover .section-incentives & {
-            background-color: $color-incentives;
+            background-color: colors.$color-incentives;
        }
        .tile:hover .section-teambuilding & {
-            background-color: $color-teambuilding;
+            background-color: colors.$color-teambuilding;
        }

        .tile:hover .section-meetings & {
-            background-color: $color-meetings;
+            background-color: colors.$color-meetings;
        }

        .tile:hover .section-events & {
-            background-color: $color-events;
+            background-color: colors.$color-events;
        }
    }
 }
@@ -77,7 +81,7 @@
    display: none;
    padding: 16px 32px 0;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        .tile:hover & {
            display: block;
        }
@@ -91,10 +95,10 @@
    margin-top: -1px;

    polygon {
-        @include sectionFills();
+        @include mixins.sectionFills();
    }

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        .tile:hover & {
            display: block;
        }
@@ -114,7 +118,7 @@
    font-weight: 700;
    min-height: 54px;

-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
        font-size: 24px;
    }
 }
@@ -1,5 +1,7 @@
+@use "mixins";
+
 .video {
-    @include container();
+    @include mixins.container();
    padding-top: 32px;
    padding-bottom: 32px;
 }
@@ -1,39 +1,39 @@
-@import "variables";
-@import "mixins";
-@import "breakpoints";
+@use "variables";
+@use "mixins";
+@use "breakpoints";

-@import "colors";
-@import "fonts";
+@use "colors";
+@use "fonts";

-@import "base";
-@import "buttons";
-@import "page-header";
-@import "page-footer";
-@import "layout";
-@import "sitenav";
-@import "helpernav";
-@import "mobilenav";
-@import "herounit";
-@import "carousel";
-@import "slider";
-@import "configurator";
-@import "statement";
-@import "testimonial";
-@import "brands";
-@import "iconbar";
-@import "tiles";
-@import "card";
-@import "box";
-@import "banner";
-@import "iconnav";
-@import "forms";
-@import "teasers";
-@import "badge";
-@import "team";
-@import "search";
-@import "offerlist";
-@import "paginator";
-@import "news";
-@import "datepicker";
-@import "cookiefirst";
-@import "video";
+@use "base";
+@use "buttons";
+@use "page-header";
+@use "page-footer";
+@use "layout";
+@use "sitenav";
+@use "helpernav";
+@use "mobilenav";
+@use "herounit";
+@use "carousel";
+@use "slider";
+@use "configurator";
+@use "statement";
+@use "testimonial";
+@use "brands";
+@use "iconbar";
+@use "tiles";
+@use "card";
+@use "box";
+@use "banner";
+@use "iconnav";
+@use "forms";
+@use "teasers";
+@use "badge";
+@use "team";
+@use "search";
+@use "offerlist";
+@use "paginator";
+@use "news";
+@use "datepicker";
+@use "cookiefirst";
+@use "video";
@@ -1,18 +1,14 @@
-@import "mixins";
-@import "colors";
+@use "mixins";
+@use "colors";

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
-  src: url('../fonts/cairo-v2-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Cairo'), local('Cairo-Regular'),
-  url('../fonts/cairo-v2-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('../fonts/cairo-v2-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-  url('../fonts/cairo-v2-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
-  url('../fonts/cairo-v2-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-  url('../fonts/cairo-v2-latin-ext_latin-regular.svg#Cairo') format('svg'); /* Legacy iOS */
+  url('../fonts/cairo-v2-latin-ext_latin-regular.woff2') format('woff2'),
+  url('../fonts/cairo-v2-latin-ext_latin-regular.woff') format('woff');
 }

@font-face {
@@ -20,13 +16,9 @@
  font-style: normal;
  font-weight: 700;
  font-display: swap;
-  src: url('../fonts/cairo-v2-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
  src: local('Cairo Bold'), local('Cairo-Bold'),
-  url('../fonts/cairo-v2-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('../fonts/cairo-v2-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
-  url('../fonts/cairo-v2-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
-  url('../fonts/cairo-v2-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
-  url('../fonts/cairo-v2-latin-ext_latin-700.svg#Cairo') format('svg'); /* Legacy iOS */
+  url('../fonts/cairo-v2-latin-ext_latin-700.woff2') format('woff2'),
+  url('../fonts/cairo-v2-latin-ext_latin-700.woff') format('woff');
 }

 $font-main: 'Cairo';
@@ -34,12 +26,8 @@ $font-main: 'Cairo';
@font-face {
  font-family: 'fontello';
  font-display: swap;
-  src: url('../fonts/fontello.eot?39986861');
-  src: url('../fonts/fontello.eot?39986861#iefix') format('embedded-opentype'),
-  url('../fonts/fontello.woff2?39986861') format('woff2'),
-  url('../fonts/fontello.woff?39986861') format('woff'),
-  url('../fonts/fontello.ttf?39986861') format('truetype'),
-  url('../fonts/fontello.svg?39986861#fontello') format('svg');
+  src: url('../fonts/fontello.woff2?39986861') format('woff2'),
+  url('../fonts/fontello.woff?39986861') format('woff');
  font-weight: normal;
  font-style: normal;
 }
@@ -123,7 +111,7 @@ ul {
      left: 0;
      content: "\25CF";
      font-size: 18px;
-      @include sectionColoursFromParent();
+      @include mixins.sectionColoursFromParent();
    }
  }
 }
@@ -141,8 +129,8 @@ p {
 hr {
  max-width: 25%;
  margin: 32px auto 32px 0;
-  color: $color-ruler;
-  background-color: $color-ruler;
+  color: colors.$color-ruler;
+  background-color: colors.$color-ruler;
  height: 1px;
  border: none;
 }
@@ -158,7 +146,7 @@ h3,
 }

 .headline {
-  @include sectionColoursFromParent();
+  @include mixins.sectionColoursFromParent();

  &--icon {
    display: flex;
@@ -192,9 +180,9 @@ h1,
    display: block;
    font-size: 16px;
    line-height: 120%;
-    color: $color-brand-primary;
+    color: colors.$color-brand-primary;
    text-transform: none;
-    @include sectionColoursFromParent();
+    @include mixins.sectionColoursFromParent();

    &--box {
      color: white;
@@ -229,7 +217,7 @@ h3 {

  &--default {
    display: inline-block;
-    background-color: $color-brand-primary;
+    background-color: colors.$color-brand-primary;
    color: white;
    padding: 4px 16px;
  }
@@ -237,7 +225,7 @@ h3 {
  &--page-header {
    display: block;
    min-width: 186px;
-    background-color: $color-brand-primary;
+    background-color: colors.$color-brand-primary;
    color: white;
    font-size: 18px;
    padding: 0 32px 0 24px;
@@ -250,8 +238,8 @@ h3 {
    display: block;
    min-width: 220px;
    text-align: center;
-    background-color: $color-brand-primary;
-    @include sectionBackgroundsFromParent();
+    background-color: colors.$color-brand-primary;
+    @include mixins.sectionBackgroundsFromParent();
    color: white;
    line-height: 48px;
    border: none;
@@ -271,7 +259,7 @@ h3 {

    &:hover {
      background: white;
-      color: $color-font-main;
+      color: colors.$color-font-main;
    }
  }

@@ -280,7 +268,7 @@ h3 {
  }

  &--icon {
-    background-color: $color-brand-primary;
+    background-color: colors.$color-brand-primary;
    color: white;
    width: 16px;
    height: 16px;
@@ -87,13 +87,17 @@ class SearchController extends ActionController

    public function initializeSearchresultAction()
    {
-        // Process encoded filtersettings from static search result
+        // Process encoded filtersettings from static search result.
+        // Explicit filter settings win: they carry the visitor's current selection,
+        // whereas a stale 'f' riding along on a link would silently replace it.
        $encodedFilterSettings = GeneralUtility::_GET('f');
-        if ($encodedFilterSettings) {
+        if ($encodedFilterSettings && !$this->request->hasArgument('filterSettings')) {
            $filterSettingsEncoder = new FilterSettingsEncoder();
            $filterSettings = $filterSettingsEncoder->decode($encodedFilterSettings);
+            if (count($filterSettings) > 0) {
                $this->request->setArgument('filterSettings', $filterSettings);
            }
+        }
        $forcedConceptUids = GeneralUtility::intExplode(',', $this->settings['forcedConceptUids'], true);
        $this->processFilterSettingsArgument($forcedConceptUids);
    }
@@ -30,12 +30,17 @@ namespace EP\EpProducts\Domain\Model;
 class Room
 {

+    const ROOM_TYPE_UNCLASSIFIED = 0;
    const ROOM_TYPE_FOR_ONE = 1;
    const ROOM_TYPE_FOR_TWO = 2;
    const ROOM_TYPE_FOR_THREE = 3;
    const ROOM_TYPE_FOR_FOUR = 4;
-    const ROOM_TYPE_WITH_OTHERS = 5;
-    const ROOM_TYPE_OTHER = 6;
+    const ROOM_TYPE_FOR_FIVE = 5;
+    const ROOM_TYPE_FOR_SIX = 6;
+    const ROOM_TYPE_FOR_SEVEN = 7;
+    const ROOM_TYPE_FOR_EIGHT = 8;
+    const ROOM_TYPE_FOR_NINE_PLUS = 9;
+    const ROOM_TYPE_WITH_OTHERS = 10;

    const ROOM_STATUS_AVAILABLE = 1;
    const ROOM_STATUS_ON_REQUEST = 2;
@@ -1,75 +0,0 @@
-<?php
-
-namespace EP\EpProducts\Domain\Model;
-
-/***************************************************************
- *
- *  Copyright notice
- *
- *  (c) 2016 Björn Fromme <[email protected]>, dreipunktnull
- *
- *  All rights reserved
- *
- *  This script is part of the TYPO3 project. The TYPO3 project is
- *  free software; you can redistribute it and/or modify
- *  it under the terms of the GNU General Public License as published by
- *  the Free Software Foundation; either version 3 of the License, or
- *  (at your option) any later version.
- *
- *  The GNU General Public License can be found at
- *  http://www.gnu.org/copyleft/gpl.html.
- *
- *  This script is distributed in the hope that it will be useful,
- *  but WITHOUT ANY WARRANTY; without even the implied warranty of
- *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- *  GNU General Public License for more details.
- *
- *  This copyright notice MUST APPEAR in all copies of the script!
- ***************************************************************/
-
-class RoomMapping extends \TYPO3\CMS\Extbase\DomainObject\AbstractEntity
-{
-
-    /**
-     * @var string
-     */
-    protected $code = '';
-
-    /**
-     * @var int
-     */
-    protected $type = 0;
-
-    /**
-     * @return string
-     */
-    public function getCode()
-    {
-        return $this->code;
-    }
-
-    /**
-     * @param string $code
-     */
-    public function setCode($code)
-    {
-        $this->code = $code;
-    }
-
-    /**
-     * @return int
-     */
-    public function getType()
-    {
-        return $this->type;
-    }
-
-    /**
-     * @param int $type
-     */
-    public function setType($type)
-    {
-        $this->type = $type;
-    }
-
-}
@@ -76,9 +76,11 @@ class ProductRepository extends AbstractRepository
                'date.services_included as servicesIncluded', 'date.skipass_included as skiPassIncluded',
                'date.bus_available as busAvailable', 'date.new as new',
                'date.min_price as minPrice', 'date.nights as nights', 'date.available as available',
-                'date.pseudo_price as pseudoPrice', 'date.hide_booking_button as hideBookingButton',
-                'room.type as roomType'
+                'date.pseudo_price as pseudoPrice', 'date.hide_booking_button as hideBookingButton'
            )
+            // The GROUP BY below collapses many room rows per group; an arbitrary
+            // room.type would hide most types from the filter facet.
+            ->addSelectLiteral('GROUP_CONCAT(DISTINCT room.type) as roomTypes')
            ->from('tx_epproducts_domain_model_date', 'date')
            ->leftJoin('date', 'tx_epproducts_domain_model_concept', 'con', 'date.concept = con.uid')
            ->leftJoin('date', 'tx_epproducts_domain_model_room', 'room', 'room.date = date.uid')
@@ -1,31 +0,0 @@
-<?php
-
-namespace EP\EpProducts\Domain\Repository;
-
-/***************************************************************
- *
- *  Copyright notice
- *
- *  (c) 2016 Björn Fromme <[email protected]>, dreipunktnull
- *
- *  All rights reserved
- *
- *  This script is part of the TYPO3 project. The TYPO3 project is
- *  free software; you can redistribute it and/or modify
- *  it under the terms of the GNU General Public License as published by
- *  the Free Software Foundation; either version 3 of the License, or
- *  (at your option) any later version.
- *
- *  The GNU General Public License can be found at
- *  http://www.gnu.org/copyleft/gpl.html.
- *
- *  This script is distributed in the hope that it will be useful,
- *  but WITHOUT ANY WARRANTY; without even the implied warranty of
- *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- *  GNU General Public License for more details.
- *
- *  This copyright notice MUST APPEAR in all copies of the script!
- ***************************************************************/
-
-class RoomMappingRepository extends AbstractRepository
-{}
@@ -0,0 +1,244 @@
+<?php
+
+namespace EP\EpProducts\EpTeam;
+
+use Psr\Log\LoggerAwareInterface;
+use Psr\Log\LoggerAwareTrait;
+use Symfony\Component\HttpClient\HttpClient;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Contracts\HttpClient\Exception\TransportExceptionInterface;
+use Symfony\Contracts\HttpClient\HttpClientInterface;
+use Symfony\Contracts\HttpClient\ResponseInterface;
+use TYPO3\CMS\Core\Configuration\ExtensionConfiguration;
+use TYPO3\CMS\Core\Utility\GeneralUtility;
+
+/**
+ * The MyE&P Team application (Symfony). Separate from EP\EpProducts\MyEP\ApiClient on purpose:
+ * this is a different application on its own host, authenticated with a shared key in a header
+ * instead of the OAuth client-credentials flow MyE&P uses, so it shares neither the base URI nor
+ * the token handling.
+ */
+class ApiClient implements LoggerAwareInterface
+{
+    use LoggerAwareTrait;
+
+    /**
+     * Applied when extension configuration does not override them. Seconds.
+     */
+    private const DEFAULT_TIMEOUT = 5;
+    private const DEFAULT_MAX_DURATION = 15;
+
+    /**
+     * Status codes the endpoint answers a stored submission with. A conflict is included for the
+     * dedupe the team application may add later - it is not returned today - because a
+     * double-clicked submit button is not something to report.
+     */
+    private const ACCEPTED_STATUS_CODES = [
+        Response::HTTP_OK,
+        Response::HTTP_CREATED,
+        Response::HTTP_ACCEPTED,
+        Response::HTTP_NO_CONTENT,
+        Response::HTTP_CONFLICT,
+    ];
+
+    /**
+     * How much of a rejected response is carried into the exception message. A 400 names the
+     * offending field in its body, which is the only way to tell from a log why a submission
+     * was refused.
+     */
+    private const ERROR_BODY_EXCERPT_LENGTH = 500;
+
+    /**
+     * Shared, like the MyE&P client: Symfony's CurlHttpClient keeps its connection pool and TLS
+     * session cache per instance. The API key is a constant, so unlike a bearer token it can be
+     * a client default header and the instance can live as long as the request.
+     */
+    private static ?HttpClientInterface $httpClient = null;
+
+    private ?array $configuration = null;
+
+    /**
+     * Posts a submitted TYPO3 form to POST /api/application-forms.
+     *
+     * @throws ApiException
+     */
+    public function submitApplicationForm(array $payload): void
+    {
+        $uri = 'api/application-forms';
+
+        // 'json' also sets the Content-Type the endpoint requires - without it the body is not
+        // read as JSON and the answer is a 400.
+        $response = $this->request('POST', $uri, [
+            'json' => $payload,
+        ]);
+
+        $statusCode = $this->readStatusCode($response, 'POST', $uri);
+
+        if (false === in_array($statusCode, self::ACCEPTED_STATUS_CODES, true)) {
+            $message = sprintf(
+                'EP Team API returned unexpected status %d for POST %s: %s',
+                $statusCode,
+                $uri,
+                $this->readErrorBody($response)
+            );
+            $this->logWarning($message);
+
+            throw new ApiException($message, $statusCode);
+        }
+
+        $this->logAcceptedSubmission($response, $payload);
+    }
+
+    /**
+     * @throws ApiException
+     */
+    private function request(string $method, string $uri, array $options): ResponseInterface
+    {
+        try {
+            return $this->getHttpClient()->request($method, $uri, $options);
+        } catch (TransportExceptionInterface $e) {
+            $message = sprintf('EP Team API transport error for %s %s: %s', $method, $uri, $e->getMessage());
+            $this->logError($message, ['exception' => $e]);
+
+            throw new ApiException($message, 0, $e);
+        }
+    }
+
+    /**
+     * Reading the status completes the transfer, so this is also what turns the lazy response
+     * returned by the client into a finished request.
+     *
+     * @throws ApiException
+     */
+    private function readStatusCode(ResponseInterface $response, string $method, string $uri): int
+    {
+        try {
+            return $response->getStatusCode();
+        } catch (TransportExceptionInterface $e) {
+            $message = sprintf('EP Team API transport error while reading status for %s %s: %s', $method, $uri, $e->getMessage());
+            $this->logError($message, ['exception' => $e]);
+
+            throw new ApiException($message, 0, $e);
+        }
+    }
+
+    private function readErrorBody(ResponseInterface $response): string
+    {
+        try {
+            $body = trim($response->getContent(false));
+        } catch (TransportExceptionInterface $e) {
+            return '<no response body>';
+        }
+
+        if ('' === $body) {
+            return '<empty response body>';
+        }
+
+        if (mb_strlen($body) > self::ERROR_BODY_EXCERPT_LENGTH) {
+            $body = mb_substr($body, 0, self::ERROR_BODY_EXCERPT_LENGTH) . '…';
+        }
+
+        return $body;
+    }
+
+    /**
+     * The submission uuid the endpoint returns is what makes a support question ("did our
+     * application arrive?") answerable from the TYPO3 log alone. Reading the body also drains
+     * the response, which returns the connection to the pool instead of cancelling the transfer.
+     * Deliberately without any of the submitted values: these payloads are personal data.
+     */
+    private function logAcceptedSubmission(ResponseInterface $response, array $payload): void
+    {
+        try {
+            $data = $response->toArray(false);
+        } catch (\Throwable $e) {
+            // A body that is absent (204) or not JSON costs nothing here - the submission is
+            // stored either way, which the asserted status has already established.
+            return;
+        }
+
+        if (null !== $this->logger) {
+            $this->logger->info('Application form submission accepted by the EP Team API.', [
+                'form' => $payload['form'] ?? null,
+                'pageUid' => $payload['pageUid'] ?? null,
+                'uuid' => $data['uuid'] ?? null,
+            ]);
+        }
+    }
+
+    /**
+     * @throws ApiException
+     */
+    private function getHttpClient(): HttpClientInterface
+    {
+        if (null !== static::$httpClient) {
+            return static::$httpClient;
+        }
+
+        $config = $this->getConfiguration();
+        $baseUrl = trim((string)($config['epTeamApiBaseUrl'] ?? ''));
+        $apiKey = trim((string)($config['epTeamApiKey'] ?? ''));
+
+        if ('' === $baseUrl) {
+            throw new ApiException('EP Team API base URL is not configured.');
+        }
+        if ('' === $apiKey) {
+            throw new ApiException('EP Team API key is not configured.');
+        }
+        if (0 !== strpos($baseUrl, 'https://')) {
+            // The application answers an http request with a 301 to the https URL, and this
+            // client does not follow redirects, so a plain http base URL fails every submission.
+            $this->logWarning(sprintf('EP Team API base URL is not https (%s); submissions will fail on the redirect.', $baseUrl));
+        }
+
+        $options = [
+            'headers' => [
+                'X-Api-Key' => $apiKey,
+            ],
+        ];
+
+        // Without these the client falls back to PHP's default_socket_timeout (commonly 60s),
+        // so a stalled API pins a PHP worker for a minute per request - and this call happens
+        // inside the visitor's form submission, with the visitor waiting for it. The defaults
+        // live in code rather than in ext_conf_template.txt: ExtensionConfiguration::get()
+        // returns the stored configuration verbatim and only syncs the template when an
+        // extension has no configuration at all, so a newly added template key is absent until
+        // someone saves extension configuration by hand. Falling back to 0 there would silently
+        // mean "no timeout" - the opposite of what this guard is for. An explicit 0 still
+        // disables.
+        $timeout = (int)($config['epTeamApiTimeout'] ?? self::DEFAULT_TIMEOUT);
+        if ($timeout > 0) {
+            $options['timeout'] = $timeout;
+        }
+        $maxDuration = (int)($config['epTeamApiMaxDuration'] ?? self::DEFAULT_MAX_DURATION);
+        if ($maxDuration > 0) {
+            $options['max_duration'] = $maxDuration;
+        }
+
+        return static::$httpClient = HttpClient::createForBaseUri(rtrim($baseUrl, '/') . '/', $options);
+    }
+
+    private function getConfiguration(): array
+    {
+        if (null === $this->configuration) {
+            $this->configuration = GeneralUtility::makeInstance(ExtensionConfiguration::class)
+                ->get('ep_products');
+        }
+
+        return $this->configuration;
+    }
+
+    private function logError(string $message, array $context = []): void
+    {
+        if (null !== $this->logger) {
+            $this->logger->error($message, $context);
+        }
+    }
+
+    private function logWarning(string $message, array $context = []): void
+    {
+        if (null !== $this->logger) {
+            $this->logger->warning($message, $context);
+        }
+    }
+}
@@ -0,0 +1,7 @@
+<?php
+
+namespace EP\EpProducts\EpTeam;
+
+class ApiException extends \RuntimeException
+{
+}
@@ -49,8 +49,22 @@ class ApiClient implements LoggerAwareInterface
     */
    private const ACCESS_TOKEN_DEFAULT_TTL = 300;

+    /**
+     * Status codes that mean the token was rejected rather than the request being wrong.
+     */
+    private const UNAUTHORIZED_STATUS_CODES = [Response::HTTP_UNAUTHORIZED, Response::HTTP_FORBIDDEN];
+
    private static ?AccessToken $accessToken = null;

+    /**
+     * Shared on purpose. Symfony's CurlHttpClient keeps its connection pool and TLS session
+     * cache in a CurlClientState owned by the instance, so building a client per call throws
+     * both away and forces a fresh DNS lookup, TCP connect and TLS handshake every time -
+     * TravelinfoController alone makes two calls per page render. The bearer token is passed
+     * per request rather than as a client default so one instance can outlive one token.
+     */
+    private static ?HttpClientInterface $httpClient = null;
+
    private ?FrontendInterface $cache = null;

    private ?array $configuration = null;
@@ -100,7 +114,10 @@ class ApiClient implements LoggerAwareInterface
            'json' => $addressData,
        ]);

-        $this->assertStatusCode($response, [Response::HTTP_OK, Response::HTTP_CREATED, Response::HTTP_ACCEPTED, Response::HTTP_NO_CONTENT], 'POST', 'contactform');
+        // A conflict means the address is already registered, which is the normal answer to a
+        // resubmitted contact form and not worth reporting.
+        $this->assertStatusCode($response, [Response::HTTP_OK, Response::HTTP_CREATED, Response::HTTP_ACCEPTED, Response::HTTP_NO_CONTENT, Response::HTTP_CONFLICT], 'POST', 'contactform');
+        $this->drainResponse($response);
    }

    /**
@@ -183,6 +200,30 @@ class ApiClient implements LoggerAwareInterface
     */
    private function request(string $method, string $uri, array $options = []): ResponseInterface
    {
+        $response = $this->sendRequest($method, $uri, $options);
+
+        if (false === in_array($this->readStatusCode($response, $method, $uri), self::UNAUTHORIZED_STATUS_CODES, true)) {
+            return $response;
+        }
+
+        // The token outlives a single PHP request, so one the API has stopped accepting - after
+        // a MyEP restart or a revoked client - would keep failing every call for the rest of its
+        // cached lifetime unless it is actively discarded here.
+        $this->logWarning(sprintf('MyEP API rejected the cached access token for %s %s, re-authenticating once', $method, $uri));
+        $this->discardAccessToken();
+
+        return $this->sendRequest($method, $uri, $options);
+    }
+
+    /**
+     * @throws ApiException
+     */
+    private function sendRequest(string $method, string $uri, array $options): ResponseInterface
+    {
+        // Resolved here rather than baked into the client's default options so that the shared
+        // client survives a token change, and so the retry above picks up the fresh token.
+        $options['auth_bearer'] = $this->getAccessToken($this->getConfiguration())->getToken();
+
        try {
            return $this->getHttpClient()->request($method, $uri, $options);
        } catch (TransportExceptionInterface $e) {
@@ -199,13 +240,7 @@ class ApiClient implements LoggerAwareInterface
     */
    private function assertStatusCode(ResponseInterface $response, array $expectedStatusCodes, string $method, string $uri): void
    {
-        try {
-            $statusCode = $response->getStatusCode();
-        } catch (TransportExceptionInterface $e) {
-            $message = sprintf('MyEP API transport error while reading status for %s %s: %s', $method, $uri, $e->getMessage());
-            $this->logError($message, ['exception' => $e]);
-            throw new ApiException($message, 0, $e);
-        }
+        $statusCode = $this->readStatusCode($response, $method, $uri);

        if (true === in_array($statusCode, $expectedStatusCodes, true)) {
            return;
@@ -217,6 +252,39 @@ class ApiClient implements LoggerAwareInterface
        throw new ApiException($message, $statusCode);
    }

+    /**
+     * Reading the status completes the transfer, so this is also what turns the lazy response
+     * returned by the client into a finished request. Symfony keeps the status on the response,
+     * so calling this twice costs nothing.
+     *
+     * @throws ApiException
+     */
+    private function readStatusCode(ResponseInterface $response, string $method, string $uri): int
+    {
+        try {
+            return $response->getStatusCode();
+        } catch (TransportExceptionInterface $e) {
+            $message = sprintf('MyEP API transport error while reading status for %s %s: %s', $method, $uri, $e->getMessage());
+            $this->logError($message, ['exception' => $e]);
+            throw new ApiException($message, 0, $e);
+        }
+    }
+
+    /**
+     * Reads and discards a body nobody else is going to look at. Destroying an unconsumed
+     * response cancels the transfer, which closes the connection instead of returning it to
+     * the pool, so the next call would have to handshake again.
+     */
+    private function drainResponse(ResponseInterface $response): void
+    {
+        try {
+            $response->getContent(false);
+        } catch (TransportExceptionInterface $e) {
+            // The status has already been asserted, so a failure here costs nothing but the
+            // connection reuse this method exists for.
+        }
+    }
+
    /**
     * @throws ApiException
     */
@@ -237,13 +305,13 @@ class ApiClient implements LoggerAwareInterface

    private function getHttpClient(): HttpClientInterface
    {
+        if (null !== static::$httpClient) {
+            return static::$httpClient;
+        }
+
        $config = $this->getConfiguration();

-        static::$accessToken = $this->getAccessToken($config);
-
-        $options = [
-            'auth_bearer' => static::$accessToken->getToken(),
-        ];
+        $options = [];

        // Without these the client falls back to PHP's default_socket_timeout (commonly 60s),
        // so a stalled API pins a PHP worker for a minute per request. The defaults live in
@@ -261,7 +329,7 @@ class ApiClient implements LoggerAwareInterface
            $options['max_duration'] = $maxDuration;
        }

-        return HttpClient::createForBaseUri($config['myEpApiBaseUrl'], $options);
+        return static::$httpClient = HttpClient::createForBaseUri($config['myEpApiBaseUrl'], $options);
    }

    /**
@@ -296,7 +364,7 @@ class ApiClient implements LoggerAwareInterface
     */
    private function getAccessToken(array $config): AccessToken
    {
-        if (null !== static::$accessToken && false === static::$accessToken->hasExpired()) {
+        if (true === $this->isTokenUsable(static::$accessToken)) {
            return static::$accessToken;
        }

@@ -305,7 +373,7 @@ class ApiClient implements LoggerAwareInterface
        $cachedToken = $this->getCache()->get(self::ACCESS_TOKEN_CACHE_IDENTIFIER);
        if (is_array($cachedToken) && isset($cachedToken['access_token'])) {
            $token = new AccessToken($cachedToken);
-            if (false === $token->hasExpired()) {
+            if (true === $this->isTokenUsable($token)) {
                static::$accessToken = $token;

                return static::$accessToken;
@@ -313,7 +381,7 @@ class ApiClient implements LoggerAwareInterface
        }

        try {
-            static::$accessToken = $this->getProvider($config)->getAccessToken('client_credentials');
+            static::$accessToken = $this->normalizeToken($this->getProvider($config)->getAccessToken('client_credentials'));
            $this->cacheAccessToken(static::$accessToken);
        } catch (IdentityProviderException $e) {
            $message = sprintf('MyEP OAuth token request failed: %s', $e->getMessage());
@@ -332,16 +400,53 @@ class ApiClient implements LoggerAwareInterface
        return static::$accessToken;
    }

-    private function cacheAccessToken(AccessToken $token): void
+    /**
+     * AccessToken::hasExpired() throws for a token that reports no expiry, so it cannot be used
+     * as the check - a token without one is simply treated as unusable and replaced. The same
+     * margin as the cache lifetime is applied on read as well, so a token cannot lapse between
+     * this check and the API call that uses it, whichever node wrote the cache entry.
+     */
+    private function isTokenUsable(?AccessToken $token): bool
    {
+        if (null === $token) {
+            return false;
+        }
+
        $expires = $token->getExpires();

        if (null === $expires) {
-            $lifetime = self::ACCESS_TOKEN_DEFAULT_TTL;
-        } else {
-            $lifetime = $expires - time() - self::ACCESS_TOKEN_EXPIRY_MARGIN;
+            return false;
        }

+        return $expires - self::ACCESS_TOKEN_EXPIRY_MARGIN > time();
+    }
+
+    /**
+     * A token that reports no expiry cannot be validated on read - isTokenUsable() rejects it
+     * and AccessToken::hasExpired() throws for it - so it is given the fallback lifetime here,
+     * once, and the rest of the class can treat every token the same way.
+     */
+    private function normalizeToken(AccessToken $token): AccessToken
+    {
+        if (null !== $token->getExpires()) {
+            return $token;
+        }
+
+        return new AccessToken($token->jsonSerialize() + ['expires_in' => self::ACCESS_TOKEN_DEFAULT_TTL]);
+    }
+
+    private function discardAccessToken(): void
+    {
+        static::$accessToken = null;
+        $this->getCache()->remove(self::ACCESS_TOKEN_CACHE_IDENTIFIER);
+    }
+
+    private function cacheAccessToken(AccessToken $token): void
+    {
+        // normalizeToken() has already given a token without a reported expiry the fallback
+        // lifetime, so there is always a real expiry to subtract the margin from here.
+        $lifetime = $token->getExpires() - time() - self::ACCESS_TOKEN_EXPIRY_MARGIN;
+
        if ($lifetime <= 0) {
            return;
        }
@@ -60,11 +60,6 @@ class DateImportService implements SingletonInterface, LoggerAwareInterface
     */
    protected $pid = 0;

-    /**
-     * @var array
-     */
-    protected $roomMappings = [];
-
    /**
     * @var array
     */
@@ -90,6 +85,11 @@ class DateImportService implements SingletonInterface, LoggerAwareInterface
     */
    protected $importSourceFactory;

+    /**
+     * @var RoomTypeResolver
+     */
+    protected $roomTypeResolver;
+
    /**
     * @var array
     */
@@ -101,15 +101,18 @@ class DateImportService implements SingletonInterface, LoggerAwareInterface
     * @param ConfigurationManagerInterface $configurationManager
     * @param CacheService $cacheService
     * @param ProductImportSourceFactory $importSourceFactory
+     * @param RoomTypeResolver $roomTypeResolver
     */
    public function __construct(
        ConfigurationManagerInterface $configurationManager,
        CacheService $cacheService,
-        ProductImportSourceFactory $importSourceFactory
+        ProductImportSourceFactory $importSourceFactory,
+        RoomTypeResolver $roomTypeResolver
    ) {
        $this->configurationManager = $configurationManager;
        $this->cacheService = $cacheService;
        $this->importSourceFactory = $importSourceFactory;
+        $this->roomTypeResolver = $roomTypeResolver;

        $settings = GeneralUtility::removeDotsFromTS(
            $this->configurationManager->getConfiguration(ConfigurationManagerInterface::CONFIGURATION_TYPE_FULL_TYPOSCRIPT)
@@ -130,7 +133,6 @@ class DateImportService implements SingletonInterface, LoggerAwareInterface
    public function import($path): int
    {
        $this->db = $this->getDbConnection();
-        $this->getRoomMappings();
        $this->getHotelMappings();
        $this->importPickups($path);
        $this->createTempTables();
@@ -594,13 +596,9 @@ class DateImportService implements SingletonInterface, LoggerAwareInterface
                continue;
            }

-            $roomTypeKey = mb_strtolower($code);
-            if (array_key_exists($roomTypeKey, $this->roomMappings)) {
-                $roomType = $this->roomMappings[$roomTypeKey];
-            } else {
-                $this->logger->warning('room type not found', ['code' => $code]);
-                continue;
-            }
+            $label = (string) $roomXml->attributes()['zimmertext'];
+            $roomMinPax = (int) $roomXml->attributes()['MinPax'];
+            $pax = (int) $roomXml->attributes()['MaxPax'];

            $available = (int) $roomXml->attributes()['verfuegbar'];
            $price = (int) $roomXml->attributes()['preis'];
@@ -610,12 +608,23 @@ class DateImportService implements SingletonInterface, LoggerAwareInterface
                continue;
            }

-            $pax = (int) $roomXml->attributes()['MinPax'];
-            if (0 === $minPax || $pax < $minPax) {
-                $minPax = $pax;
+            $roomType = $this->roomTypeResolver->resolve($code, $label, $pax, $roomMinPax);
+
+            if ($pax < 1 && $roomMinPax < 1) {
+                $this->logger->warning('room without occupancy', ['code' => $code, 'zimmertext' => $label]);
+            }
+
+            if ($this->roomTypeResolver->needsReview($code, $label, $pax)) {
+                $this->logger->warning(
+                    'single-occupancy room without single-use marker',
+                    ['code' => $code, 'zimmertext' => $label]
+                );
+            }
+
+            if (0 === $minPax || $roomMinPax < $minPax) {
+                $minPax = $roomMinPax;
            }

-            $pax = (int) $roomXml->attributes()['MaxPax'];
            $availableTotal += $available * $pax;

            // Determine lowest price of available rooms
@@ -648,7 +657,7 @@ class DateImportService implements SingletonInterface, LoggerAwareInterface
                'bus_pro_id' => (int) $roomXml->attributes()['idbuspro_zimmer'],
                'code' => $code,
                'type' => $roomType,
-                'name' => (string) $roomXml->attributes()['zimmertext'],
+                'name' => $label,
                'pax' => $pax,
                'nights' => (int) $roomXml->attributes()['naechte'],
                'price' => $price,
@@ -791,16 +800,6 @@ class DateImportService implements SingletonInterface, LoggerAwareInterface
        }
    }

-    protected function getRoomMappings(): void
-    {
-        $sql = 'SELECT code, type FROM tx_epproducts_domain_model_roommapping WHERE deleted = 0 AND hidden = 0';
-        $roomMappings = $this->db->fetchAllAssociative($sql);
-        foreach ($roomMappings as $mapping) {
-            $key = trim(mb_strtolower($mapping['code']));
-            $this->roomMappings[$key] = $mapping['type'];
-        }
-    }
-
    protected function getHotelMappings(): void
    {
        $sql = '
@@ -3,6 +3,7 @@
 namespace EP\EpProducts\Service;

 use EP\EpProducts\Domain\Model\Dto\FilterOptions;
+use EP\EpProducts\Domain\Model\Room;
 use EP\EpProducts\Domain\Model\SearchResult;
 use Symfony\Component\OptionsResolver\Options;
 use Symfony\Component\OptionsResolver\OptionsResolver;
@@ -212,6 +213,12 @@ class FilterService implements SingletonInterface
                    }
                }
                foreach ($item['rooms'] as $roomType) {
+                    // Type 0 is not a room (Baby) and must never become a filter option:
+                    // it has no label, so it would render as an empty checkbox and leave
+                    // a hole in the option list.
+                    if ((int) $roomType === Room::ROOM_TYPE_UNCLASSIFIED) {
+                        continue;
+                    }
                    if (!\in_array($roomType, $roomTypes, false)) {
                        $roomTypes[] = $roomType;
                    }
@@ -76,11 +76,28 @@ class FilterSettingsEncoder
        return implode('|', $encoded);
    }

+    /**
+     * Decodes an encoded filter settings string.
+     *
+     * The format is strictly positional, so a string whose field count does not
+     * match the mapping cannot be interpreted: every field after a missing one
+     * would be read into the wrong setting. Such input is rejected outright
+     * rather than silently producing a shifted - and therefore wrong - result.
+     *
+     * @param string $data
+     * @return array the decoded settings, or an empty array if $data is malformed
+     */
    public function decode(string $data): array
    {
-        $decoded = [];
+        $mapping = $this->getMapping();
        $values = explode('|', $data);
-        foreach ($this->getMapping() as $index => $property)
+
+        if (count($values) !== count($mapping)) {
+            return [];
+        }
+
+        $decoded = [];
+        foreach ($mapping as $index => $property)
        {
            [$name, $type] = $property;
            $value = $values[$index];
@@ -0,0 +1,129 @@
+<?php
+
+namespace EP\EpProducts\Service;
+
+/***************************************************************
+ *
+ *  Copyright notice
+ *
+ *  (c) 2016 Björn Fromme <[email protected]>, dreipunktnull
+ *
+ *  All rights reserved
+ *
+ *  This script is part of the TYPO3 project. The TYPO3 project is
+ *  free software; you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  The GNU General Public License can be found at
+ *  http://www.gnu.org/copyleft/gpl.html.
+ *
+ *  This script is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  This copyright notice MUST APPEAR in all copies of the script!
+ ***************************************************************/
+
+use EP\EpProducts\Domain\Model\Room;
+
+/**
+ * Derives the room type from the data each <preis> element carries.
+ *
+ * Replaces the former tx_epproducts_domain_model_roommapping lookup: zimmercode is
+ * neither unique per room nor a function of room type, so a code-keyed table cannot
+ * classify this data. MaxPax is the advertised occupancy and is present on every row.
+ */
+class RoomTypeResolver
+{
+    /**
+     * Phrases in zimmertext that mark a bed shared with other customers.
+     *
+     * @var array
+     */
+    const LABEL_PATTERNS_WITH_OTHERS = [
+        'bett im',
+        'mit ander',
+    ];
+
+    /**
+     * Phrases in zimmertext that mark a deliberate single use of a larger room.
+     *
+     * @var array
+     */
+    const LABEL_PATTERNS_SINGLE_USE = [
+        'einzel',
+        '1 person',
+    ];
+
+    /**
+     * @param string $code zimmercode
+     * @param string $label zimmertext
+     * @param int $maxPax MaxPax
+     * @param int $minPax MinPax
+     * @return int one of the Room::ROOM_TYPE_* constants
+     */
+    public function resolve(string $code, string $label, int $maxPax, int $minPax): int
+    {
+        // Not a room: "Babypreis für 0-2 Jährige". Kept in the date record for its
+        // price and availability, but hidden from the filter.
+        if ($code === DateImportService::CODE_BABYROOM) {
+            return Room::ROOM_TYPE_UNCLASSIFIED;
+        }
+
+        if ($this->matchesAny($label, static::LABEL_PATTERNS_WITH_OTHERS)) {
+            return Room::ROOM_TYPE_WITH_OTHERS;
+        }
+
+        $pax = $maxPax > 0 ? $maxPax : $minPax;
+
+        if ($pax >= 1) {
+            // Type numbering is chosen so that type === pax for pax 1-8.
+            return $pax >= 9 ? Room::ROOM_TYPE_FOR_NINE_PLUS : $pax;
+        }
+
+        // No usable occupancy - should never happen on current data, the caller logs it.
+        return Room::ROOM_TYPE_WITH_OTHERS;
+    }
+
+    /**
+     * Tripwire for an under-matching label pattern: a row classified as a single room
+     * whose label carries no single-use marker is most likely a shared bed phrased in
+     * a way LABEL_PATTERNS_WITH_OTHERS does not yet cover.
+     *
+     * @param string $code zimmercode
+     * @param string $label zimmertext
+     * @param int $maxPax MaxPax
+     * @return bool
+     */
+    public function needsReview(string $code, string $label, int $maxPax): bool
+    {
+        if ($this->resolve($code, $label, $maxPax, $maxPax) !== Room::ROOM_TYPE_FOR_ONE) {
+            return false;
+        }
+
+        if ($maxPax !== 1) {
+            return false;
+        }
+
+        return !$this->matchesAny($label, static::LABEL_PATTERNS_SINGLE_USE);
+    }
+
+    /**
+     * @param string $label
+     * @param array $patterns
+     * @return bool
+     */
+    protected function matchesAny(string $label, array $patterns): bool
+    {
+        foreach ($patterns as $pattern) {
+            if (mb_strpos(mb_strtolower($label), mb_strtolower($pattern)) !== false) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+}
@@ -31,6 +31,7 @@ use EP\EpProducts\Domain\Model\SearchResult;
 use EP\EpProducts\Domain\Repository\ProductRepository;
 use Symfony\Component\OptionsResolver\OptionsResolver;
 use TYPO3\CMS\Core\SingletonInterface;
+use TYPO3\CMS\Core\Utility\GeneralUtility;

 class SearchResultService implements SingletonInterface
 {
@@ -216,8 +217,10 @@ class SearchResultService implements SingletonInterface
                $item['filterMetadata']['boardTypes'][] = $boardType;
            }

-            if (isset($row['roomType']) && !\in_array($row['roomType'], $item['rooms'], false)) {
-                $item['rooms'][] = $row['roomType'];
+            foreach (GeneralUtility::trimExplode(',', (string) ($row['roomTypes'] ?? ''), true) as $roomType) {
+                if (!\in_array($roomType, $item['rooms'], false)) {
+                    $item['rooms'][] = $roomType;
+                }
            }

            if (!\in_array($row['nights'], $item['nights'], false)) {
@@ -33,7 +33,10 @@ use EP\EpProducts\Domain\Repository\RegionRepository;
 use EP\EpProducts\Domain\Repository\SnowreportRepository;
 use EP\EpProducts\Domain\Repository\WebcamRepository;
 use EP\EpProducts\Utility\SettingsUtility;
+use TYPO3\CMS\Core\Database\Connection;
 use TYPO3\CMS\Core\Database\ConnectionPool;
+use TYPO3\CMS\Core\Database\Query\Restriction\DeletedRestriction;
+use TYPO3\CMS\Core\Http\RequestFactory;
 use TYPO3\CMS\Core\SingletonInterface;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
 use TYPO3\CMS\Extbase\Persistence\PersistenceManagerInterface;
@@ -44,14 +47,34 @@ class SnowreportImportService implements SingletonInterface
    const XML_FILE_URL = 'https://www.skiresort-service.com/xml-feed/';

    /**
-     * @var array
+     * Connection and read timeout for the feed download, in seconds. A healthy response to this
+     * endpoint arrives in well under a second, so the ceiling is kept low enough that an outage on
+     * the vendor side fails visibly instead of stalling the scheduler task or the backend request.
     */
-    protected static $validSnowreportUids = [];
+    const HTTP_CONNECT_TIMEOUT = 5;
+    const HTTP_TIMEOUT = 30;

    /**
     * @var array
     */
-    protected static $validWebcamUids = [];
+    protected $validSnowreportUids = [];
+
+    /**
+     * @var array
+     */
+    protected $validWebcamUids = [];
+
+    /**
+     * Existing records keyed by vendor_uid, preloaded once per import to avoid a query per record.
+     *
+     * @var array
+     */
+    protected $snowreportIndex = [];
+
+    /**
+     * @var array
+     */
+    protected $webcamIndex = [];

    /**
     * @var \TYPO3\CMS\Extbase\Persistence\Generic\PersistenceManager
@@ -91,27 +114,62 @@ class SnowreportImportService implements SingletonInterface
        $this->regionRepository = $regionRepository;
    }

+    const TYPE_INT = 'int';
+    const TYPE_STRING = 'string';
+    const TYPE_BOOL = 'bool';
+    const TYPE_DATE = 'date';
+
    /**
+     * Declared schema of the vendor feed: XML element name => target column and its type.
+     *
+     * XML carries no type information - every element is a string - so the type of each field is
+     * declared here rather than guessed from the value. Values are converted strictly according to
+     * this table; anything unexpected is logged and falls back to the type's empty value instead of
+     * silently changing type.
+     *
     * @var array
     */
    protected static $map = [
-        'region_id'             => 'vendor_uid',
-        'region_name'           => 'region_name',
-        'region_offen'          => 'opened',
-        'gletschergebiet'       => 'glacier',
-        'schneehoehe_berg'      => 'snow_level_mountain',
-        'schneehoehe_tal'       => 'snow_level_valley',
-        'schneequalitaet'       => 'snow_quality',
-        'letzter_schneefall'    => 'last_snowfall',
-        'lifte_gesamt'          => 'lifts_total',
-        'offene_lifte'          => 'lifts_opened',
-        'letzte_aktualisierung' => 'last_update',
-        'hoehemax'              => 'height_max',
-        'hoehemin'              => 'height_min',
-        'datum_saisonstart'     => 'season_start',
-        'datum_saisonende'      => 'season_end',
+        'region_id'             => ['column' => 'vendor_uid',          'type' => self::TYPE_INT],
+        'region_name'           => ['column' => 'region_name',         'type' => self::TYPE_STRING],
+        'region_offen'          => ['column' => 'opened',              'type' => self::TYPE_BOOL],
+        'gletschergebiet'       => ['column' => 'glacier',             'type' => self::TYPE_BOOL],
+        'schneehoehe_berg'      => ['column' => 'snow_level_mountain', 'type' => self::TYPE_INT],
+        'schneehoehe_tal'       => ['column' => 'snow_level_valley',   'type' => self::TYPE_INT],
+        'schneequalitaet'       => ['column' => 'snow_quality',        'type' => self::TYPE_STRING],
+        'letzter_schneefall'    => ['column' => 'last_snowfall',       'type' => self::TYPE_DATE],
+        'lifte_gesamt'          => ['column' => 'lifts_total',         'type' => self::TYPE_INT],
+        'offene_lifte'          => ['column' => 'lifts_opened',        'type' => self::TYPE_INT],
+        'letzte_aktualisierung' => ['column' => 'last_update',         'type' => self::TYPE_DATE],
+        'hoehemax'              => ['column' => 'height_max',          'type' => self::TYPE_INT],
+        'hoehemin'              => ['column' => 'height_min',          'type' => self::TYPE_INT],
+        'datum_saisonstart'     => ['column' => 'season_start',        'type' => self::TYPE_DATE],
+        'datum_saisonende'      => ['column' => 'season_end',          'type' => self::TYPE_DATE],
    ];

+    /**
+     * Accepted boolean representations, lowercased.
+     *
+     * @var array
+     */
+    protected static $booleanMap = [
+        'true'  => true,
+        '1'     => true,
+        'ja'    => true,
+        'yes'   => true,
+        'false' => false,
+        '0'     => false,
+        'nein'  => false,
+        'no'    => false,
+    ];
+
+    /**
+     * Distinct conversion problems encountered during the current import.
+     *
+     * @var array
+     */
+    protected $conversionWarnings = [];
+
    /**
     * @return int
     */
@@ -119,39 +177,41 @@ class SnowreportImportService implements SingletonInterface
    {
        $count = 0;
        $file = GeneralUtility::getFileAbsFileName(self::XML_FILE_PATH);
-        $xmlContent = file_get_contents($file);
-        $xmlData = simplexml_load_string($xmlContent);
+
+        if (!is_file($file)) {
+            $this->writelog(sprintf('Snowreport XML import failed: file "%s" does not exist.', $file));
+
+            return 0;
+        }
+
+        try {
+            $xmlData = $this->parseReportsXml((string) file_get_contents($file));
+        } catch (\RuntimeException $e) {
+            $this->writelog(sprintf('Snowreport XML import failed: %s', $e->getMessage()));
+
+            return 0;
+        }
+
+        $this->resetImportState();
+        $this->buildIndexes();

        $snowReportStoragePid = $this->getStoragePid();

        foreach ($xmlData->schneemeldung as $reportXml)
        {
            $vendorUid = (int) $reportXml->region_id;
-            $result = $this->snowreportRepository->findByVendorUid($vendorUid);
-            if ($result->count() === 0) {
-                $snowreport = new Snowreport();
-                $this->snowreportRepository->add($snowreport);
-            } else {
-                $snowreport = $result->getFirst();
-            }
+            $snowreport = $this->getSnowreport($vendorUid);

            $row = [];
-            foreach (static::$map as $key => $column)
+            foreach (static::$map as $key => $field)
            {
-                $valueRaw = trim($reportXml->{$key});
-
-                if ($valueRaw === 'true') {
-                    $value = true;
-                } elseif ($valueRaw === 'false') {
-                    $value = false;
-                } elseif (preg_match('/^\d{4}\-\d{2}\-\d{2}$/', $valueRaw)) {
-                    $date = new \DateTime($valueRaw);
-                    $value = $date->getTimestamp();
-                } else {
-                    $value = (string) $valueRaw;
+                if (!isset($reportXml->{$key})) {
+                    $this->addConversionWarning(sprintf('Element <%s> missing in feed.', $key));
+                    $row[$field['column']] = $this->getEmptyValue($field['type']);
+                    continue;
                }

-                $row[$column] = $value;
+                $row[$field['column']] = $this->convertValue((string) $reportXml->{$key}, $field['type'], $key);
            }

            $snowreport->setPid($snowReportStoragePid);
@@ -175,23 +235,24 @@ class SnowreportImportService implements SingletonInterface
                $this->importWebcamData($reportXml->webcam, $snowreport);
            }

-            if ($snowreport->_isNew()) {
-                $this->persistenceManager->persistAll();
-            } else {
+            // New objects are already registered via add(); only managed ones need update().
+            if (!$snowreport->_isNew()) {
                $this->snowreportRepository->update($snowreport);
            }

-            static::$validSnowreportUids[] = $vendorUid;
+            $this->validSnowreportUids[] = $vendorUid;

            $count++;
        }

        $this->persistenceManager->persistAll();

-        $this->cleanupData('tx_epproducts_domain_model_webcam', static::$validWebcamUids);
-        $this->cleanupData('tx_epproducts_domain_model_snowreport', static::$validSnowreportUids);
+        $this->cleanupData('tx_epproducts_domain_model_webcam', $this->validWebcamUids);
+        $this->cleanupData('tx_epproducts_domain_model_snowreport', $this->validSnowreportUids);
+        $this->updateWebcamCounters();

-        $GLOBALS['BE_USER']->writelog(4, 0, 0, 0, sprintf('Snowreport XML import successful (%d records).', $count), []);
+        $this->logConversionWarnings();
+        $this->writelog(sprintf('Snowreport XML import successful (%d records).', $count));

        return $count;
    }
@@ -205,40 +266,52 @@ class SnowreportImportService implements SingletonInterface
        $snowReportStoragePid = $this->getStoragePid();
        foreach ($xml->children() as $item)
        {
-            $include = (string) $item->aktuell === 'true';
-            $available = (string) $item->verf === 'true';
+            $include = $this->convertValue((string) $item->aktuell, self::TYPE_BOOL, 'aktuell');
+            $available = $this->convertValue((string) $item->verf, self::TYPE_BOOL, 'verf');
            $vendorUid = (int) $item->uid;
-            $result = $this->webcamRepository->findByVendorUid($vendorUid);
-            // Skip invalid cams
-            if ($include === false && $result->count() === 0) {
+
+            $webcam = isset($this->webcamIndex[$vendorUid]) ? $this->webcamIndex[$vendorUid] : null;
+
+            // Skip cams that are neither current nor already known
+            if (null === $webcam && false === $include) {
                continue;
            }
+
            // Add new cam if not in db yet
-            if ($result->count() === 0) {
+            if (null === $webcam) {
                $webcam = new Webcam();
                $webcam->setVendorUid($vendorUid);
                $webcam->setPid($snowReportStoragePid);
-                $webcam->setUrl((string) $item->url);
-                $webcam->setName((string) $item->dt);
-                $webcam->setAvailable($available);
                $this->webcamRepository->add($webcam);
+                $this->webcamIndex[$vendorUid] = $webcam;
                $snowreport->addWebcam($webcam);
-            } else {
-                // Update cam in db and set availability
-                $webcam = $result->getFirst();
+            }
+
            $webcam->setUrl((string) $item->url);
            $webcam->setName((string) $item->dt);
            $webcam->setAvailable($available && $include);
-            }
-            static::$validWebcamUids[] = $vendorUid;
+
+            $this->validWebcamUids[] = $vendorUid;
        }
    }

+    /**
+     * Flags records that are no longer contained in the feed as deleted.
+     *
+     * @param string $table
+     * @param array $validUids
+     * @return int Number of records flagged
+     */
    public function cleanupData($table, array $validUids)
    {
        /** @var ConnectionPool $connectionPool */
        $connectionPool = GeneralUtility::makeInstance(ConnectionPool::class);
        $qb = $connectionPool->getQueryBuilderForTable($table);
+        // Hidden records are still managed by the import, only deleted ones are out of scope.
+        $qb->getRestrictions()
+            ->removeAll()
+            ->add(GeneralUtility::makeInstance(DeletedRestriction::class))
+        ;
        $result = $qb
            ->select('vendor_uid')
            ->from($table)
@@ -250,36 +323,293 @@ class SnowreportImportService implements SingletonInterface
            return (int)$row['vendor_uid'];
        }, $result);

-        $obsoleteUids = array_diff($currentUids, $validUids);
+        $obsoleteUids = array_values(array_diff($currentUids, $validUids));
        if (0 === count($obsoleteUids)) {
-            return;
+            return 0;
        }

        $qb = $connectionPool->getQueryBuilderForTable($table);
-        $qb
-            ->delete($table)
-            ->where($qb->expr()->in('vendor_uid', $obsoleteUids))
+
+        return (int) $qb
+            ->update($table)
+            ->set('deleted', 1)
+            ->set('tstamp', isset($GLOBALS['EXEC_TIME']) ? $GLOBALS['EXEC_TIME'] : time())
+            ->where(
+                $qb->expr()->in(
+                    'vendor_uid',
+                    $qb->createNamedParameter($obsoleteUids, Connection::PARAM_INT_ARRAY)
+                )
+            )
            ->execute()
        ;
    }

+    /**
+     * Recalculates the inline child counter on the snowreport records. Webcams are flagged as deleted
+     * with plain SQL, which bypasses the counter Extbase maintains for the relation.
+     */
+    protected function updateWebcamCounters()
+    {
+        $connection = GeneralUtility::makeInstance(ConnectionPool::class)
+            ->getConnectionForTable('tx_epproducts_domain_model_snowreport');
+
+        $connection->executeStatement(
+            'UPDATE tx_epproducts_domain_model_snowreport s SET s.webcams = ('
+            . ' SELECT COUNT(*) FROM tx_epproducts_domain_model_webcam w'
+            . ' WHERE w.snowreport = s.uid AND w.deleted = 0'
+            . ')'
+        );
+    }
+
+    /**
+     * Downloads the feed and replaces the local file only if the response is a usable XML document.
+     * The existing file is left untouched on any failure.
+     *
+     * @return bool
+     */
    public function downloadReportsXml()
    {
        $path = GeneralUtility::getFileAbsFileName(self::XML_FILE_PATH);
-        $backupPath = $path . '.bak';

-        @copy($path, $backupPath);
-        @unlink($path);
+        try {
+            $xmlContent = $this->fetchReportsXml();
+            $this->parseReportsXml($xmlContent);
+        } catch (\Exception $e) {
+            $this->writelog(sprintf(
+                'Snowreport XML download failed (%s). Keeping existing file.',
+                $e->getMessage()
+            ));

-        $url = self::XML_FILE_URL;
-        exec("wget -O {$path} {$url}", $output, $return);
-        if (!$return) {
-            @unlink($backupPath);
+            return false;
+        }
+
+        // Write to a temporary file first and move it into place, so the feed is either the old or the
+        // new document, never a partially written one.
+        $temporaryPath = $path . '.tmp';
+        if (false === file_put_contents($temporaryPath, $xmlContent) || !rename($temporaryPath, $path)) {
+            @unlink($temporaryPath);
+            $this->writelog(sprintf('Snowreport XML could not be written to "%s".', $path));
+
+            return false;
+        }
+
+        return true;
+    }
+
+    /**
+     * @return string
+     * @throws \RuntimeException
+     */
+    protected function fetchReportsXml()
+    {
+        /** @var RequestFactory $requestFactory */
+        $requestFactory = GeneralUtility::makeInstance(RequestFactory::class);
+
+        $response = $requestFactory->request(self::XML_FILE_URL, 'GET', [
+            'connect_timeout' => self::HTTP_CONNECT_TIMEOUT,
+            'timeout' => self::HTTP_TIMEOUT,
+            'headers' => [
+                'Accept' => 'application/xml, text/xml',
+            ],
+        ]);
+
+        if (200 !== $response->getStatusCode()) {
+            throw new \RuntimeException(
+                sprintf('unexpected status code %d', $response->getStatusCode()),
+                1758000001
+            );
+        }
+
+        return (string) $response->getBody();
+    }
+
+    /**
+     * Parses the feed and rejects documents that are unusable. Without this an empty or truncated
+     * response would be imported as an empty feed, and the cleanup would flag every record as deleted.
+     *
+     * @param string $xmlContent
+     * @return \SimpleXMLElement
+     * @throws \RuntimeException
+     */
+    protected function parseReportsXml($xmlContent)
+    {
+        if ('' === trim($xmlContent)) {
+            throw new \RuntimeException('response is empty', 1758000002);
+        }
+
+        $useInternalErrors = libxml_use_internal_errors(true);
+        libxml_clear_errors();
+        $xmlData = simplexml_load_string($xmlContent);
+        $errors = libxml_get_errors();
+        libxml_clear_errors();
+        libxml_use_internal_errors($useInternalErrors);
+
+        if (false === $xmlData) {
+            $message = count($errors) > 0 ? trim($errors[0]->message) : 'unknown error';
+            throw new \RuntimeException(sprintf('response is not valid XML (%s)', $message), 1758000003);
+        }
+
+        if (0 === $xmlData->schneemeldung->count()) {
+            throw new \RuntimeException('response contains no <schneemeldung> elements', 1758000004);
+        }
+
+        return $xmlData;
+    }
+
+    /**
+     * Loads existing records once, keyed by vendor_uid. Replaces a repository lookup per feed record.
+     */
+    protected function buildIndexes()
+    {
+        $this->snowreportIndex = [];
+        foreach ($this->snowreportRepository->findAll() as $snowreport) {
+            $this->snowreportIndex[(int) $snowreport->getVendorUid()] = $snowreport;
+        }
+
+        $this->webcamIndex = [];
+        foreach ($this->webcamRepository->findAll() as $webcam) {
+            $this->webcamIndex[(int) $webcam->getVendorUid()] = $webcam;
+        }
+    }
+
+    /**
+     * @param int $vendorUid
+     * @return Snowreport
+     */
+    protected function getSnowreport($vendorUid)
+    {
+        if (isset($this->snowreportIndex[$vendorUid])) {
+            return $this->snowreportIndex[$vendorUid];
+        }
+
+        $snowreport = new Snowreport();
+        $snowreport->setVendorUid($vendorUid);
+        $this->snowreportRepository->add($snowreport);
+        $this->snowreportIndex[$vendorUid] = $snowreport;
+
+        return $snowreport;
+    }
+
+    /**
+     * The service is a singleton, so per-import state must not survive into the next run.
+     */
+    protected function resetImportState()
+    {
+        $this->validSnowreportUids = [];
+        $this->validWebcamUids = [];
+        $this->conversionWarnings = [];
+    }
+
+    /**
+     * Converts a raw XML string to the declared type of the field.
+     *
+     * @param string $raw
+     * @param string $type
+     * @param string $key XML element name, for logging
+     * @return int|string|bool
+     */
+    protected function convertValue($raw, $type, $key)
+    {
+        $raw = trim($raw);
+
+        // The feed delivers empty elements for data that is not available yet (snow levels out of
+        // season, for example). That is expected, not an error.
+        if ($raw === '') {
+            return $this->getEmptyValue($type);
+        }
+
+        switch ($type) {
+            case self::TYPE_STRING:
+                return $raw;
+
+            case self::TYPE_INT:
+                if (!preg_match('/^-?\d+$/', $raw)) {
+                    $this->addConversionWarning(sprintf('<%s> expected an integer, got "%s".', $key, $raw));
+
+                    return 0;
+                }
+
+                return (int) $raw;
+
+            case self::TYPE_BOOL:
+                $normalized = strtolower($raw);
+                if (!array_key_exists($normalized, static::$booleanMap)) {
+                    $this->addConversionWarning(sprintf('<%s> expected a boolean, got "%s".', $key, $raw));
+
+                    return false;
+                }
+
+                return static::$booleanMap[$normalized];
+
+            case self::TYPE_DATE:
+                if (!preg_match('/^\d{4}-\d{2}-\d{2}([ T]\d{2}:\d{2}(:\d{2})?)?$/', $raw)) {
+                    $this->addConversionWarning(sprintf('<%s> expected a date, got "%s".', $key, $raw));
+
+                    return 0;
+                }
+
+                $date = new \DateTime($raw);
+
+                return $date->getTimestamp();
+        }
+
+        throw new \InvalidArgumentException(sprintf('Unknown field type "%s" declared for <%s>.', $type, $key), 1758000000);
+    }
+
+    /**
+     * @param string $type
+     * @return int|string|bool
+     */
+    protected function getEmptyValue($type)
+    {
+        if ($type === self::TYPE_STRING) {
+            return '';
+        }
+        if ($type === self::TYPE_BOOL) {
+            return false;
+        }
+
+        return 0;
+    }
+
+    /**
+     * @param string $message
+     */
+    protected function addConversionWarning($message)
+    {
+        // Keyed to keep one entry per distinct problem instead of one per record.
+        $this->conversionWarnings[$message] = true;
+    }
+
+    /**
+     * Writes a single summary entry to the log if the feed contained unexpected values.
+     */
+    protected function logConversionWarnings()
+    {
+        if (0 === count($this->conversionWarnings)) {
            return;
        }

-        $GLOBALS['BE_USER']->writelog(4, 0, 0, 0, 'Snowreport XML download failed. Keeping existing file.', []);
-        @rename($backupPath, $path);
+        $messages = array_keys($this->conversionWarnings);
+        $this->writelog(sprintf(
+            'Snowreport XML import: %d unexpected value(s) in feed: %s',
+            count($messages),
+            implode(' | ', array_slice($messages, 0, 10))
+        ));
+
+        $this->conversionWarnings = [];
+    }
+
+    /**
+     * The scheduler task and the backend module provide a backend user, the CLI command does not.
+     *
+     * @param string $message
+     */
+    protected function writelog($message)
+    {
+        if (isset($GLOBALS['BE_USER']) && is_object($GLOBALS['BE_USER'])) {
+            $GLOBALS['BE_USER']->writelog(4, 0, 0, 0, $message, []);
+        }
    }

    public function getStoragePid()
@@ -1,144 +0,0 @@
-<?php
-return [
-	'ctrl' => [
-		'title'	=> 'LLL:EXT:ep_products/Resources/Private/Language/locallang.xlf:tx_epproducts_domain_model_roommapping',
-		'label' => 'code',
-		'prependAtCopy' => '[COPY %s]',
-		'default_sortby' => 'ORDER BY code',
-		'tstamp' => 'tstamp',
-		'crdate' => 'crdate',
-		'cruser_id' => 'cruser_id',
-		'dividers2tabs' => true,
-		'versioningWS' => false,
-		'languageField' => 'sys_language_uid',
-		'transOrigPointerField' => 'l10n_parent',
-		'transOrigDiffSourceField' => 'l10n_diffsource',
-		'delete' => 'deleted',
-		'enablecolumns' => [
-			'disabled' => 'hidden',
-			'starttime' => 'starttime',
-			'endtime' => 'endtime',
-		],
-		'searchFields' => 'code',
-        'iconfile' => 'EXT:ep_theme/Resources/Public/images/icon_ce.svg',
-	],
-	'types' => [
-		'1' => ['showitem' => 'code, type'],
-	],
-	'palettes' => [
-		'1' => ['showitem' => ''],
-	],
-	'columns' => [
-
-		'sys_language_uid' => [
-			'exclude' => 0,
-			'label' => 'LLL:EXT:core/Resources/Private/Language/locallang_general.xlf:LGL.language',
-			'config' => [
-				'type' => 'select',
-				'default' => 0,
-				'renderType' => 'selectSingle',
-				'foreign_table' => 'sys_language',
-				'foreign_table_where' => 'ORDER BY sys_language.title',
-				'items' => [
-					['LLL:EXT:core/Resources/Private/Language/locallang_general.xlf:LGL.allLanguages', -1],
-					['LLL:EXT:core/Resources/Private/Language/locallang_general.xlf:LGL.default_value', 0]
-				],
-			],
-		],
-		'l10n_parent' => [
-			'displayCond' => 'FIELD:sys_language_uid:>:0',
-			'label' => 'LLL:EXT:core/Resources/Private/Language/locallang_general.xlf:LGL.l18n_parent',
-			'config' => [
-				'type' => 'select',
-				'default' => 0,
-				'renderType' => 'selectSingle',
-				'items' => [
-					['', 0],
-				],
-				'foreign_table' => 'tx_epproducts_domain_model_roommapping',
-				'foreign_table_where' => 'AND tx_epproducts_domain_model_roommapping.pid=###CURRENT_PID### AND tx_epproducts_domain_model_roommapping.sys_language_uid IN (-1,0)',
-			],
-		],
-		'l10n_diffsource' => [
-			'config' => [
-				'type' => 'passthrough',
-			],
-		],
-
-		't3ver_label' => [
-			'label' => 'LLL:EXT:core/Resources/Private/Language/locallang_general.xlf:LGL.versionLabel',
-			'config' => [
-				'type' => 'input',
-				'size' => 30,
-				'max' => 255,
-			]
-		],
-
-		'hidden' => [
-			'exclude' => 0,
-			'label' => 'LLL:EXT:core/Resources/Private/Language/locallang_general.xlf:LGL.hidden',
-			'config' => [
-				'type' => 'check',
-			],
-		],
-		'starttime' => [
-			'exclude' => 0,
-			'label' => 'LLL:EXT:core/Resources/Private/Language/locallang_general.xlf:LGL.starttime',
-			'config' => [
-				'type' => 'input',
-				'size' => 13,
-				'eval' => 'datetime',
-				'checkbox' => 0,
-				'default' => 0,
-                'behaviour' => [
-                    'allowLanguageSynchronization' => true,
-                ],
-                'renderType' => 'inputDateTime',
-			],
-		],
-		'endtime' => [
-			'exclude' => 0,
-			'label' => 'LLL:EXT:core/Resources/Private/Language/locallang_general.xlf:LGL.endtime',
-			'config' => [
-				'type' => 'input',
-				'size' => 13,
-				'eval' => 'datetime',
-				'checkbox' => 0,
-				'default' => 0,
-                'behaviour' => [
-                    'allowLanguageSynchronization' => true,
-                ],
-                'renderType' => 'inputDateTime',
-			],
-		],
-
-		'code' => [
-			'exclude' => 0,
-			'label' => 'Code',
-			'config' => [
-				'type' => 'input',
-				'size' => 30,
-				'eval' => 'trim'
-			],
-		],
-		'type' => [
-			'exclude' => 0,
-			'label' => 'Typ',
-			'config' => [
-				'type' => 'select',
-				'renderType' => 'selectSingle',
-				'items' => [
-					['Einzelzimmer', \EP\EpProducts\Domain\Model\Room::ROOM_TYPE_FOR_ONE],
-					['Doppelzimmer und Apartm. f. 2 Pers.', \EP\EpProducts\Domain\Model\Room::ROOM_TYPE_FOR_TWO],
-					['Zimmer und Apartm. f. 3 Pers.', \EP\EpProducts\Domain\Model\Room::ROOM_TYPE_FOR_THREE],
-					['Zimmer und Apartm. f. 4 Pers.', \EP\EpProducts\Domain\Model\Room::ROOM_TYPE_FOR_FOUR],
-					['Zimmer und Apartm. mit Anderen', \EP\EpProducts\Domain\Model\Room::ROOM_TYPE_WITH_OTHERS],
-					['weitere Zimmer und Apartments', \EP\EpProducts\Domain\Model\Room::ROOM_TYPE_OTHER],
-				],
-				'size' => 1,
-				'minItems' => 1,
-				'maxItems' => 1
-			],
-		],
-	],
-];
@@ -39,9 +39,6 @@
 			<trans-unit id="tx_epproducts_domain_model_teammember">
 				<source>Mitarbeiter/Teamer</source>
 			</trans-unit>
-			<trans-unit id="tx_epproducts_domain_model_roommapping">
-				<source>Zimmermapping</source>
-			</trans-unit>
 			<trans-unit id="tx_epproducts_domain_model_journey">
 				<source>Anreise</source>
 			</trans-unit>
@@ -40,6 +40,18 @@ bpnConnectApiTimeout = 5
 # cat=MyEpAPI; type=int; label=Bpn Connect API max total request duration in seconds (0 = unlimited)
 bpnConnectApiMaxDuration = 15

+# cat=EpTeamAPI; type=string; label=MyE&P Team base URL (https, e.g. https://team.ep-reisen.de) - receives application form submissions
+epTeamApiBaseUrl =
+
+# cat=EpTeamAPI; type=string; label=MyE&P Team application form API key (sent as X-Api-Key)
+epTeamApiKey =
+
+# cat=EpTeamAPI; type=int; label=MyE&P Team API inactivity timeout in seconds (0 = PHP default_socket_timeout)
+epTeamApiTimeout = 5
+
+# cat=EpTeamAPI; type=int; label=MyE&P Team API max total request duration in seconds (0 = unlimited)
+epTeamApiMaxDuration = 15
+
 # cat=SftpImport; type=options[Remote SFTP server=sftp,Local directory (fileadmin/xmlexport)=local]; label=Product/date import source
 productImportSource = sftp

@@ -494,47 +494,6 @@ CREATE TABLE tx_epproducts_domain_model_room
    KEY constraints (date, type)
 );

-#
-# Table structure for table 'tx_epproducts_domain_model_roommapping'
-#
-CREATE TABLE tx_epproducts_domain_model_roommapping
-(
-
-    uid              int(11)                         NOT NULL auto_increment,
-    pid              int(11)             DEFAULT '0' NOT NULL,
-
-    code             varchar(255)        DEFAULT ''  NOT NULL,
-    type             int(11)             DEFAULT '0' NOT NULL,
-
-    tstamp           int(11) unsigned    DEFAULT '0' NOT NULL,
-    crdate           int(11) unsigned    DEFAULT '0' NOT NULL,
-    cruser_id        int(11) unsigned    DEFAULT '0' NOT NULL,
-    deleted          tinyint(4) unsigned DEFAULT '0' NOT NULL,
-    hidden           tinyint(4) unsigned DEFAULT '0' NOT NULL,
-    starttime        int(11) unsigned    DEFAULT '0' NOT NULL,
-    endtime          int(11) unsigned    DEFAULT '0' NOT NULL,
-
-    t3ver_oid        int(11)             DEFAULT '0' NOT NULL,
-    t3ver_id         int(11)             DEFAULT '0' NOT NULL,
-    t3ver_wsid       int(11)             DEFAULT '0' NOT NULL,
-    t3ver_label      varchar(255)        DEFAULT ''  NOT NULL,
-    t3ver_state      tinyint(4)          DEFAULT '0' NOT NULL,
-    t3ver_stage      int(11)             DEFAULT '0' NOT NULL,
-    t3ver_count      int(11)             DEFAULT '0' NOT NULL,
-    t3ver_tstamp     int(11)             DEFAULT '0' NOT NULL,
-    t3ver_move_id    int(11)             DEFAULT '0' NOT NULL,
-
-    sys_language_uid int(11)             DEFAULT '0' NOT NULL,
-    l10n_parent      int(11)             DEFAULT '0' NOT NULL,
-    l10n_diffsource  mediumblob,
-
-    PRIMARY KEY (uid),
-    KEY parent (pid),
-    KEY t3ver_oid (t3ver_oid, t3ver_wsid),
-    KEY language (l10n_parent, sys_language_uid)
-
-);
-
 #
 # Table structure for table 'tx_epproducts_domain_model_concept'
 #
@@ -1098,6 +1057,7 @@ CREATE TABLE tx_epproducts_domain_model_snowreport

    PRIMARY KEY (uid),
    KEY parent (pid),
+    KEY vendor_uid (vendor_uid),
    KEY t3ver_oid (t3ver_oid, t3ver_wsid),
    KEY language (l10n_parent, sys_language_uid)

@@ -1142,6 +1102,7 @@ CREATE TABLE tx_epproducts_domain_model_webcam

    PRIMARY KEY (uid),
    KEY parent (pid),
+    KEY vendor_uid (vendor_uid),
    KEY t3ver_oid (t3ver_oid, t3ver_wsid),
    KEY language (l10n_parent, sys_language_uid)

@@ -4,25 +4,43 @@ namespace EP\EpTheme\Form;

 use TYPO3\CMS\Core\Log\LogManager;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
+use TYPO3\CMS\Extbase\Domain\Model\FileReference;
 use TYPO3\CMS\Form\Domain\Finishers\AbstractFinisher;

 abstract class AbstractMappedFinisher extends AbstractFinisher
 {
-    protected function buildPayload(): array
+    /**
+     * Resolves the 'mapping' option into remote name => local form element identifier.
+     */
+    protected function parseMapping(): array
    {
-        $values = [];
-        $formValues = $this->finisherContext->getFormValues();
+        $mappings = [];
        $mappingOption = (string)$this->parseOption('mapping');
-        $mappings = GeneralUtility::trimExplode(',', $mappingOption, true);

-        foreach ($mappings as $mapping) {
+        foreach (GeneralUtility::trimExplode(',', $mappingOption, true) as $mapping) {
            $parts = GeneralUtility::trimExplode(':', $mapping, true, 2);
            if (2 !== count($parts)) {
                continue;
            }

            [$remote, $local] = $parts;
-            if ('' === $remote || '' === $local || false === array_key_exists($local, $formValues)) {
+            if ('' === $remote || '' === $local) {
+                continue;
+            }
+
+            $mappings[$remote] = $local;
+        }
+
+        return $mappings;
+    }
+
+    protected function buildPayload(): array
+    {
+        $values = [];
+        $formValues = $this->finisherContext->getFormValues();
+
+        foreach ($this->parseMapping() as $remote => $local) {
+            if (false === array_key_exists($local, $formValues)) {
                continue;
            }

@@ -32,6 +50,95 @@ abstract class AbstractMappedFinisher extends AbstractFinisher
        return $values;
    }

+    /**
+     * Every submitted value that the mapping does not already cover, keyed by the element label
+     * as the editor sees it in the form editor. Forms built in the backend use generated
+     * identifiers (text-1, singleselect-2, ...) that carry no meaning and cannot be renamed
+     * without breaking existing finisher options, so the label is the only stable description
+     * of what was asked.
+     *
+     * The label is taken from the form definition, not through TranslationService: a translated
+     * label would change the payload keys with the site language, and these keys are stored.
+     */
+    protected function buildLabeledValues(): array
+    {
+        $formValues = $this->finisherContext->getFormValues();
+        $skip = array_merge(
+            array_values($this->parseMapping()),
+            GeneralUtility::trimExplode(',', (string)$this->parseOption('exclude'), true)
+        );
+
+        // Keyed by identifier in form order, and contains only real form elements - iterating
+        // this instead of the form values keeps the collection in the order of the form and
+        // leaves out anything that is not an element the visitor filled in.
+        $elements = $this->finisherContext->getFormRuntime()->getFormDefinition()->getElements();
+
+        $collected = [];
+        foreach ($elements as $identifier => $element) {
+            if (true === in_array($identifier, $skip, true) || false === array_key_exists($identifier, $formValues)) {
+                continue;
+            }
+
+            $value = $this->normalizeValue($formValues[$identifier], $identifier);
+            if (null === $value || '' === $value || [] === $value) {
+                continue;
+            }
+
+            $label = trim($element->getLabel());
+            if ('' === $label) {
+                $label = $identifier;
+            }
+            if (true === array_key_exists($label, $collected)) {
+                $label .= ' (' . $identifier . ')';
+            }
+
+            $collected[$label] = $value;
+        }
+
+        return $collected;
+    }
+
+    /**
+     * @param mixed $value
+     *
+     * @return mixed null when the value has no JSON representation
+     */
+    protected function normalizeValue($value, string $identifier)
+    {
+        if (true === is_array($value)) {
+            $normalized = [];
+            foreach ($value as $item) {
+                $item = $this->normalizeValue($item, $identifier);
+                if (null !== $item && '' !== $item) {
+                    $normalized[] = $item;
+                }
+            }
+
+            return $normalized;
+        }
+
+        if ($value instanceof \DateTimeInterface) {
+            return $value->format('Y-m-d');
+        }
+
+        if ($value instanceof FileReference) {
+            $resource = $value->getOriginalResource();
+
+            return null !== $resource ? $resource->getName() : null;
+        }
+
+        if (true === is_object($value)) {
+            $this->logWarning('Form value skipped while collecting labeled values: unsupported type.', [
+                'element' => $identifier,
+                'class' => get_class($value),
+            ]);
+
+            return null;
+        }
+
+        return $value;
+    }
+
    protected function logWarning(string $message, array $context = []): void
    {
        GeneralUtility::makeInstance(LogManager::class)
@@ -0,0 +1,83 @@
+<?php
+
+namespace EP\EpTheme\Form;
+
+use EP\EpProducts\EpTeam\ApiClient;
+use TYPO3\CMS\Core\Site\SiteFinder;
+use TYPO3\CMS\Core\Utility\GeneralUtility;
+
+class ApplicationApiFinisher extends AbstractMappedFinisher
+{
+    /**
+     * @var ApiClient
+     */
+    protected $apiClient;
+
+    /**
+     * @param ApiClient $apiClient
+     */
+    public function injectApiClient(ApiClient $apiClient)
+    {
+        $this->apiClient = $apiClient;
+    }
+
+    protected function executeInternal()
+    {
+        try {
+            $payload = $this->buildPayload();
+            if ([] === $payload) {
+                $this->logWarning('Application form API finisher skipped: the mapping produced no values.');
+
+                return;
+            }
+
+            $formDefinition = $this->finisherContext->getFormRuntime()->getFormDefinition();
+            $formLabel = trim($formDefinition->getLabel());
+
+            $payload['form'] = $formDefinition->getIdentifier();
+            // The name the editor gave the form, so the receiving side can label a submission
+            // without keeping a list of identifiers. Taken from the definition rather than
+            // through TranslationService: a translated label would differ per site language.
+            $payload['formLabel'] = '' !== $formLabel ? $formLabel : $formDefinition->getIdentifier();
+            $payload['submittedAt'] = (new \DateTimeImmutable())->format(\DateTimeInterface::ATOM);
+            $payload = array_merge($payload, $this->resolvePageContext());
+            $payload['details'] = $this->buildLabeledValues();
+
+            $this->apiClient->submitApplicationForm($payload);
+        } catch (\Throwable $e) {
+            $this->logWarning('Application form API finisher request failed.', [
+                'exception' => $e,
+            ]);
+        }
+    }
+
+    /**
+     * The page the form was submitted from. The URL is generated through the site router in the
+     * visitor's language, the same way AddReferrerFinisher does it, so it is the page's canonical
+     * URL rather than the submit request with its form arguments attached.
+     */
+    private function resolvePageContext(): array
+    {
+        if (false === isset($GLOBALS['TSFE']) || 0 === (int)$GLOBALS['TSFE']->id) {
+            return [];
+        }
+
+        $pageUid = (int)$GLOBALS['TSFE']->id;
+        $context = ['pageUid' => $pageUid];
+
+        try {
+            $site = GeneralUtility::makeInstance(SiteFinder::class)->getSiteByPageId($pageUid);
+            $context['pageUrl'] = (string)$site->getRouter()->generateUri($pageUid, [
+                '_language' => $GLOBALS['TSFE']->getLanguage(),
+            ]);
+        } catch (\Throwable $e) {
+            // An unroutable page must not cost the submission, so the uid is sent without a URL.
+            $this->logWarning('Application form API finisher could not resolve the page URL.', [
+                'pageUid' => $pageUid,
+                'exception' => $e,
+            ]);
+        }
+
+        return $context;
+    }
+}
@@ -1,49 +0,0 @@
-<?php
-
-namespace EP\EpTheme\ViewHelpers;
-
-use TYPO3\CMS\Core\Utility\GeneralUtility;
-use TYPO3\CMS\Fluid\ViewHelpers\ImageViewHelper;
-
-class LazyLoadImageViewHelper extends ImageViewHelper
-{
-    public function initializeArguments()
-    {
-        parent::initializeArguments();
-        $this->registerArgument('loaderimg', 'string', '', false);
-    }
-
-    public function render(): string
-    {
-        parent::render();
-
-        $src = $this->tag->getAttribute('src');
-        $this->tag->removeAttribute('src');
-        $this->tag->addAttribute('data', ['src' => $src], false);
-
-        if (isset($this->arguments['loaderimg'])) {
-            $loaderImage = $this->imageService->getImage($this->arguments['loaderimg'], null, false);
-            $processingInstructions = [
-                'width' => $this->arguments['width'],
-                'height' => $this->arguments['height'],
-                'minWidth' => $this->arguments['minWidth'],
-                'minHeight' => $this->arguments['minHeight'],
-                'maxWidth' => $this->arguments['maxWidth'],
-                'maxHeight' => $this->arguments['maxHeight'],
-            ];
-            $processedLoaderImage = $this->imageService->applyProcessingInstructions($loaderImage, $processingInstructions);
-            $loaderImageUri = $this->imageService->getImageUri($processedLoaderImage, $this->arguments['absolute']);
-            $this->tag->addAttribute('src', $loaderImageUri);
-        }
-
-        $classes = $this->tag->getAttribute('class');
-        $classItems = GeneralUtility::trimExplode(' ', $classes, true);
-        $classItems[] = 'lazyload';
-        $classes = implode(' ', array_unique($classItems));
-        $this->tag->addAttribute('class', $classes);
-        // ensure a11y compliance
-        $this->tag->removeAttribute('title');
-
-        return $this->tag->render();
-    }
-}
@@ -17,5 +17,8 @@ plugin.tx_epproducts {
        ratingWidgetLabel = {$plugin.tx_eptheme.settings.ratingWidgetLabel}
        skipassPageUid = {$plugin.tx_eptheme.settings.skipassPageUid}
        conceptsPageUid = {$plugin.tx_eptheme.settings.conceptsPageUid}
+        mapTileUrl = {$plugin.tx_eptheme.settings.mapTileUrl}
+        mapApiKey = {$plugin.tx_eptheme.settings.mapApiKey}
+        mapAttribution = {$plugin.tx_eptheme.settings.mapAttribution}
    }
 }
@@ -7,5 +7,8 @@ lib.contentElement {
    settings < plugin.tx_eptheme.settings
    settings.themekey = {$plugin.tx_eptheme.settings.themekey}
    settings.defaultAjaxUid = {$plugin.tx_eptheme.settings.defaultAjaxUid}
+    settings.mapTileUrl = {$plugin.tx_eptheme.settings.mapTileUrl}
+    settings.mapApiKey = {$plugin.tx_eptheme.settings.mapApiKey}
+    settings.mapAttribution = {$plugin.tx_eptheme.settings.mapAttribution}
 }

@@ -1,10 +1,20 @@
 config.tx_replacer {
    enable_regex = 1
+
+    # The quote character is captured rather than matched literally, because the
+    # @font-face block in Page/Main.typoscript writes its url() values with single
+    # quotes - anchoring on `"` alone would skip every font.
+    # typo3conf is scoped to ep_theme/Resources/Public on purpose: it keeps other
+    # extensions, Configuration/ and Resources/Private/ out of the CDN.
+    # The icon sprite is excluded: SVG <use href="...#icon"> may only reference a
+    # document from the same origin - browsers block an external sprite on the CDN
+    # host outright, and no CORS header on bunny.net changes that. It has to stay
+    # on the origin domain or every icon renders empty.
    search {
-        10 = /"\/?(fileadmin|typo3temp|uploads)/
+        10 = /(["'])\/?(fileadmin|typo3temp|uploads|typo3conf\/ext\/ep_theme\/Resources\/Public(?!\/images\/icons_sprite\.svg))/
    }

    replace {
-        10 = "https://cdn.ep-reisen.de/$1
+        10 = $1https://cdn.ep-reisen.de/$2
    }
 }
@@ -5,5 +5,6 @@ plugin.tx_typo3encore {
        builds {
            EpThemeConfig = EXT:ep_theme/Resources/Public
        }
+        preload.enable = 0
    }
 }
@@ -75,6 +75,13 @@ plugin.tx_eptheme {
 		# cat=eptheme/200/350; type=string; label='Corona Updates' page UID
 		coronaUpdatesPageUid =

+		# cat=eptheme/500/100; type=string; label=Map tile URL template (without apiKey)
+		mapTileUrl = https://api-eu.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}.png
+		# cat=eptheme/500/110; type=string; label=Map tile API key (Geoapify), restricted by referrer
+		mapApiKey =
+		# cat=eptheme/500/120; type=string; label=Map attribution (Geoapify and OpenStreetMap credits are both required)
+		mapAttribution = Powered by <a href="https://www.geoapify.com/">Geoapify</a> | &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors
+
 		# cat=eptheme/400/100; type=string; label=Phone number general
 		phoneNumber = 0221 - 272 276 0
 		# cat=eptheme/400/110; type=string; label=Phone number WhatsApp
@@ -23,6 +23,8 @@ TYPO3:
          finishersDefinition:
            BpnApiFinisher:
              implementationClassName: 'EP\EpTheme\Form\BpnApiFinisher'
+            ApplicationApiFinisher:
+              implementationClassName: 'EP\EpTheme\Form\ApplicationApiFinisher'
            WebhookFinisher:
              implementationClassName: 'EP\EpTheme\Form\WebhookFinisher'
            AddReferrerFinisher:
@@ -12,6 +12,9 @@ TYPO3:
                      1000:
                        value: 'BpnApiFinisher'
                        label: 'BusPro Finisher'
+                      1010:
+                        value: 'ApplicationApiFinisher'
+                        label: 'Application Finisher'
                      1050:
                        value: 'WebhookFinisher'
                        label: 'Webhook Finisher'
@@ -34,6 +37,25 @@ TYPO3:
                          propertyPath: 'options.mapping'
                          propertyValidators:
                            10: 'NotEmpty'
+                    1010:
+                      identifier: 'ApplicationApiFinisher'
+                      editors:
+                        __inheritances:
+                          10: 'TYPO3.CMS.Form.mixins.formElementMixins.BaseCollectionEditorsMixin'
+                        100:
+                          label: 'Application Finisher'
+                        110:
+                          identifier: 'mapping'
+                          templateName: 'Inspector-TextEditor'
+                          label: 'Mapping'
+                          propertyPath: 'options.mapping'
+                          propertyValidators:
+                            10: 'NotEmpty'
+                        120:
+                          identifier: 'exclude'
+                          templateName: 'Inspector-TextEditor'
+                          label: 'Exclude'
+                          propertyPath: 'options.exclude'
                    1050:
                      identifier: 'WebhookFinisher'
                      editors:
@@ -70,6 +92,13 @@ TYPO3:
                predefinedDefaults:
                  options:
                    mapping: 'lastName:text-1,firstName:text-2,gender:singleselect-1,email:email-1,phone:telephone-1'
+            ApplicationApiFinisher:
+              formEditor:
+                iconIdentifier: 'form-finisher'
+                predefinedDefaults:
+                  options:
+                    mapping: 'firstName:text-1,lastName:text-2,email:email-1,phone:telephone-1'
+                    exclude: 'captcha,privacypolicyaccepted'
            WebhookFinisher:
              formEditor:
                iconIdentifier: 'form-finisher'
@@ -11,6 +11,14 @@ TYPO3:
                options:
                  identifier: 'BpnApiFinisher'
                  mapping: 'lastName:text-1,firstName:text-2,gender:singleselect-1,email:email-1,phone:telephone-1'
+            ApplicationApiFinisher:
+              implementationClassName: 'EP\EpTheme\Form\ApplicationApiFinisher'
+              formEditor:
+                label: 'Application Finisher'
+                options:
+                  identifier: 'ApplicationApiFinisher'
+                  mapping: 'firstName:text-1,lastName:text-2,email:email-1,phone:telephone-1'
+                  exclude: 'captcha,privacypolicyaccepted'
            WebhookFinisher:
              implementationClassName: 'EP\EpTheme\Form\WebhookFinisher'
              formEditor:
@@ -1,8 +1,3 @@
-// Import dependencies
-require('lazysizes')
-require('lazysizes/plugins/unveilhooks/ls.unveilhooks')
-// require('picturefill')
-
 // Polyfills
 // import smoothscroll from 'smoothscroll-polyfill'
 // smoothscroll.polyfill()
@@ -1,791 +0,0 @@
-<template>
-    <div class="relative">
-        <div class="mb-8"
-             v-show="!submitted">
-            <label class="mb-2 font-bold">
-                Zeitraum
-            </label>
-            <input type="text"
-                   class="form-field"
-                   placeholder="von... bis" ref="picker"/>
-            <p class="text-sm mt-2" v-if="mainSeasonFrom && mainSeasonTo">
-                in der Hauptsaison {{ mainSeasonFrom }}-{{ mainSeasonTo }} mind. {{ minBookingDays }} Tage
-            </p>
-            <p class="text-sm italic mt-2"
-               v-show="nightsCount === 1">
-                Einzelne Nächte sind nur auf Anfrage buchbar
-            </p>
-        </div>
-        <div class="mb-8 grid sm:grid-cols-2 gap-8"
-             v-show="!submitted">
-            <div>
-                <label class="mb-2 font-bold">
-                    Personenzahl
-                </label>
-                <input type="number"
-                       class="form-field"
-                       min="30"
-                       v-model.number="selectedPax"
-                       @change="onPaxUpdated()"
-                       v-show="nightsCount > 0"/>
-                <p class="text-sm italic"
-                   v-show="nightsCount === 0">
-                    Bitte zuerst einen Zeitraum wählen
-                </p>
-            </div>
-            <div>
-                <label class="mb-2 font-bold">
-                    davon Kinder 0-3 Jahre
-                </label>
-                <input type="number"
-                       class="form-field"
-                       min="0"
-                       v-model.number="childrenCount"
-                       @change="onPaxUpdated()"
-                       v-show="nightsCount > 0"/>
-                <p class="text-sm italic"
-                   v-show="nightsCount === 0">
-                    Bitte zuerst einen Zeitraum wählen
-                </p>
-                <p class="text-sm italic"
-                   v-show="nightsCount > 0">
-                    Kinder werden nur bei Strom- und Abfallgebühren berücksichtigt.
-                </p>
-            </div>
-            <div>
-                <label class="mb-2 font-bold">
-                    davon Kinder 4-5 Jahre*
-                </label>
-                <input type="number"
-                       class="form-field"
-                       min="0"
-                       v-model.number="minorsCount"
-                       @change="onPaxUpdated()"
-                       v-show="nightsCount > 0"/>
-                <p class="text-sm italic"
-                   v-show="nightsCount === 0">
-                    Bitte zuerst einen Zeitraum wählen
-                </p>
-            </div>
-            <div v-if="adolescentsAge > 0">
-                <label class="mb-2 font-bold">
-                    davon Kinder 6-{{ adolescentsAge }} Jahre*
-                </label>
-                <input type="number"
-                       class="form-field"
-                       min="0"
-                       v-model.number="adolescentsCount"
-                       @change="onPaxUpdated()"
-                       v-show="nightsCount > 0"/>
-                <p class="text-sm italic"
-                   v-show="nightsCount === 0">
-                    Bitte zuerst einen Zeitraum wählen
-                </p>
-            </div>
-            <div class="sm:col-span-2 text-sm">
-                *Die Kosten für Essen und Kurtaxe werden wir entsprechend der Altersstruktur der Gäste in der Rechnung
-                anpassen.
-            </div>
-        </div>
-        <div class="mb-8"
-             v-show="options.length > 0 && !submitted">
-            <div class="mb-2 font-bold">
-                Optionale Zusatzleistungen
-            </div>
-            <ul class="mb-0 p-0 space-y-2">
-                <li v-for="option of options" :key="option.uid">
-                    <label class="flex items-start">
-                        <input type="checkbox"
-                               class="w-5 h-5 border-ep-primary-light ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
-                               v-model="selectedOptions"
-                               :value="option">
-                        <span class="pl-2 leading-none">{{ option.title }}{{ formatOptionPriceType(option) }}</span>
-                    </label>
-                </li>
-            </ul>
-        </div>
-        <div class="mb-8"
-             v-show="boards.length > 0 && !submitted">
-            <label class="mb-2 font-bold">
-                Verpflegungsleistungen
-            </label>
-            <select class="form-field"
-                    v-model="selectedBoard"
-                    v-if="selectedPax >= 30">
-                <option :value="null" disabled>bitte auswählen</option>
-                <option v-for="board of boards"
-                        :value="board"
-                        :key="board.uid">
-                    {{ board.title }} ({{ formatCurrency(board.price) }} pro Person und Nacht)
-                </option>
-            </select>
-            <div class="text-sm text-red-600 mt-1"
-                 v-show="formErrors.board"
-                 v-html="formErrors.board"></div>
-            <div v-show="selectedPax < 30">
-                <span class="text-red-600">Erst ab 30 Personen buchbar.</span>
-            </div>
-        </div>
-        <div class="mb-8">
-            <div class="pb-2" v-if="submitted">
-                <p class="text-lg font-bold pb-2">
-                    Vielen Dank für Deine {{ mode === 'booking' ? 'Buchung' : 'Anfrage' }}.
-                </p>
-                <p>
-                    Für folgendes habt ihr euch entschieden:
-                </p>
-            </div>
-            <div class="p-2 uppercase bg-ep-primary-dark text-white w-full">
-                Preise
-            </div>
-            <div class="bg-zinc-100 p-2 mb-2">
-                <table class="w-full" v-show="nightsCount > 0">
-                    <tbody>
-                    <tr class="odd:bg-zinc-100">
-                        <th class="text-left py-2">Zeitraum</th>
-                        <td>{{ rangeFormatted }}, {{ nightsCount }} Nächte</td>
-                    </tr>
-                    <tr class="odd:bg-zinc-100">
-                        <th class="text-left py-2">Personenzahl</th>
-                        <td>
-                            {{ selectedPax }}<span v-if="childrenCount > 0">, davon Kinder {{ childrenCount }}</span>
-                        </td>
-                    </tr>
-                    <tr class="odd:bg-zinc-100">
-                        <th class="text-left py-2">Basispreis</th>
-                        <td>{{ formatCurrency(pricePax.base) }}</td>
-                    </tr>
-                    <tr class="odd:bg-zinc-100"
-                        v-if="pricePax.additional.EUR > 0 || pricePax.additional.CHF > 0">
-                        <th class="text-left py-2">Aufpreis Personenzahl</th>
-                        <td>{{ formatCurrency(pricePax.additional) }}</td>
-                    </tr>
-                    <tr class="odd:bg-zinc-100"
-                        v-if="priceShortTerm.EUR > 0 || priceShortTerm.CHF > 0">
-                        <th class="text-left py-2">Aufpreis Kurzzeit</th>
-                        <td>{{ formatCurrency(priceShortTerm) }}</td>
-                    </tr>
-                    <tr class="odd:bg-zinc-100"
-                        v-for="selectedOption in selectedOptions">
-                        <th class="text-left py-2">{{ selectedOption.title }}</th>
-                        <td>{{ formatCurrency(calculateOptionPrice(selectedOption)) }}</td>
-                    </tr>
-                    <tr class="odd:bg-zinc-100"
-                        v-if="priceBoard.EUR > 0 || priceBoard.CHF > 0">
-                        <th class="text-left  py-2">{{ selectedBoard.title }}</th>
-                        <td>{{ formatCurrency(priceBoard) }}</td>
-                    </tr>
-                    <tr class="odd:bg-zinc-100"
-                        v-if="false === isSelfCatering && undersubscriptionLimit > 0">
-                        <th class="text-left py-2">Verpflegungs-Aufschlag für Gruppen unter {{ undersubscriptionLimit }} Personen</th>
-                        <td>{{ formatCurrency(pricePax.undersubscription) }}</td>
-                    </tr>
-                    <tr class="odd:bg-zinc-100"
-                        v-if="priceRunningCosts.EUR > 0 || priceRunningCosts.CHF > 0">
-                        <th class="text-left py-2">Strom- und Abfallgebühren</th>
-                        <td>{{ formatCurrency(priceRunningCosts) }}</td>
-                    </tr>
-                    <tr class="odd:bg-zinc-100">
-                        <th class="text-left py-2">Gesamtpreis</th>
-                        <td>
-                            <strong>{{ formatCurrency(priceTotal) }}</strong>
-                            <br>
-                            <small>{{ taxLabel }}</small>
-                        </td>
-                    </tr>
-                    </tbody>
-                </table>
-                <p class="text-sm italic"
-                   v-show="nightsCount === 0">
-                    Bitte zuerst einen Zeitraum wählen
-                </p>
-            </div>
-            <div v-if="mode === 'booking' && submitted">
-                Bitte beachtet, dass die Buchung bei uns eingegangen, aber <strong>noch nicht bestätigt</strong> ist.
-                Wir behalten uns vor, die Buchungen auf Verfügbarkeit und Länge des gewünschten Aufenthalts zu prüfen.
-                Erst wenn wir euch die Buchung per Mail bestätigt haben, wird sie bindend.
-            </div>
-            <div v-if="mode === 'inquiry' && submitted">
-                Die Anfrage ist bei uns eingegangen und wird schnellstmöglich bearbeitet. Wir melden uns telefonisch
-                oder per Mail bei euch.
-            </div>
-        </div>
-        <div class="mb-8"
-             v-show="nightsCount > 0 && !submitted">
-            <div class="p-2 uppercase bg-ep-primary-dark text-white w-full">
-                Jetzt <span v-if="!forceInquiry">buchen</span><span v-if="forceInquiry">anfragen</span>
-            </div>
-            <div class="bg-zinc-100 p-2">
-                <div class="grid md:grid-cols-2 gap-4 mb-4">
-                    <div :class="{ 'has-error': formErrors.name }">
-                        <label class="font-bold mb-2">
-                            Name*
-                        </label>
-                        <input type="text"
-                               class="form-field"
-                               v-model="name">
-                        <div class="text-sm text-red-600 mt-1"
-                             v-show="formErrors.name"
-                             v-html="formErrors.name"></div>
-                    </div>
-                    <div :class="{ 'has-error': formErrors.street }">
-                        <label class="font-bold mb-2">
-                            Strasse, Nr.*
-                        </label>
-                        <input type="text"
-                               class="form-field"
-                               v-model="street">
-                        <div class="text-sm text-red-600 mt-1"
-                             v-show="formErrors.street"
-                             v-html="formErrors.street"></div>
-                    </div>
-                    <div :class="{ 'has-error': formErrors.postcode }">
-                        <label class="font-bold mb-2">
-                            Postleitzahl*
-                        </label>
-                        <input type="text"
-                               class="form-field"
-                               v-model="postcode">
-                        <div class="text-sm text-red-600 mt-1"
-                             v-show="formErrors.postcode"
-                             v-html="formErrors.postcode"></div>
-                    </div>
-                    <div :class="{ 'has-error': formErrors.city }">
-                        <label class="font-bold mb-2">
-                            Ort*
-                        </label>
-                        <input type="text"
-                               class="form-field"
-                               v-model="city">
-                        <div class="text-sm text-red-600 mt-1"
-                             v-show="formErrors.city"
-                             v-html="formErrors.city"></div>
-                    </div>
-                    <div :class="{ 'has-error': formErrors.group }">
-                        <label class="font-bold mb-2">
-                            Name der Gruppe*
-                        </label>
-                        <input type="text"
-                               class="form-field"
-                               v-model="group">
-                        <div class="text-sm text-red-600 mt-1"
-                             v-show="formErrors.group"
-                             v-html="formErrors.group"></div>
-                    </div>
-                    <div :class="{ 'has-error': formErrors.email }">
-                        <label class="font-bold mb-2">
-                            E-Mail*
-                        </label>
-                        <input type="text"
-                               class="form-field"
-                               v-model="email">
-                        <div class="text-sm text-red-600 mt-1"
-                             v-show="formErrors.email"
-                             v-html="formErrors.email"></div>
-                    </div>
-                    <div :class="{ 'has-error': formErrors.phone }">
-                        <label class="font-bold mb-2">
-                            Telefon*
-                        </label>
-                        <input type="text"
-                               class="form-field"
-                               v-model="phone">
-                        <div class="text-sm text-red-600 mt-1"
-                             v-show="formErrors.phone"
-                             v-html="formErrors.phone"></div>
-                    </div>
-                    <div>
-                        <label class="font-bold mb-2">
-                            Bemerkungen/Wünsche
-                        </label>
-                        <textarea class="form-field"
-                                  cols="30"
-                                  rows="3"
-                                  v-model="remarks"/>
-                    </div>
-                    <div v-if="mode === 'booking'" :class="{ 'has-error': formErrors.confirmation }">
-                        <label for="confirmation" class="flex items-start">
-                            <input type="checkbox" v-model="confirmation" name="confirmation" id="confirmation">
-                            <span class="block ml-2">
-                                Durch Anklicken des Buttons 'Buchung abschicken' bestätige ich, dass ich die
-                                <a :href="termsUrls[countryCode]"
-                                   class="text-ep-primary" target="_blank">
-                                    Allgemeinen Geschäftsbedingungen (AGB)
-                                </a> gelesen habe und damit einverstanden bin, dass eine
-                                kostenpflichtige Buchung zustande kommt.
-                            </span>
-                        </label>
-                        <div class="text-sm text-red-600 mt-1"
-                             v-show="formErrors.confirmation"
-                             v-html="formErrors.confirmation"></div>
-                    </div>
-                </div>
-                <div class="py-4">
-                    Ihr erhaltet von uns eine Bestätigung. Wir behalten uns vor die Buchung zu prüfen. Erst nach
-                    Rückbestätigung von uns gilt die Buchung auch von unserer Seite als bindend.
-                </div>
-                <div class="flex items-center space-x-2">
-                    <button class="button bg-button"
-                            type="submit"
-                            v-if="!forceInquiry"
-                            @click.prevent="submitForm('booking')">
-                        Buchung abschicken
-                    </button>
-                    <button class="button bg-button"
-                            :class="{ 'button--small bg-ep-secondary': !forceInquiry }"
-                            type="submit"
-                            @click.prevent="submitForm('inquiry')">
-                        als Anfrage senden
-                    </button>
-                </div>
-            </div>
-        </div>
-        <div>
-            <img :src="logoAt" alt="" v-if="countryCode === 'AT'" class="block w-full h-auto max-w-24">
-            <img :src="logoCh" alt="" v-if="countryCode === 'CH'" class="block w-full h-auto max-w-24">
-        </div>
-        <div class="fixed top-0 left-0 inset-0 bg-white/85 flex items-center justify-center" v-show="processing">
-            <img :src="loaderUri" alt="Loading...">
-        </div>
-    </div>
-</template>
-
-<script>
-import dayjs from 'dayjs'
-import 'dayjs/locale/de'
-import 'flatpickr';
-import {German} from 'flatpickr/dist/l10n/de';
-import Vue from 'vue';
-
-export default {
-    name: 'GroupsPriceCalculator',
-    props: {
-        loaderUri: {
-            type: String,
-            required: true
-        },
-        endpoint: {
-            type: String,
-            required: true
-        },
-        logoAt: {
-            type: String,
-        },
-        logoCh: {
-            type: String,
-        },
-        configsJson: {
-            type: String,
-            required: true
-        },
-        boardsJson: {
-            type: String,
-            required: true
-        },
-        optionsJson: {
-            type: String,
-            required: true
-        },
-        runningCostsFactorEur: {
-            type: Number,
-            default: 2.5,
-        },
-        runningCostsFactorChf: {
-            type: Number,
-            default: 2.9,
-        },
-        undersubscription30Eur: {
-            type: Number,
-            default: 5.0,
-        },
-        undersubscription30Chf: {
-            type: Number,
-            default: 5.0,
-        },
-        undersubscription40Eur: {
-            type: Number,
-            default: 2.5,
-        },
-        undersubscription40Chf: {
-            type: Number,
-            default: 2.5,
-        },
-        countryCode: {
-            type: String,
-            required: true
-        },
-        shortTermFactors: {
-            type: Array,
-            default() {
-                return [
-                    { nights: 1, factor: 0.3 },
-                    { nights: 2, factor: 0.2 },
-                    { nights: 3, factor: 0.1 },
-                ]
-            }
-        },
-        mainSeasonFrom: {
-            type: String,
-            default: null,
-        },
-        mainSeasonTo: {
-            type: String,
-            default: null,
-        },
-        minBookingDays: {
-            type: Number,
-            default: 5,
-        },
-        taxLabel: {
-            type: String,
-            default: 'zzgl. vorab zu entrichtender Ortstaxe',
-        },
-        adolescentsAge: {
-            type: Number,
-            default: 0,
-        }
-    },
-    data() {
-        return {
-            configs: JSON.parse(this.configsJson),
-            boards: JSON.parse(this.boardsJson),
-            options: JSON.parse(this.optionsJson),
-            processing: false,
-            submitted: false,
-            picker: null,
-            formErrors: {},
-            selectedFrom: null,
-            selectedTo: null,
-            selectedRange: [],
-            selectedPax: 30,
-            childrenCount: 0,
-            minorsCount: 0,
-            adolescentsCount: 0,
-            selectedOptions: [],
-            selectedBoard: null,
-            name: '',
-            email: '',
-            phone: '',
-            remarks: '',
-            group: '',
-            street: '',
-            postcode: '',
-            city: '',
-            mode: 'booking',
-            confirmation: false,
-            termsUrls: {
-                AT: 'https://www.ep-reisen.de/fileadmin/user_upload/allgemein/AGB_Gruppen/AGB_Gruppen_CLLT_Touristik_GmbH.pdf',
-                CH: 'https://www.ep-reisen.de/fileadmin/user_upload/allgemein/AGB_Gruppen/AVB_Gruppen_AlpineVacation_GmbH.pdf',
-                IT: 'https://www.ep-reisen.de/fileadmin/user_upload/allgemein/AGB_Gruppen/AGB_Gruppen_E_P_Reisen.pdf',
-            }
-        }
-    },
-    methods: {
-        formatCurrency({ EUR, CHF }) {
-            let price
-
-            if ('CH' === this.countryCode) {
-                let formatter = new Intl.NumberFormat('de-DE', {
-                    style: 'currency',
-                    currency: 'CHF',
-                })
-                price = formatter.format(CHF)
-            } else {
-                let formatter = new Intl.NumberFormat('de-DE', {
-                    style: 'currency',
-                    currency: 'EUR',
-                })
-                price = formatter.format(EUR)
-            }
-
-            return price
-        },
-        calculateOptionPrice(option) {
-            let price = {
-                EUR: 0,
-                CHF: 0,
-            };
-            let optionPriceEUR = option.price.EUR
-            let optionPriceCHF = option.price.CHF
-            if (1 === option.type) {
-                price.EUR = optionPriceEUR;
-                price.CHF = optionPriceCHF;
-            } else if (2 === option.type) {
-                price.EUR = optionPriceEUR * this.paxCount;
-                price.CHF = optionPriceCHF * this.paxCount;
-            } else if (3 === option.type) {
-                price.EUR = optionPriceEUR * this.nightsCount;
-                price.CHF = optionPriceCHF * this.nightsCount;
-            } else if (4 === option.type) {
-                price.EUR = optionPriceEUR * this.nightsCount * this.paxCount;
-                price.CHF = optionPriceCHF * this.nightsCount * this.paxCount;
-            }
-            return price;
-        },
-        formatOptionPriceType(option) {
-            if (2 === option.type) {
-                return ` (${this.formatCurrency(option.price)} pro Person)`
-            }
-            if (3 === option.type) {
-                return ` (${this.formatCurrency(option.price)} pro Nacht)`
-            }
-            if (4 === option.type) {
-                return ` (${this.formatCurrency(option.price)} pro Person und Nacht)`
-            }
-
-            return ` (${this.formatCurrency(option.price)})`
-        },
-        initSelectableRanges() {
-            let enabledDates = [];
-            for (let config of this.configs) {
-                const dateFrom = dayjs(config.dateFrom);
-                const dateTo = dayjs(config.dateTo);
-                enabledDates.push({
-                    from: dateFrom.format('DD.MM.YYYY'),
-                    to: dateTo.format('DD.MM.YYYY')
-                });
-            }
-            this.picker.set('enable', enabledDates);
-            if (enabledDates.length > 0) {
-                const firstDate = enabledDates[0].from;
-                this.picker.set('minDate', firstDate);
-            }
-        },
-        updateSelectedRange() {
-            let range = [];
-            let currentDate = this.selectedFrom;
-            while (currentDate < this.selectedTo) {
-                range.push(currentDate);
-                currentDate = currentDate.add(1, 'day');
-            }
-            this.selectedRange = range;
-        },
-        onPaxUpdated() {
-            if (this.selectedPax < 30) {
-                this.selectedBoard = null;
-            }
-        },
-        submitForm(mode) {
-            this.mode = mode
-            let confirmation = 'inquiry' === mode ? true : this.confirmation
-            let formData = new URLSearchParams({
-                'tx_epproducts_ajax[groupsPriceInquiry][mode]': mode,
-                'tx_epproducts_ajax[groupsPriceInquiry][confirmation]': confirmation ? '1' : '0',
-                'tx_epproducts_ajax[groupsPriceInquiry][name]': this.name ? this.name : '',
-                'tx_epproducts_ajax[groupsPriceInquiry][group]': this.group ? this.group : '',
-                'tx_epproducts_ajax[groupsPriceInquiry][street]': this.street ? this.street : '',
-                'tx_epproducts_ajax[groupsPriceInquiry][postcode]': this.postcode ? this.postcode : '',
-                'tx_epproducts_ajax[groupsPriceInquiry][city]': this.city ? this.city : '',
-                'tx_epproducts_ajax[groupsPriceInquiry][email]': this.email? this.email : '',
-                'tx_epproducts_ajax[groupsPriceInquiry][phone]': this.phone ? this.phone : '',
-                'tx_epproducts_ajax[groupsPriceInquiry][remarks]': this.remarks,
-                'tx_epproducts_ajax[groupsPriceInquiry][dateFrom]': this.selectedFrom.format('DD.MM.YYYY'),
-                'tx_epproducts_ajax[groupsPriceInquiry][dateTo]': this.selectedTo.format('DD.MM.YYYY'),
-                'tx_epproducts_ajax[groupsPriceInquiry][nights]': this.nightsCount,
-                'tx_epproducts_ajax[groupsPriceInquiry][pax]': this.selectedPax,
-                'tx_epproducts_ajax[groupsPriceInquiry][children]': this.childrenCount,
-                'tx_epproducts_ajax[groupsPriceInquiry][minors]': this.minorsCount,
-                'tx_epproducts_ajax[groupsPriceInquiry][adolescents]': this.adolescentsCount,
-                'tx_epproducts_ajax[groupsPriceInquiry][summary][paxBase]': this.formatCurrency(this.pricePax.base),
-                'tx_epproducts_ajax[groupsPriceInquiry][summary][paxAdditional]': this.formatCurrency(this.pricePax.additional),
-                'tx_epproducts_ajax[groupsPriceInquiry][summary][undersubscription]': this.formatCurrency(this.pricePax.undersubscription),
-                'tx_epproducts_ajax[groupsPriceInquiry][summary][shortTerm]': this.formatCurrency(this.priceShortTerm),
-                'tx_epproducts_ajax[groupsPriceInquiry][summary][options]': this.formatCurrency(this.priceOptions),
-                'tx_epproducts_ajax[groupsPriceInquiry][summary][board]': this.formatCurrency(this.priceBoard),
-                'tx_epproducts_ajax[groupsPriceInquiry][summary][runningCosts]': this.formatCurrency(this.priceRunningCosts),
-                'tx_epproducts_ajax[groupsPriceInquiry][summary][total]': this.formatCurrency(this.priceTotal),
-            })
-            if (this.selectedBoard) {
-                formData.append('tx_epproducts_ajax[groupsPriceInquiry][board]', this.selectedBoard.uid)
-            }
-            this.selectedOptions.map(option => (
-                formData.append('tx_epproducts_ajax[groupsPriceInquiry][options][]', option.uid)
-            ))
-            this.processing = true;
-            this.submitted = false;
-            fetch(this.endpoint, { method: 'POST', body: formData })
-                .then(response => response.json())
-                .then((json) => {
-                    if ('validation' === json.status) {
-                        this.formErrors = json.errors
-                    } else {
-                        this.submitted = true;
-                        window.dataLayer = window.dataLayer || [];
-                        dataLayer.push({
-                            'event': 'Preisberechnung'
-                        })
-                    }
-                })
-                .finally(() => {
-                    this.processing = false
-                })
-        },
-    },
-    computed: {
-        isSelfCatering() {
-            let selectedBoard = this.selectedBoard
-            if (null === selectedBoard) {
-                return true
-            }
-            if ('CH' === this.countryCode) {
-                return selectedBoard.price.CHF === 0
-            } else {
-                return selectedBoard.price.EUR === 0
-            }
-        },
-        undersubscriptionLimit() {
-            if (this.paxCount < 40) {
-                return 40
-            } else if (this.paxCount < 50) {
-                return 50
-            }
-
-            return 0
-        },
-        paxCount() {
-            // subtract number of children from pax for price calculation, but minimum 30 pax
-            return Math.max(this.selectedPax - this.childrenCount, 30)
-        },
-        nightsCount() {
-            return this.selectedRange.length;
-        },
-        forceInquiry() {
-            return 1 === this.selectedRange.length
-        },
-        rangeFormatted() {
-            if (null === this.selectedFrom || null === this.selectedTo) {
-                return '-';
-            }
-
-            return this.selectedFrom.format('DD.MM.YYYY') + ' - ' + this.selectedTo.format('DD.MM.YYYY');
-        },
-        pricePax() {
-            let base = {
-                EUR: 0,
-                CHF: 0,
-            }
-            let additional = {
-                EUR: 0,
-                CHF: 0,
-            }
-            let undersubscription = {
-                EUR: 0,
-                CHF: 0,
-            }
-            for (let date of this.selectedRange) {
-                for (let config of this.configs) {
-                    if (date >= dayjs(config.dateFrom) && date < dayjs(config.dateTo)) {
-                        base.EUR += config.price.EUR
-                        base.CHF += config.price.CHF
-                        let included = config.personsIncluded
-                        if (this.paxCount > included) {
-                            let additionalPax = this.paxCount - included
-                            additional.EUR += additionalPax * config.priceAdditionalPerson.EUR
-                            additional.CHF += additionalPax * config.priceAdditionalPerson.CHF
-                        }
-                    }
-                }
-            }
-            if (false === this.isSelfCatering) {
-                if (this.paxCount < 40) {
-                    undersubscription.EUR = this.paxCount * this.undersubscription30Eur * this.selectedRange.length
-                    undersubscription.CHF = this.paxCount * this.undersubscription30Chf * this.selectedRange.length
-                } else if (this.paxCount < 50) {
-                    undersubscription.EUR = this.paxCount * this.undersubscription40Eur * this.selectedRange.length
-                    undersubscription.CHF = this.paxCount * this.undersubscription40Chf * this.selectedRange.length
-                }
-            }
-
-            return {base, additional, undersubscription}
-        },
-        priceOptions() {
-            let price = {
-                EUR: 0,
-                CHF: 0,
-            };
-            for (let option of this.selectedOptions) {
-                let optionPrice = this.calculateOptionPrice(option)
-                price.EUR += optionPrice.EUR;
-                price.CHF += optionPrice.CHF;
-            }
-            return price;
-        },
-        priceBoard() {
-            let price = {
-                EUR: 0,
-                CHF: 0,
-            }
-            if (this.selectedBoard) {
-                price.EUR = this.selectedBoard.price.EUR * this.nightsCount * this.paxCount;
-                price.CHF = this.selectedBoard.price.CHF * this.nightsCount * this.paxCount;
-            }
-            return price
-        },
-        priceShortTerm() {
-            let price = {
-                EUR: 0,
-                CHF: 0,
-            }
-            const totalPricePax = this.pricePax.base.EUR + this.pricePax.additional.EUR;
-            const totalPricePaxCHF = this.pricePax.base.CHF + this.pricePax.additional.CHF;
-            const shorTermFactor = this.shortTermFactors.find(element => element.nights === this.nightsCount);
-            if (undefined !== shorTermFactor) {
-                price.EUR = totalPricePax * shorTermFactor.factor;
-                price.CHF = totalPricePaxCHF * shorTermFactor.factor;
-            }
-            return price
-        },
-        priceRunningCosts() {
-            return {
-                EUR: this.nightsCount * this.selectedPax * this.runningCostsFactorEur,
-                CHF: this.nightsCount * this.selectedPax * this.runningCostsFactorChf,
-            }
-        },
-        priceTotal() {
-            let totalEUR = this.pricePax.base.EUR
-                + this.pricePax.additional.EUR
-                + this.pricePax.undersubscription.EUR
-                + this.priceOptions.EUR
-                + this.priceBoard.EUR
-                + this.priceShortTerm.EUR
-                + this.priceRunningCosts.EUR
-
-            let totalCHF = 0
-
-            // calculate CHF price when pax price in CHF is available since CHF prices may not be provided via CMS yet
-            if (0 < this.pricePax.base.CHF) {
-                totalCHF = this.pricePax.base.CHF
-                    + this.pricePax.additional.CHF
-                    + this.pricePax.undersubscription.CHF
-                    + this.priceOptions.CHF
-                    + this.priceBoard.CHF
-                    + this.priceShortTerm.CHF
-                    + this.priceRunningCosts.CHF
-            }
-
-
-            return {
-                EUR: totalEUR,
-                CHF: totalCHF,
-            }
-        }
-    },
-    mounted() {
-        Vue.nextTick(() => {
-            this.picker = flatpickr(this.$refs.picker, {
-                mode: 'range',
-                dateFormat: 'd.m.Y',
-                locale: German,
-                onChange: selectedDates => {
-                    if (2 === selectedDates.length) {
-                        this.selectedFrom = dayjs(selectedDates[0]);
-                        this.selectedTo = dayjs(selectedDates[1]);
-                        this.updateSelectedRange();
-                    }
-                }
-            });
-            this.initSelectableRanges();
-        });
-    }
-}
-</script>
@@ -9,6 +9,9 @@ export default class extends Controller {
        zoom: Number,
        externalLink: String,
        markers: Array,
+        tileUrl: String,
+        apiKey: String,
+        attribution: String,
    }

    connect() {
@@ -44,9 +47,21 @@ export default class extends Controller {
            }
            this.map.fitBounds(bounds)
        }
-        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        L.tileLayer(this.tileUrl(), {
            maxZoom: 19,
-            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+            // The site sends Referrer-Policy: same-origin, which strips the Referer on
+            // cross-origin requests. The tile provider needs it to match its key against
+            // the allowed-domain list, so widen the policy for tile requests only.
+            referrerPolicy: 'strict-origin-when-cross-origin',
+            attribution: this.attributionValue
        }).addTo(this.map)
    }
+
+    tileUrl() {
+        if ('' === this.tileUrlValue || '' === this.apiKeyValue) {
+            return ''
+        }
+        const separator = -1 === this.tileUrlValue.indexOf('?') ? '?' : '&'
+        return this.tileUrlValue + separator + 'apiKey=' + encodeURIComponent(this.apiKeyValue)
+    }
 }
@@ -1,10 +0,0 @@
-// Initialize vue app
-import Vue from 'vue'
-import vueCustomElement from 'vue-custom-element'
-import 'document-register-element/build/document-register-element'
-import GroupsPriceCalculator from './components/GroupsPriceCalculator'
-
-Vue.use(vueCustomElement)
-Vue.config.productionTip = false
-
-Vue.customElement('groups-price-calculator', GroupsPriceCalculator)
@@ -1,5 +1,3 @@
-import 'whatwg-fetch'
-
 export const useFetch = controller => {
    Object.assign(controller, {
        checkStatus(response) {
@@ -1,13 +1,12 @@
+@use "sass:meta";
@layer base {
    body {
        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    }
-    @import "base/typography";
-    @import "base/images";
+    @include meta.load-css("base/typography");
+    @include meta.load-css("base/images");

-    [data-rte-content] {
-        @import "base/rte-content";
-    }
+    @include meta.load-css("base/rte-content");

    iframe {
        width: 100%;
@@ -1,14 +1,15 @@
+@use "sass:meta";
@layer components {
-    @import "components/topnav";
-    @import "components/background";
-    @import "components/badges";
-    @import "components/buttons";
-    @import "components/contact-bar";
-    @import "components/calendar";
-    @import "components/forms";
-    @import "components/herounit";
-    @import "components/misc";
-    @import "components/searchbar";
-    @import "components/teaser";
-    @import "components/travelinfo";
+    @include meta.load-css("components/topnav");
+    @include meta.load-css("components/background");
+    @include meta.load-css("components/badges");
+    @include meta.load-css("components/buttons");
+    @include meta.load-css("components/contact-bar");
+    @include meta.load-css("components/calendar");
+    @include meta.load-css("components/forms");
+    @include meta.load-css("components/herounit");
+    @include meta.load-css("components/misc");
+    @include meta.load-css("components/searchbar");
+    @include meta.load-css("components/teaser");
+    @include meta.load-css("components/travelinfo");
 }
@@ -1,8 +1,10 @@
+@use "sass:meta";
+
 // Lightbox
@import "~glightbox/dist/css/glightbox.css";

 // Tooltips
-@import "~cooltipz-css/src/cooltipz";
+@include meta.load-css("cooltipz-css/cooltipz.css");

 :root {
    --cooltipz-bg-color: theme('colors.zinc.700');
@@ -3,7 +3,3 @@
    @apply block w-full h-auto;
 }

-img.lazyloading {
-    background: url(../../images/lazy.png) no-repeat top center;
-}
-
@@ -1,35 +1,38 @@
-h1,
-.headline--primary,
-h2,
-.headline--secondary,
-h3,
-.headline--3,
-h4,
-.headline--4 {
+// Self-contained: the wrapper lives here so `&` and @extend resolve the same
+// way they did when this file was @imported into a [data-rte-content] block.
+[data-rte-content] {
+    h1,
+    .headline--primary,
+    h2,
+    .headline--secondary,
+    h3,
+    .headline--3,
+    h4,
+    .headline--4 {
        @apply mb-4;
-}
+    }

-ul {
+    ul {
        @apply list-disc pl-4 mb-4;
-}
+    }

-ol {
+    ol {
        @apply list-decimal pl-4 mb-4;
-}
+    }

-p {
+    p {
        @apply mb-4;
-}
+    }

-a:not(.button):not(.rte-button):not(.rte-button--full) {
+    a:not(.button):not(.rte-button):not(.rte-button--full) {
        @apply underline text-ep-primary-dark sbw:text-sbw-primary-dark;

        .bg-brand-gradient & {
            @apply text-white underline;
        }
-}
+    }

-a.rte-button {
+    a.rte-button {
        @apply inline-flex items-center justify-center px-4 py-2 md:px-8;
        @apply uppercase leading-none text-center;
        @apply transition-colors outline-none;
@@ -49,34 +52,35 @@ a.rte-button {
        @apply focus:outline-ep-primary-dark sbw:focus:outline-sbw-secondary uch:focus:outline-uch-secondary;
        @apply suz:focus:outline-suz-secondary ser:focus:outline-ser-secondary snz:focus:outline-snz-secondary;

-}
+    }

-a.rte-button--full {
+    a.rte-button--full {
        @extend .rte-button;
        @apply w-full;
-}
+    }

-table,
-.table {
+    table,
+    .table {
        @apply w-full;
-}
+    }

-thead {
+    thead {
        tr {
            @apply bg-zinc-200;
        }
-}
+    }

-tbody {
+    tbody {
        tr {
            @apply odd:bg-zinc-100;
        }
-}
+    }

-th {
+    th {
        @apply border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base;
-}
+    }

-td {
+    td {
        @apply border-r border-zinc-200 px-2 py-1 md:p-2;
+    }
 }
@@ -1,10 +1,12 @@
-@import "tailwindcss/base";
-@import "base";
+@use "sass:meta";

-@import "tailwindcss/components";
-@import "components";
+@include meta.load-css("tailwindcss/base");
+@include meta.load-css("base");

-@import "tailwindcss/utilities";
-@import "utilities";
+@include meta.load-css("tailwindcss/components");
+@include meta.load-css("components");

-@import "vendor";
+@include meta.load-css("tailwindcss/utilities");
+@include meta.load-css("utilities");
+
+@include meta.load-css("vendor");
@@ -1,4 +1,4 @@
-@import "base/fonts";
+@use "base/fonts";

 body {
    @apply antialiased text-zinc-800 font-sans;
@@ -18,8 +18,8 @@
                    </f:if>
                    <f:if condition="{image}">
                        <f:then>
-                            <ep:lazyLoadImage image="{image}"
-                                              loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
+                            <f:image image="{image}"
+                                     loading="lazy"
                                     class="block w-full h-full object-cover"
                                     width="400c"
                                     height="300c"
@@ -1,6 +1,5 @@
 <html data-namespace-typo3-fluid="true" lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">

 <f:section name="Teaser">
@@ -18,8 +17,8 @@
                    </f:if>
                    <f:if condition="{image}">
                        <f:then>
-                            <ep:lazyLoadImage image="{image}"
-                                              loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
+                            <f:image image="{image}"
+                                     loading="lazy"
                                     class="block w-full h-full object-cover"
                                     width="400c"
                                     height="300c"
@@ -13,8 +13,8 @@
            <div class="col-span-2 md:col-span-1">
                <div class="relative max-w-md mx-auto mb-8">
                    <f:if condition="{image}">
-                        <ep:lazyLoadImage image="{image}"
-                                          loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
+                        <f:image image="{image}"
+                                 loading="lazy"
                                 class="block w-full h-auto rounded-full"
                                 width="400"
                                 height="400c"
@@ -1,6 +1,5 @@
 <html data-namespace-typo3-fluid="true" lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">

    <f:alias map="{button: data.flexForm.buttons.0}">
@@ -11,8 +10,8 @@
            <div class="col-md-6">
                <a href="{f:uri.typolink(parameter: button.container.link)}" title="{button.container.label -> f:format.raw()}">
                    <f:if condition="{image}">
-                        <ep:lazyLoadImage image="{image}"
-                                          loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
+                        <f:image image="{image}"
+                                 loading="lazy"
                                 class="block w-full h-auto rounded-full"
                                 width="400"
                                 alt="{image.alternative}" />
@@ -11,8 +11,8 @@
            <div class="md:flex md:items-start py-4">
                <div class="px-16 pb-4 md:px-4 md:pb-0 md:w-1/6">
                    <f:if condition="{image}">
-                        <ep:lazyLoadImage image="{image}"
-                                          loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
+                        <f:image image="{image}"
+                                 loading="lazy"
                                 class="block w-full h-auto rounded-full"
                                 width="400"
                                 height="400c"
@@ -14,8 +14,8 @@
            <div class="col-span-2 md:col-span-1">
                <div class="relative max-w-md mx-auto mb-8">
                    <f:if condition="{teaserImage}">
-                        <ep:lazyLoadImage image="{teaserImage}"
-                                          loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
+                        <f:image image="{teaserImage}"
+                                 loading="lazy"
                                 class="block w-full h-auto rounded-full"
                                 width="400"
                                 height="400c"
@@ -1,6 +1,5 @@
 <html data-namespace-typo3-fluid="true" lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">

    <f:alias map="{button: data.flexForm.buttons.0}">
@@ -11,8 +10,8 @@
            <div class="col-md-6">
                <a href="{f:uri.typolink(parameter: button.container.link)}" title="{button.container.label -> f:format.raw()}">
                    <f:if condition="{teaserImage}">
-                        <ep:lazyLoadImage image="{teaserImage}"
-                                          loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
+                        <f:image image="{teaserImage}"
+                                 loading="lazy"
                                 class="block w-full h-auto rounded-full"
                                 width="400"
                                 alt="{teaserImage.alternative}" />
@@ -11,8 +11,8 @@
            <div class="md:flex md:items-start py-4">
                <div class="px-16 pb-4 md:px-4 md:pb-0 md:w-1/6">
                    <f:if condition="{teaserImage}">
-                        <ep:lazyLoadImage image="{teaserImage}"
-                                          loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
+                        <f:image image="{teaserImage}"
+                                 loading="lazy"
                                 class="block w-full h-auto rounded-full"
                                 width="400"
                                 height="400c"
@@ -158,8 +158,8 @@
                           target="_blank"
                           rel="nofollow"
                           title="Global Compact">
-                            <ep:lazyLoadImage src="EXT:ep_theme/Resources/Public/images/global_compact.png"
-                                              loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
+                            <f:image src="EXT:ep_theme/Resources/Public/images/global_compact.png"
+                                     loading="lazy"
                                     class="block w-full h-auto"
                                     width="100"
                                     alt="Global Compact" />
@@ -184,8 +184,10 @@
        <f:format.raw>{totalRatings.jsonData->f:format.json()}</f:format.raw>
    </script>

+    <f:comment><!--
        <f:if condition="{site.identifier} == 'ep-reisen'">
            <f:render partial="Chatbot" arguments="{_all}"/>
        </f:if>
+    --></f:comment>

 </html>
@@ -9,8 +9,8 @@
                {ep:icon(icon: 'flag-{hotel.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 absolute top-0 left-0')}
                <f:if condition="{hotel.images.original.0}">
                    <f:then>
-                        <ep:lazyLoadImage image="{hotel.images.original.0}"
-                                          loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
+                        <f:image image="{hotel.images.original.0}"
+                                 loading="lazy"
                                 class="block w-full h-full object-cover"
                                 width="400c"
                                 height="300c"
@@ -15,8 +15,8 @@
            <a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
               title="{image.title}"
               data-action="lightbox#open">
-                <ep:lazyLoadImage image="{image}"
-                                  loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
+                <f:image image="{image}"
+                         loading="lazy"
                         class="block w-full h-auto"
                         width="770"
                         height="430c+100"
@@ -35,8 +35,8 @@
                               data-lightbox-caption="{image.originalResource.description}"
                               title="{image.title}"
                               class="block">
-                                <ep:lazyLoadImage image="{image}"
-                                                  loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
+                                <f:image image="{image}"
+                                         loading="lazy"
                                         class="block w-full h-auto"
                                         width="150"
                                         height="85c+100"
@@ -1,6 +1,5 @@
 <html data-namespace-typo3-fluid="true" lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">

    <div class="odd:bg-zinc-50 p-4" data-rte-content>
@@ -18,8 +17,8 @@
            </h3>
            {journey.byCar -> f:format.html()}
            <f:if condition="{journey.image}">
-                <ep:lazyLoadImage image="{journey.image}"
-                                  loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
+                <f:image image="{journey.image}"
+                         loading="lazy"
                         class="block w-full h-auto"
                         width="770"
                         height="430c+100"
@@ -0,0 +1,10 @@
+<div class="w-full aspect-w-16 aspect-h-9 {class}"
+     data-controller="osm"
+     data-osm-tile-url-value="{settings.mapTileUrl}"
+     data-osm-api-key-value="{settings.mapApiKey}"
+     data-osm-attribution-value="{settings.mapAttribution}"
+     <f:if condition="{zoom}">data-osm-zoom-value="{zoom}"</f:if>
+     <f:if condition="{lat}">data-osm-lat-value="{lat}" data-osm-lng-value="{lng}"</f:if>
+     <f:if condition="{externalLink}">data-osm-external-link-value="{externalLink}"</f:if>
+     <f:if condition="{markers}">data-osm-markers-value='{markers -> f:format.raw()}'</f:if>
+></div>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
fromme	38d575cbe9	fix: point the application form finisher at epteam	2026-09-23 09:26:12 +02:00
fromme	f9e8704046	fix: datepicker obscured by logo in header searchbar	2026-09-23 09:24:25 +02:00
fromme	49547ecda3	fix: reuse the MyEP api connection instead of a client per call	2026-09-22 16:49:44 +02:00
fromme	eb096bd8b5	chore: update project dependencies	2026-09-22 15:49:34 +02:00
fromme	b3541b21fb	feat: modernize fe tooling and drop weight	2026-09-22 15:29:34 +02:00
fromme	93ed5c6962	fix: harden encoded filter settings against malformed and stale input	2026-09-22 14:49:04 +02:00
fromme	942724fdd1	feat: derive room type from occupancy instead of a mapping table	2026-09-22 14:47:04 +02:00
frommeandClaude Opus 5	e52f7dcff8	feat: post application forms to MyEP with label-keyed extra values Forms built in the backend form editor use generated element identifiers (text-1, multicheckbox-2, ...) that carry no meaning and cannot be renamed without breaking the other finishers configured on the form. ApplicationApiFinisher therefore sends two halves: a small mapped core (firstName, lastName, email, ...) that a developer configures per form and MyEP can rely on, plus every remaining submitted value keyed by the element label for a human to read. Each submission also carries where it came from: the form identifier and its editor-given name, plus the uid and canonical URL of the page it was submitted from - the same definition is embedded on several pages, so the page is what distinguishes them. The URL is generated through the site router in the visitor's language, like AddReferrerFinisher does it. Labels come from the form definition rather than TranslationService, so the keys do not shift with the site language. Values are normalized for JSON: dates to Y-m-d, uploads to the file name, multi-value elements to a list, empty values dropped, unsupported objects skipped with a log warning. Like BpnApiFinisher the request failure is only logged, so a MyEP outage never costs the application mail. The endpoint (POST applications) does not exist in MyEP yet; the contract handed over to that team lives in .ddev/plans/MYEP-APPLICATION-ENDPOINT.md. Until it is built the finisher is registered but attached to no form. Co-Authored-By: Claude Opus 5 <[email protected]>	2026-09-22 13:42:07 +02:00
fromme	30e531497d	fix: default Geoapify base url to Europe	2026-09-22 10:54:41 +02:00
fromme	2cb37e760a	fix: serve svg sprite locally for same-origin restrictions	2026-09-22 10:35:58 +02:00
fromme	3ff3251419	feat: integrate with Geaoapify for maps tiles	2026-09-22 10:25:20 +02:00
fromme	abcd39107b	fix: serve css/js via cdn	2026-09-22 09:32:15 +02:00
fromme	599e3c7ee2	fix: accept 409 from the MyEP contact form endpoint	2026-09-22 08:29:58 +02:00
fromme	6ff308015a	chore: optimize deployer config	2026-09-15 11:38:56 +02:00
fromme	6e0479bf22	fix: reduce timeout values for snowreport import	2026-09-15 11:28:14 +02:00
fromme	fb8fddf669	fix: make snowreport import type-safe and drop wget shell-out	2026-09-15 11:14:33 +02:00
fromme	f745c7b683	chore: exclude temp dir from repository	2026-09-15 11:08:49 +02:00
fromme	9b3550ec40	feat: migrate to native lazy loading of images	2026-09-12 12:08:09 +02:00
fromme	d9943619f6	chore: cleanup	2026-09-12 12:04:52 +02:00
fromme	e33b57c9f1	feat: disable chatbot in page footer	2026-09-12 12:04:33 +02:00
fromme	dc594efee1	chore: remove obsolete vue component	2026-09-12 11:52:46 +02:00