@font-face {
    font-family: "HK Grotesk";
    src: url("../fonts/hkgrotesk-light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "HK Grotesk";
    src: url("../fonts/hkgrotesk-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "HK Grotesk";
    src: url("../fonts/hkgrotesk-medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "HK Grotesk";
    src: url("../fonts/hkgrotesk-semibold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lemour Serif";
    src: url("../fonts/lemourserif-regular-webfont.woff2") format("woff2"), url("../fonts/lemourserif-regular-webfont.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --navy: #182a42;
    --gold: #b79958;
    --blue: #024e7e;
    --line: #bebebe;
    --shadow: 4px 4px 10px rgba(24, 42, 66, 0.2);
    --shadow-soft: 4px 4px 20px rgba(24, 42, 66, 0.2);
    --sans: "HK Grotesk", "Helvetica Neue", Arial, sans-serif;
    --serif: "Lemour Serif", Georgia, serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

body {
    margin: 0;
}

/* clip statt hidden: hidden macht body zum Scroll-Container, dann klebt die Navigation nicht mehr. */
body.kiosk {
    overflow-x: clip;
    overscroll-behavior-x: none;
    color: var(--navy);
    background: #fff;
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3125;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

body.kiosk input,
body.kiosk select,
body.kiosk textarea {
    -webkit-user-select: text;
    user-select: text;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
}

h1,
h2,
h3,
p {
    margin: 0;
}

.kiosk-icon {
    display: block;
    flex: none;
}

.kiosk-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.kiosk-app {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

#kiosk {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

#kiosk > *:not(.kiosk-stage) {
    width: min(100%, 1800px);
}

/* Navigation */

.kiosk-nav {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px);
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 220px;
    height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
    height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
    padding: 40px 0 32px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--navy);
    color: #fff;
}

.kiosk-nav::-webkit-scrollbar {
    display: none;
}

.kiosk-nav > * {
    flex: none;
}

.kiosk-nav__logo img {
    display: block;
    width: 201px;
    height: 70px;
}

/* Auto-Ränder zentrieren im freien Platz und fallen bei Überlauf auf 0, dann scrollt die Leiste. */
.kiosk-nav__items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    margin: auto 0;
}

.kiosk-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 17px;
    padding: 16px 0;
    color: #fff;
}

.kiosk-nav__item.is-active {
    background: linear-gradient(to right, #bfa05c, #876e3a);
}

.kiosk-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}

.kiosk-nav__label {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Screens */

.kiosk-screen {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 40px;
}

.kiosk-screen--region {
    gap: 32px;
}

.kiosk-screen--region .kiosk-section + .kiosk-section {
    margin-top: 8px;
}

.kiosk-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kiosk-empty {
    padding: 24px;
    font-size: 20px;
    font-weight: 300;
}

.kiosk-back {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-size: 24px;
    font-weight: 300;
    color: var(--navy);
}

.kiosk-back__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding-right: 2px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
}

/* Header of list and form pages */

.kiosk-mast {
    display: flex;
    gap: 10px;
    height: 310px;
    overflow: hidden;
}

.kiosk-mast--tall {
    height: 434px;
}

.kiosk-mast__copy {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    padding: 24px;
}

.kiosk-mast__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.kiosk-mast h1 {
    font-size: 48px;
    font-weight: 600;
    text-transform: uppercase;
}

.kiosk-mast__lead {
    width: 432px;
    max-width: 100%;
    font-size: 20px;
    font-weight: 300;
}

.kiosk-mast--tall .kiosk-mast__text {
    gap: 27px;
}

.kiosk-mast--tall h1 {
    width: 477px;
    max-width: 100%;
}

.kiosk-mast--tall .kiosk-mast__lead {
    width: 450px;
    max-width: 100%;
}

.kiosk-mast__image {
    position: relative;
    flex: 0 1 655px;
    max-width: 655px;
    min-width: 0;
    height: 100%;
}

.kiosk-mast__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kiosk-mast__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #fff 1.298%, rgba(255, 255, 255, 0) 30.908%);
}

/* Filters */

.kiosk-filters {
    display: flex;
    align-items: center;
    gap: 31px;
    padding-left: 24px;
}

.kiosk-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    padding: 8px 32px;
    border: 0;
    background: #fff;
    box-shadow: var(--shadow);
    color: var(--navy);
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.kiosk-filter.is-active {
    background: var(--navy);
    color: #fff;
}

.kiosk-drop {
    position: relative;
}

.kiosk-drop.is-open .kiosk-filter .kiosk-icon {
    transform: rotate(180deg);
}

.kiosk-drop__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    display: none;
    min-width: 100%;
    max-height: 560px;
    padding: 8px 0;
    overflow-y: auto;
    background: #fff;
    box-shadow: var(--shadow-soft);
}

.kiosk-drop.is-open .kiosk-drop__panel {
    display: block;
}

.kiosk-check {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 32px;
    font-size: 18px;
    font-weight: 300;
    white-space: nowrap;
    cursor: pointer;
}

.kiosk-check input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--navy);
}

/* Grids and rails */

.kiosk-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 24px;
    padding: 0 24px;
}

.kiosk-grid--regions {
    row-gap: 32px;
}

.kiosk-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.kiosk-heading {
    padding-left: 40px;
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
    text-transform: uppercase;
}

.kiosk-rail {
    display: flex;
    gap: 32px;
    margin: -10px 0 -16px;
    padding: 10px 24px 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.kiosk-rail::-webkit-scrollbar {
    display: none;
}

.kiosk-rail > * {
    flex: 0 0 auto;
}

.kiosk-rail > .kiosk-ship {
    width: 320px;
}

.kiosk-rail--photos {
    gap: 16px;
}

.kiosk-go {
    margin: -3.5px;
    color: var(--navy);
}

.kiosk-region .kiosk-go {
    color: #fff;
}

/* Ship card */

.kiosk-ship {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    background: #fff;
    box-shadow: var(--shadow);
    color: var(--navy);
}

.kiosk-ship__image {
    display: block;
    height: 164px;
    background: #eef1f4;
}

.kiosk-ship__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kiosk-ship__body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 16px 16px;
}

.kiosk-ship__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    text-align: left;
}

.kiosk-ship__names {
    display: flex;
    flex-direction: column;
    text-transform: uppercase;
}

.kiosk-ship__names strong {
    font-size: 20px;
    font-weight: 600;
}

.kiosk-ship__names small {
    font-size: 16px;
    font-weight: 300;
}

.kiosk-anker {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kiosk-anker__label {
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    white-space: nowrap;
}

.kiosk-anker__icons {
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--gold);
}

/* Detail header of ship and region */

.kiosk-hero {
    display: flex;
    gap: 10px;
    min-height: 434px;
}

.kiosk-hero--region {
    min-height: 304px;
}

.kiosk-hero__image {
    position: relative;
    flex: 0 0 668px;
    background: #eef1f4;
}

.kiosk-hero__image > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kiosk-hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(269.7deg, #fff 0.164%, rgba(255, 255, 255, 0) 29.678%);
}

.kiosk-hero__image .kiosk-back,
.kiosk-journey__image .kiosk-back {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1;
    padding: 4px 20px 4px 4px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.8);
}

.kiosk-hero__copy {
    flex: 1 1 0;
    min-width: 0;
    padding: 48px 48px 0 0;
}

.kiosk-hero__text {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.kiosk-hero h1 {
    font-size: 48px;
    font-weight: 600;
    text-transform: uppercase;
}

.kiosk-hero__meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kiosk-hero__meta .kiosk-anker {
    gap: 16px;
}

.kiosk-hero__meta .kiosk-anker__label,
.kiosk-hero__year {
    font-size: 16px;
    font-weight: 500;
}

.kiosk-hero__year {
    margin-left: auto;
    white-space: nowrap;
}

.kiosk-hero__intro {
    font-size: 16px;
    font-weight: 300;
}

.kiosk-hero--region .kiosk-hero__title {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kiosk-hero__tagline {
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
}

.kiosk-facts,
.kiosk-stats {
    display: flex;
    gap: 11.891px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kiosk-facts li,
.kiosk-stats li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 11.891px 0;
    font-size: 11.891px;
    letter-spacing: 1.1891px;
    text-align: center;
    text-transform: uppercase;
}

.kiosk-facts li {
    flex: 1 1 0;
    min-width: 0;
}

.kiosk-facts strong,
.kiosk-stats strong {
    font-weight: 600;
    white-space: nowrap;
}

.kiosk-facts span:not(.kiosk-facts__icon) {
    font-weight: 500;
    -webkit-hyphens: manual;
    hyphens: manual;
}

.kiosk-facts__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
}

.kiosk-stats li {
    flex: 0 0 133.4px;
}

.kiosk-stats__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
}

.kiosk-stats small {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 13px;
}

/* Cabins */

.kiosk-cabin {
    display: flex;
    flex-direction: column;
    width: 224px;
    height: 255px;
    padding: 0;
    border: 0;
    background: #fff;
    box-shadow: var(--shadow);
    text-align: left;
    cursor: pointer;
}

.kiosk-cabin__image {
    display: block;
    flex: 0 0 132px;
    width: 100%;
    background: #eef1f4;
}

.kiosk-cabin__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kiosk-cabin__body {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
    padding: 8px 16px 16px;
}

.kiosk-cabin__text {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 99px;
    font-size: 16px;
}

.kiosk-cabin__text strong {
    height: 63px;
    overflow: hidden;
    font-weight: 600;
    text-transform: uppercase;
}

.kiosk-cabin__text small {
    font-size: 16px;
    font-weight: 300;
}

.kiosk-dialog {
    padding: 0;
    border: 0;
    max-width: none;
    max-height: none;
    background: #fff;
    box-shadow: var(--shadow-soft);
    color: var(--navy);
}

.kiosk-dialog::backdrop {
    background: rgba(24, 42, 66, 0.6);
}

.kiosk-dialog__close {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.kiosk-dialog__close:focus {
    outline: none;
}

.kiosk-cabin-dialog[open] {
    display: flex;
    gap: 27px;
    width: 1138px;
    height: 442px;
}

.kiosk-cabin-dialog__image {
    position: relative;
    flex: 0 0 555px;
    background: #eef1f4;
}

.kiosk-cabin-dialog__image > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kiosk-cabin-dialog__body {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    padding: 40px 40px 32px 0;
    overflow-y: auto;
}

.kiosk-cabin-dialog__text h2 {
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
}

.kiosk-cabin-dialog__text p {
    margin-top: 16px;
    font-size: 16px;
    font-weight: 300;
}

.kiosk-cabin-dialog__text h3 {
    margin-top: 24px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
}

.kiosk-cabin-dialog__features {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.kiosk-cabin-dialog__features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 300;
}

.kiosk-cabin-dialog__icon {
    display: flex;
    justify-content: center;
    flex: 0 0 25px;
}

.kiosk-cabin-dialog__size {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f8f6f6;
    font-size: 16px;
    font-weight: 300;
}

.kiosk-cabin-dialog__size strong {
    display: block;
    font-weight: 600;
    text-transform: uppercase;
}

/* Photos */

.kiosk-photo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    width: 240px;
    height: 157px;
    padding: 0 16px 8px;
    border: 0;
    overflow: hidden;
    background: #eef1f4;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
}

.kiosk-photo > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kiosk-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--navy) 1.366%, rgba(102, 102, 102, 0) 26.776%);
}

.kiosk-photo__label {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 20px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
}

.kiosk-photo__label span {
    flex: 1 1 0;
    min-width: 0;
}

.kiosk-privacy[open] {
    display: flex;
    flex-direction: column;
    width: min(900px, calc(100vw - 64px));
    height: calc(100vh - 96px);
    border-radius: 20px;
    overflow: hidden;
}

.kiosk-privacy__head {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 32px;
    border-bottom: 1px solid var(--line);
}

.kiosk-privacy__head h2 {
    font-size: 28px;
    font-weight: 600;
    text-transform: uppercase;
}

.kiosk-privacy__head form {
    margin: 0;
}

.kiosk-privacy .kiosk-dialog__close {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

.kiosk-privacy .kiosk-dialog__close .kiosk-icon {
    width: 28px;
    height: 28px;
}

.kiosk-privacy__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 24px 32px 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    font-size: 16px;
    font-weight: 300;
    line-height: 23px;
}

.kiosk-privacy__body h2,
.kiosk-privacy__body h3,
.kiosk-privacy__body h4 {
    margin: 24px 0 8px;
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
}

.kiosk-privacy__body p,
.kiosk-privacy__body ul,
.kiosk-privacy__body ol {
    margin: 0 0 12px;
}

.kiosk-privacy__body strong {
    font-weight: 600;
}

.kiosk-privacy__body a {
    text-decoration: underline;
}

.kiosk-form .wpcf7-list-item-label a {
    font-weight: 600;
    text-decoration: underline;
}

.kiosk-lightbox[open] {
    display: block;
    width: fit-content;
    height: fit-content;
    max-width: calc(100vw - 64px);
    max-height: calc(100vh - 64px);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.kiosk-lightbox > img {
    display: block;
    width: auto;
    height: auto;
    max-width: calc(100vw - 64px);
    max-height: calc(100vh - 64px);
    object-fit: contain;
}

.kiosk-lightbox > form {
    position: absolute;
    inset: 0;
    margin: 0;
    pointer-events: none;
}

.kiosk-lightbox .kiosk-dialog__close {
    top: 12px;
    right: 12px;
    left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(24, 42, 66, 0.28);
    pointer-events: auto;
}

.kiosk-lightbox .kiosk-dialog__close .kiosk-icon {
    width: 24px;
    height: 24px;
}

/* Destinations */

.kiosk-region {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 256px;
    overflow: hidden;
    background: #eef1f4;
    box-shadow: var(--shadow-soft);
    color: #fff;
}

.kiosk-region__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kiosk-region__body {
    position: relative;
    flex: 1 1 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 16px 16px;
    background: linear-gradient(to bottom, rgba(24, 42, 66, 0) 50%, rgba(24, 42, 66, 0.8) 71.289%);
}

.kiosk-region__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    text-align: left;
}

.kiosk-region__text strong {
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
}

.kiosk-region__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    text-transform: uppercase;
    white-space: nowrap;
}

.kiosk-region__sep {
    font-size: 16px;
    font-weight: 300;
}

/* Routes of a destination */

.kiosk-routes {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 0 24px;
}

.kiosk-route {
    display: flex;
    height: 192px;
    background: #fff;
    box-shadow: var(--shadow);
    color: var(--navy);
}

.kiosk-route__image {
    flex: 0 0 344px;
    background: #eef1f4;
}

.kiosk-route__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kiosk-route__body {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    gap: 8px;
    padding: 16px;
}

.kiosk-route__body .kiosk-go {
    align-self: flex-end;
}

.kiosk-route__text {
    flex: 1 1 0;
    min-width: 0;
    align-self: center;
    display: flex;
    flex-direction: column;
}

.kiosk-route__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 16px;
    font-size: 16px;
    font-weight: 300;
}

.kiosk-route__days {
    white-space: nowrap;
}

.kiosk-route__ports {
    display: -webkit-box;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.kiosk-route__title {
    display: -webkit-box;
    margin-top: 4px;
    overflow: hidden;
    color: var(--blue);
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 400;
    line-height: 38px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.kiosk-route__ship {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
}

.kiosk-region-footer {
    display: flex;
    align-items: center;
    gap: 32px;
    height: 237px;
    margin: 0 24px;
    padding-left: 23px;
    overflow: hidden;
    border: 1px solid var(--gold);
    border-radius: 20px;
}

.kiosk-region-footer__qr {
    flex: 0 0 117px;
}

.kiosk-region-footer__qr svg {
    display: block;
    width: 117px;
    height: 117px;
}

.kiosk-region-footer__qr .dark {
    fill: var(--navy);
}

.kiosk-region-footer__text {
    flex: 0 0 313px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kiosk-region-footer__text h2 {
    color: var(--gold);
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
}

.kiosk-region-footer__text p {
    font-size: 16px;
}

.kiosk-region-footer__contact {
    flex: 0 0 276px;
    display: flex;
    align-items: center;
    gap: 22px;
    height: 192px;
    margin-left: auto;
    padding-left: 16px;
    border-left: 1px solid var(--gold);
}

.kiosk-region-footer__contact p {
    flex: none;
    width: 186px;
    font-family: var(--serif);
    font-size: 24px;
    line-height: 29px;
}

.kiosk-region-footer__photo {
    display: block;
    flex: 0 1 280px;
    min-width: 0;
    height: 100%;
    margin-left: -4px;
    object-fit: cover;
}

/* Journey */

.kiosk-journey {
    gap: 32px;
}

.kiosk-journey__top {
    display: flex;
    gap: 16px;
    padding: 24px 24px 0;
}

.kiosk-journey__intro {
    flex: 0 0 468px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.kiosk-journey__image {
    position: relative;
    height: 240px;
    background: #eef1f4;
}

.kiosk-journey__image > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kiosk-journey__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kiosk-journey__title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kiosk-journey__days {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.kiosk-journey h1 {
    color: var(--blue);
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 400;
    line-height: 38px;
}

.kiosk-journey__ports {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.kiosk-journey__lead {
    font-size: 16px;
    font-weight: 300;
    line-height: 21px;
}

.kiosk-journey__lead p + p {
    margin-top: 8px;
}

.kiosk-journey__map {
    flex: 1 1 0;
    min-width: 0;
    height: 582px;
}

.kiosk-journey__map img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.kiosk-day {
    display: flex;
    flex-direction: column;
    width: 280px;
    min-height: 460px;
    height: auto;
    background: #fff;
    box-shadow: var(--shadow);
}

.kiosk-day__text {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 16px;
    overflow: visible;
}

.kiosk-day__label {
    font-size: 14px;
    font-weight: 300;
    text-transform: uppercase;
}

.kiosk-day__text > strong {
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
}

.kiosk-day__copy {
    display: block;
    margin-top: 8px;
    overflow: visible;
    font-size: 16px;
    font-weight: 300;
    line-height: 21px;
}

.kiosk-day__copy p {
    display: inline;
}

.kiosk-day__copy p + p::before {
    content: "\A";
    white-space: pre;
}

.kiosk-day__image {
    display: block;
    flex: 0 0 192px;
    background: #eef1f4;
}

.kiosk-day__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kiosk-services {
    display: flex;
    gap: 32px;
    padding: 0 24px;
}

.kiosk-services--scroll {
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.kiosk-services--scroll::-webkit-scrollbar {
    display: none;
}

.kiosk-services__group {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kiosk-services__icon {
    display: flex;
    align-items: center;
    height: 34px;
    color: var(--gold);
}

.kiosk-services h3 {
    margin: 16px 0 12px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}

.kiosk-services ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: stretch;
    margin: 0;
    padding: 0 20px;
    list-style: none;
}

.kiosk-services li {
    display: flex;
    gap: 6px;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
}

.kiosk-services li .kiosk-icon {
    margin-top: 1px;
}

.kiosk-services li strong {
    font-weight: 600;
}

/* Form pages */

.kiosk-formpage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(540px, 46%);
    grid-template-rows: auto auto 1fr;
    column-gap: 24px;
    align-items: start;
    min-height: 100vh;
    padding: 8px 24px 32px 0;
}

.kiosk-formpage .kiosk-mast {
    grid-column: 1;
    height: auto;
    min-height: 0;
}

.kiosk-formpage .kiosk-mast__copy {
    gap: 24px;
}

.kiosk-formpage__row {
    display: contents;
}

.kiosk-note {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(520px, calc(100% - 24px));
    margin: 0 0 32px 24px;
    padding: 20px 24px 24px;
    border: 1px solid var(--gold);
    border-radius: 20px;
    background: #fff;
}

.kiosk-note__kicker {
    color: var(--gold);
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
    text-transform: uppercase;
}

.kiosk-note__text p {
    font-size: 18px;
    font-weight: 300;
    line-height: 24px;
}

.kiosk-app .kiosk-note__text p + p {
    margin-top: 16px;
}

.kiosk-formpage .kiosk-note .kiosk-benefits {
    gap: 40px;
    width: auto;
    margin: 28px 0 0;
    padding: 0;
    background: none;
}

.kiosk-note .kiosk-benefits li {
    gap: 24px;
}

.kiosk-note .kiosk-benefits__icon {
    flex-basis: 72px;
}

.kiosk-note .kiosk-benefits__icon .kiosk-icon {
    width: 72px;
    height: 72px;
}

.kiosk-note .kiosk-benefits__text {
    gap: 10px;
}

.kiosk-formpage__side {
    grid-column: 2;
    grid-row: 1 / span 3;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 24px;
}

.kiosk-formpage__side .kiosk-form {
    width: 100%;
}

.kiosk-form__catalog {
    display: block;
    align-self: center;
    width: 260px;
    max-width: 70%;
    height: auto;
    margin-top: -4px;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.2));
}

.kiosk-formpage__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.kiosk-formpage .kiosk-formpage__backdrop {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64%;
    object-position: center 75%;
}

.kiosk-formpage::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 64%;
    background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 28%);
    pointer-events: none;
}

.kiosk-form__choices > p {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 500;
}

.kiosk-form__choices .wpcf7-checkbox {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
}

.kiosk-form__consent {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 300;
    line-height: 17px;
}

.kiosk-form__consent strong {
    font-weight: 600;
}

.kiosk-form p.kiosk-form__revoke {
    font-size: 13px;
    font-weight: 300;
    line-height: 17px;
}

.kiosk-form__revoke strong {
    display: block;
    font-weight: 600;
}

.kiosk-form {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: min(540px, 100%);
    padding: 32px 40px;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--shadow-soft);
}

.kiosk-form h2 {
    font-size: 32px;
    font-weight: 600;
    text-transform: uppercase;
}

.kiosk-form .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.kiosk-form p {
    margin: 0;
}

.kiosk-form__row {
    display: flex;
    gap: 22px;
}

.kiosk-form__row > * {
    flex: 1 1 0;
    min-width: 0;
}

.kiosk-form__row--narrow > :first-child {
    flex: 0 0 108px;
}

.kiosk-form__row--wide > :last-child {
    flex: 0 0 112px;
}

.kiosk-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
}

.kiosk-field .wpcf7-form-control-wrap {
    display: block;
}

.kiosk-field input,
.kiosk-field select {
    display: block;
    width: 100%;
    height: 36px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
    color: var(--navy);
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 500;
    -webkit-appearance: none;
    appearance: none;
}

.kiosk-field select {
    height: 36px;
    padding: 0 32px 0 8px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23182a42' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;
}

.kiosk-form__row--salutation > :first-child {
    flex: 0 0 calc(50% - 11px);
}

.kiosk-field input::placeholder {
    color: var(--line);
    opacity: 1;
}

.kiosk-form__checks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kiosk-form .wpcf7-list-item {
    display: block;
    margin: 0;
}

.kiosk-form .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 16px;
    line-height: 21px;
    cursor: pointer;
}

.kiosk-form input[type="checkbox"] {
    flex: none;
    width: 15px;
    height: 15px;
    margin: 3px 0 0;
    accent-color: var(--navy);
}

.kiosk-form .wpcf7-list-item-label strong {
    font-weight: 600;
}

.kiosk-form__submit {
    position: relative;
}

.kiosk-form .wpcf7-submit {
    display: block;
    width: 100%;
    height: 45px;
    border: 0;
    border-radius: 5px;
    background: var(--navy);
    color: #fff;
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.kiosk-form .wpcf7-spinner {
    position: absolute;
    top: 50%;
    right: 12px;
    margin: -12px 0 0;
}

.kiosk-form__note {
    margin-top: -14px !important;
    font-size: 14px;
    font-weight: 500;
}

.kiosk-form .wpcf7-not-valid-tip {
    margin-top: 4px;
    color: #b42318;
    font-size: 14px;
    font-weight: 500;
}

.kiosk-form .wpcf7 form .wpcf7-response-output {
    margin: 0;
    padding: 8px 12px;
    border-width: 1px;
    border-radius: 5px;
    font-size: 14px;
}

.kiosk-prize {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 17px;
    width: min(520px, 100%);
    padding: 15px 16px 18px;
    border: 1px solid var(--gold);
    border-radius: 20px;
    background: #fff;
}

.kiosk-prize__top {
    display: flex;
    gap: 17px;
}

.kiosk-prize__copy {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
}

.kiosk-prize__kicker {
    color: var(--gold);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

.kiosk-prize h2 {
    margin-top: 6px;
    color: var(--blue);
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 400;
    line-height: 38px;
}

.kiosk-prize__copy p {
    margin-top: 18px;
    font-size: 16px;
    font-weight: 300;
    line-height: 21px;
}

.kiosk-prize__image {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    height: 240px;
    border-radius: 20px;
    object-fit: cover;
}

.kiosk-prize__facts,
.kiosk-prize__included {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kiosk-prize__facts li {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 5px;
    font-size: 16px;
    text-align: center;
}

.kiosk-prize__facts li + li::before {
    content: "";
    position: absolute;
    top: 25px;
    left: 0;
    width: 1px;
    height: 60px;
    background: var(--gold);
}

.kiosk-prize__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36.874px;
}

.kiosk-prize__included .kiosk-icon {
    color: var(--gold);
}

.kiosk-prize__included li {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    line-height: 21px;
}

.kiosk-benefits {
    display: flex;
    flex-direction: column;
    gap: 72px;
    width: min(489px, 100%);
    margin: 0;
    padding: 47px 0 0 24px;
    list-style: none;
}

.kiosk-benefits li {
    display: flex;
    align-items: center;
    gap: 32px;
}

.kiosk-benefits__icon {
    flex: 0 0 84px;
    display: flex;
    justify-content: center;
    color: var(--gold);
}

.kiosk-benefits__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 280px;
}

.kiosk-benefits__text strong {
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
    text-transform: uppercase;
}

.kiosk-benefits__text span {
    font-size: 16px;
    line-height: 21px;
}

/* Start */

.kiosk-stage {
    position: relative;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100vh;
    min-height: 1024px;
    padding-top: 40px;
    overflow: hidden;
    color: #fff;
    text-align: center;
}

.kiosk-stage__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kiosk-stage__veil {
    position: absolute;
    inset: 0;
    background: radial-gradient(1044px 573px at 624px 586px, rgba(24, 42, 66, 0), rgba(24, 42, 66, 0.48));
}

.kiosk-stage__logo {
    position: relative;
    display: block;
    width: 328px;
    height: 114px;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

.kiosk-stage__text {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 32px;
}

.kiosk-stage__text h1 {
    font-size: 36px;
    font-weight: 500;
    letter-spacing: 3.6px;
    text-transform: uppercase;
}

.kiosk-stage__text p {
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 2.4px;
}

.kiosk-stage__tiles {
    position: absolute;
    left: 50%;
    bottom: 117px;
    display: flex;
    gap: 10px;
    width: min(1166px, calc(100% - 40px));
    transform: translateX(-50%);
}

.kiosk-tile {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 363px;
    padding: 36px 16px 15px;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 20px;
    color: #fff;
}

.kiosk-tile__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kiosk-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(24, 42, 66, 0.6);
}

.kiosk-tile > :not(.kiosk-tile__photo) {
    position: relative;
    z-index: 1;
}

.kiosk-tile__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
}

.kiosk-tile__line {
    display: block;
}

.kiosk-tile__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.kiosk-tile__text {
    min-height: 42px;
    margin-top: 38px;
    font-size: 16px;
    line-height: 21px;
    white-space: pre-line;
}

.kiosk-tile__arrow {
    margin-top: auto;
}

.kiosk-stage__ellipse {
    position: absolute;
    left: 4.52%;
    bottom: -197.22px;
}

.kiosk-stage__hint {
    position: absolute;
    left: 28.54%;
    right: 36.69%;
    bottom: 19.78px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.kiosk-stage__hint span {
    white-space: nowrap;
}

/* Builder pages */

.kiosk-canvas {
    padding: 24px;
}

.kiosk-canvas__header h1 {
    font-size: 48px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Beaver Builder darf den Screen nicht einrücken. */

.kiosk-app .fl-builder-content,
.kiosk-app .fl-row,
.kiosk-app .fl-row-content-wrap,
.kiosk-app .fl-row-content,
.kiosk-app .fl-col,
.kiosk-app .fl-col-group,
.kiosk-app .fl-col-content,
.kiosk-app .fl-module,
.kiosk-app .fl-module-content {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none;
    width: 100%;
}

.kiosk-app .fl-row-fixed-width,
.kiosk-app .fl-row-content {
    max-width: none !important;
    width: 100% !important;
}

.kiosk-app .fl-module-content p {
    margin: 0;
}

/* Unter iPad-Breite schrumpft der Screen, statt über den Rand zu laufen. */

@media (max-width: 1200px) {
    .kiosk-hero,
    .kiosk-journey__top {
        flex-direction: column;
    }

    .kiosk-hero__image {
        flex: none;
        width: 100%;
        height: 320px;
    }

    .kiosk-hero__copy {
        padding: 24px;
    }

    .kiosk-journey__intro {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 980px) {
    .kiosk-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-right: 24px;
    }

    .kiosk-mast {
        height: auto;
        min-height: 0;
    }

    .kiosk-mast--tall {
        height: auto;
    }

    .kiosk-mast__image {
        flex-basis: 42%;
        height: auto;
        min-height: 220px;
    }

    .kiosk-formpage {
        display: flex;
        flex-direction: column;
        padding: 0 0 32px;
    }

    .kiosk-formpage__row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        margin-top: 0;
        padding: 0 16px 32px;
    }

    .kiosk-formpage .kiosk-mast,
    .kiosk-formpage__side {
        grid-column: auto;
        grid-row: auto;
        width: auto;
        margin: 0 16px;
    }

    .kiosk-formpage .kiosk-formpage__backdrop {
        position: relative;
        order: 5;
        width: 100%;
        height: 240px;
        object-position: center 72%;
    }

    .kiosk-note {
        grid-row: auto;
        width: auto;
        margin: 0 16px;
    }

    .kiosk-formpage::after {
        display: none;
    }

    .kiosk-prize__copy {
        flex-basis: auto;
        min-width: 0;
    }

    .kiosk-stage__hint {
        left: 16px;
        right: 16px;
    }

    .kiosk-stage__hint span,
    .kiosk-tile__title {
        white-space: normal;
    }
}

@media (max-width: 760px) {
    .kiosk-app {
        flex-direction: column;
    }

    .kiosk-nav {
        position: sticky;
        flex: none;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        top: 0;
        width: 100%;
        height: auto;
        padding: 12px 12px 8px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .kiosk-nav__logo img {
        width: 120px;
        height: auto;
    }

    .kiosk-nav__items {
        flex-direction: row;
        gap: 0;
        width: auto;
        margin: 0;
    }

    .kiosk-nav__item {
        gap: 6px;
        padding: 8px 10px;
    }

    .kiosk-nav__icon {
        height: 28px;
    }

    .kiosk-nav__icon .kiosk-icon {
        width: 28px;
        height: 28px;
    }

    .kiosk-nav__label {
        font-size: 10px;
        letter-spacing: 0.06em;
    }

    .kiosk-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .kiosk-mast,
    .kiosk-mast--tall {
        flex-direction: column-reverse;
    }

    .kiosk-mast__image {
        flex: none;
        width: 100%;
        max-width: none;
        height: 200px;
        min-height: 0;
    }

    .kiosk-mast__copy {
        gap: 20px;
    }

    .kiosk-benefits {
        gap: 28px;
        padding: 8px 16px 0;
    }

    .kiosk-stage {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        padding-bottom: 24px;
    }

    .kiosk-stage__tiles {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
        width: calc(100% - 32px);
        margin: 28px auto 0;
        flex-wrap: wrap;
    }

    .kiosk-tile {
        flex: 1 1 150px;
        height: auto;
        min-height: 220px;
    }

    .kiosk-stage__ellipse {
        display: none;
    }

    .kiosk-stage__hint {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        margin: 20px 16px 0;
    }
}