:root {
 --warm: #FFFEFA;
 --background: #F3F0E8;
 --petrol: #134251;
 --oker: #EF9D0C;
 --roest: #DD602D;
 --green: #C3E6D3;
 --text: #252525;
}

* {
 box-sizing: border-box;
}

html {
 overflow-y: scroll;
 scroll-padding-top: 2rem;
 scrollbar-gutter: stable;
}

html:has(body.shop-info-open, body.shop-gallery-open, body.shop-order-open) {
 overflow-y: hidden;
}

body {
 display: flex;
 flex-direction: column;
 min-height: 100vh;
 min-height: 100dvh;
 margin: 0;
 background: var(--warm);
 color: var(--text);
 font-family: 'Inter', sans-serif;
 line-height: 1.65;
}

a {
 color: inherit;
 text-underline-offset: 0.25em;
}

a:focus-visible {
 outline: 3px solid var(--roest);
 outline-offset: 5px;
}

.container {
 width: min(1200px, calc(100% - 64px));
 margin-inline: auto;
}

.skip-link {
 position: absolute;
 top: 12px;
 left: 12px;
 z-index: 2;
 padding: 12px 20px;
 background: var(--warm);
 color: var(--petrol);
 transform: translateY(-200%);
}

.skip-link:focus {
 transform: translateY(0);
}

.site-header {
 color: var(--petrol);
 border-bottom: 1px solid var(--oker); 
}

.header-inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
 padding-block: 25px;
}

.brand {
 display: flex;
 align-items: center;
 gap: 16px;
 font-size: 24px;
 font-weight: 800; 
 text-decoration: none;
 white-space: nowrap;
}

.brand-logo {
 display: block;
 width: 80px;
 height: 80px;
 object-fit: contain;
 flex-shrink: 0;
}

.brand-copy {
 display: flex;
 flex-direction: column;

 line-height: 1.2;
}

.brand-subtitle {
 color: var(--roest);
 font-size: 14px;
 font-weight: 500;
 letter-spacing: 0;
}

.menu {
 display: flex;
 flex-wrap: wrap;
 gap: 8px 22px;
 margin: 0;
 padding: 0;
 list-style: none;
}

.menu a {
 display: inline-block;
 padding-block: 5px;
 
 font-weight: 500;
 text-decoration: none;
}

.menu a:hover, .menu a[aria-current="page"] {
 color: var(--petrol);
 text-decoration: underline;
}

.hero {
 display: grid;
 grid-template-columns: 1.5fr 1fr;
 align-items: center;
 gap: 70px;
 padding-block: 90px;
}

h1, h2, h3 {
 margin-top: 0;
 color: var(--petrol);
 line-height: 1.15; 
}

h1 {
 margin-bottom: 25px;
 font-size: clamp(36px, 4.4vw, 58px);
 font-size: clamp(30px, 3.8vw, 48px);
 font-weight: 800;
}

.hero-copy p {
 max-width: 510px;
 margin: 0 0 30px;
 font-size: 19px;
}

.button {
 display: inline-flex;
 align-items: center;
 gap: 24px;
 padding: 14px 23px;
 border-radius: 12px;
 background: var(--oker);
 color: var(--text);
 font-weight: 600;
 text-decoration: none;
}

.secundary-action {
 background: var(--warm);
}

.button.roest {
 background: var(--roest);
 color:var(--warm);
}

.button:hover {
 box-shadow: 0 4px 0 var(--petrol);
}

.game-art {
 position: relative;
 height: 320px;
}

.game-card {
 position: absolute;
 inset: 22px 50px;
 border-radius: 20px;
}

.card-back {
 background: var(--roest);
 transform: rotate(-15deg) translate(-15px, 5px);
}

.card-middle {
 background: var(--oker);
 transform: rotate(10deg) translate(18px, -3px);
}

.card-front {
 display: flex;
 align-items: center;
 padding: 30px;
 background: var(--petrol);
 color: var(--warm);
 transform: rotate(-3deg);
 box-shadow: 0 15px 30px #13425120;
 font-size: clamp(22px, 2.5vw, 32px);
 font-weight: 700;
 line-height: 1.4;
 letter-spacing: -0.03em;
}

.card-front img {
 display: block;
 width: 100%;
 max-height: 100%;
 min-width: 0;
 object-fit: contain;
}

.play-section > .container > h2 + p,
.discover-section > .container > h2 + p {
 margin-top: 0;
}

.play-section {
 padding-block: 32px;
 background: var(--background);
}

h2 {
 margin-bottom: 8px;
 font-size: clamp(26px, 3vw, 34px);
}

 a {color:var(--petrol);}

.play-options {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 24px;
}

.play-option {
 display: grid;
 grid-template-columns: minmax(0, 1fr) 180px;
 gap: 20px;
 padding: 32px;
 border: 1px solid #13425118;
 border-radius: 20px;
 background: var(--warm);
}

.play-option-copy {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 min-width: 0;
}

.play-option-photo {
 display: block;
 width: 180px;
 height: 140px;
 object-fit: cover;
 align-self: start;
 border-radius: 12px;
}

.play-option.guided {
 background: var(--green);
}

h3 {
 margin-bottom: 15px;
 font-size: 26px;
}

.play-option p {
 max-width: 480px;
 margin: 0 0 26px;
}

.play-option .button {
 margin-top: auto;
}

.text-link {
 display: inline-flex;
 align-items: center;
 gap: 18px;
 margin-top: auto;
 color: var(--petrol);
 font-weight: 600;
}

.site-footer {
 margin-top: auto;
 background-color: var(--petrol);
 color:var(--warm);
 padding-right:8px;
 padding-left:8px;
}

.site-footer a {
 background-color: var(--petrol);
 color:var(--warm);
}

.site-footer .button {  
  background: var(--oker);
  color: var(--text);  
}

.footer-diemoetblijven {
 padding-block: 64px 56px;
 text-align: center;
}

.footer-diemoetblijven h2, .footer-diemoetblijven h3{
 margin: 0;
 color: var(--warm);
}

.footer-diemoetblijven p {
 max-width: 760px;
 margin: 14px auto 24px;
}

.footer-columns {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 32px;
 padding-bottom: 48px;
}

.footer-columns > :last-child {
 justify-self: end;
}

.footer-columns h3, .footer-columns h4 {
 margin: 0;
 color: var(--warm);
}

.footer-columns p {
 margin: 0;
 font-size:0.75em;
 margin-top:8px;
}
.footer-columns p.l {margin: 0;}
.footer-columns p.l2 {font-size:0.7em;}

.footer-icon {
 display: inline-flex;
 align-items: center;
 gap: 8px;
}

.footer-icon .material-symbols-outlined {font-size:1.2em;}

.footer-email .material-symbols-outlined {
 font-size: 20px;
 line-height: 1;
}

.discover-section {
 padding-block: 32px;
 background: #DCE8EA;
}

.discover-cards {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 24px;
}

.discover-cards-two-columns {
 grid-template-columns: repeat(2, minmax(0, 1fr));
}

.discover-card {
 padding: 28px;
 border-radius: 20px;
 background: var(--warm);
}

.discover-card h3 {
 font-size: 23px;
}

.discover-cards-two-columns h3 {
 display: flex;
 align-items: flex-start;
 gap: 10px;
}

.discover-cards-two-columns h3 .material-symbols-outlined {
 flex-shrink: 0;
 font-size: 28px;
 line-height: inherit;
}

.discover-card p {
 margin: 0;
 margin-bottom:8px;
}

.footer-inner {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 20px;
 min-height: 32px; 
 font-size: 12px;
}

.featured-section {
 padding-block: 32px;
 background: var(--background);
}

.featured-heading {
 display: flex;
 align-items: baseline;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 8px 24px;
 margin-bottom: 8px;
}

.featured-heading h2 {
 margin-bottom: 0;
}

.featured-heading a {
 margin-left: auto;
 color: var(--petrol);
}

.featured-section > .container > .featured-heading + p {
 margin-top: 0;
 margin-bottom: 28px;
}

.featured-games {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 24px;
}

.featured-game {
 display: flex;
 flex-direction: column;
 min-width: 0;
 overflow: hidden;
 border-radius: 20px;
 background: var(--warm);
}

.featured-game-photo {
 display: block;
 width: 100%;
 height: 220px;
 object-fit: cover;
}

.featured-game-copy {
 display: flex;
 flex: 1;
 flex-direction: column;
 padding: 24px;
}

.featured-game-copy p {
 margin: 0 0 24px;
}

.featured-game-copy .featured-game-topic {
 margin-bottom: 12px;
 color: var(--oker);
 font-size: 14px;
 font-weight: 600;
}

.featured-game h3 {
 color: var(--petrol);
}

.featured-game-order {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 12px;
 margin-top: auto;
}

.featured-game-order .button {
 padding: 12px 16px;
 font-size: 14px;
}

.featured-game-price {
 margin-left: auto;
 color: var(--petrol);
 font-size: 20px;
 font-weight: 700;
 white-space: nowrap;
}

.shop-intro-layout {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
 align-items: center;
 gap: 48px;
}

.shop-intro {
 padding-block: 64px 52px;
}

.shop-intro-box {
 padding: 28px;
 border-radius: 20px;
 background: var(--background);
}

.shop-intro-box p {
 margin: 0;
}

.shop-intro-box .KLEIN {
 margin-top:8px;
 margin-bottom:8px;
}


.shop-eyebrow {
 margin: 0 0 10px;
 color: var(--petrol);
 font-weight: 700;
}

.shop-intro h1 {
 max-width: 850px;
}

.shop-intro > p:last-child {
 max-width: 760px;
 margin-bottom: 0;
 font-size: 19px;
}

.shop-catalog {
 padding-block: 48px 72px;
 background: var(--background);
}

.shop-catalog-heading {
 margin-bottom: 28px;
}

.shop-catalog-heading p {
 margin: 0;
}

.shop-games {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 24px;
}

.shop-game {
 display: flex;
 flex-direction: column;
 min-width: 0;
 overflow: hidden;
 border-radius: 20px;
 background: var(--warm);
}

.shop-game-image {
 display: block;
 width: 100%;
 aspect-ratio: 4 / 3;
 object-fit: cover;
}

.shop-game-gallery-trigger {
 display: block;
 width: 100%;
 padding: 0;
 border: 0;
 background: none;
 cursor: zoom-in;
}

.shop-game-gallery-trigger:focus-visible {
 outline: 3px solid var(--roest);
 outline-offset: -3px;
}

.shop-info-overlay {
 position: fixed;
 inset: 0;
 z-index: 25;
 display: grid;
 place-items: center;
 padding: 20px;
 background: #134251b8;
}

.shop-info-overlay[hidden] {
 display: none;
}

.shop-info-open {
 overflow: hidden;
}

.shop-info-dialog {
 display: flex;
 flex-direction: column;
 width: min(100%, 560px);
 min-height: 240px;
 max-height: calc(100dvh - 40px);
 overflow: auto;
 padding: 32px;
 border-radius: 20px;
 background: var(--warm);
 box-shadow: 0 20px 60px #0004;
}

.shop-info-dialog h2 {
 margin: 0 0 20px;
 color: var(--petrol);
}

.shop-info-dialog p {
 margin: 0 0 28px;
 line-height: 1.6;
}

.shop-info-close {
 align-self: center;
 margin-top: auto;
 padding: 12px 28px;
 border: 0;
 font: inherit;
 font-weight: 600;
 cursor: pointer;
}

.shop-info-close:focus-visible, .shop-info-trigger:focus-visible {
 outline: 3px solid var(--roest);
 outline-offset: 3px;
}

.shop-gallery-overlay {
 position: fixed;
 inset: 0;
 z-index: 30;
 display: grid;
 place-items: center;
 padding: 20px;
 background: #134251d9;
}

.shop-gallery-overlay[hidden] {
 display: none;
}

.shop-gallery-open {
 overflow: hidden;
}

.shop-gallery-dialog {
 width: min(100%, 1120px);
 max-height: calc(100dvh - 40px);
 overflow: auto;
 padding: 24px;
 border-radius: 20px;
 background: var(--warm);
 box-shadow: 0 20px 60px #0004;
}

.shop-gallery-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
 margin-bottom: 18px;
}

.shop-gallery-header h2 {
 margin: 0;
 color: var(--petrol);
}

.shop-gallery-close {
 flex: none;
 padding: 8px 12px;
 border: 1px solid var(--petrol);
 border-radius: 8px;
 background: transparent;
 color: var(--petrol);
 font: inherit;
 cursor: pointer;
}

.shop-gallery-close span {
 margin-left: 5px;
 font-size: 24px;
 line-height: 0;
 vertical-align: -2px;
}

.shop-gallery-content {
 display: grid;
 grid-template-columns: minmax(0, 1fr) 156px;
 align-items: start;
 gap: 16px;
}

.shop-gallery-main-image {
 display: block;
 width: 100%;
 height: min(65dvh, 680px);
 min-height: 320px;
 border-radius: 12px;
 object-fit: cover;
}

.shop-gallery-thumbnails {
 display: flex;
 flex-direction: column;
 gap: 12px;
 max-height: min(65dvh, 680px);
 overflow-y: auto;
}

.shop-gallery-thumbnail {
 flex: none;
 width: 100%;
 padding: 0;
 overflow: hidden;
 border: 3px solid transparent;
 border-radius: 10px;
 background: none;
 cursor: pointer;
}

.shop-gallery-thumbnail[aria-pressed="true"] {
 border-color: var(--oker);
}

.shop-gallery-thumbnail img {
 display: block;
 width: 100%;
 aspect-ratio: 4 / 3;
 object-fit: cover;
}

.shop-gallery-close:focus-visible, .shop-gallery-thumbnail:focus-visible {
 outline: 3px solid var(--roest);
 outline-offset: 3px;
}

.shop-game-content {
 flex: 1;
 padding: 25px 26px 12px;
}

.shop-game-theme {
 margin: 0 0 8px;
 color: var(--petrol);
 font-size: 14px;
 font-weight: 700;
}

.shop-game h3 {
 margin-bottom: 14px;
}

.shop-game-description {
 margin: 0 0 22px;
}

.shop-game-details {
 margin: 0;
}

.shop-game-details > div {
 display: grid;
 grid-template-columns: 104px minmax(0, 1fr);
 gap: 12px;
 padding-block: 10px;
 border-top: 1px solid var(--background);
}

.shop-game-details dt {
 color: var(--petrol);
 font-weight: 700;
}

.shop-game-details dd {
 margin: 0;
}

.shop-game-footer {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 18px;
 padding: 20px 26px 26px;
 border-top: 1px solid var(--background);
}

.shop-game-price {
 display: flex;
 flex-direction: column;
 margin: 0;
 line-height: 1.2;
}

.shop-game-price span {
 font-size: 14px;
}

.shop-game-price strong {
 color: var(--petrol);
 font-size: 25px;
}

.shop-game-footer .button {
 padding: 12px 16px;
 border: 0;
 font: inherit;
 font-size: 14px;
 font-weight: 600;
 cursor: pointer;
}

.shop-order-overlay {
 position: fixed;
 inset: 0;
 z-index: 20;
 display: grid;
 place-items: center;
 padding: 20px;
 background: #134251b8;
}

.shop-order-overlay[hidden] {
 display: none;
}

.shop-order-open {
 overflow: hidden;
}

.shop-order-dialog {
 width: min(100%, 1280px);
 max-height: calc(100vh - 40px);
 max-height: calc(100dvh - 40px);
 overflow: auto;
 padding: 32px;
 border-radius: 20px;
 background: var(--warm);
 box-shadow: 0 20px 60px #0004;
}

.shop-order-dialog h2 {
 margin: 0 0 24px;
 color: var(--petrol);
}

.shop-order-options {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 align-items: end;
 gap: 16px;
}

.shop-order-field {
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.shop-order-field label, .shop-order-fields legend {
 font-weight: 700;
}

.shop-order-field input, .shop-order-field select, .shop-order-field textarea {
 width: 100%;
 padding: 11px 12px;
 border: 1px solid var(--petrol);
 border-radius: 8px;
 background: #fff;
 color: var(--text);
 font: inherit;
}

.shop-order-field textarea {
 resize: vertical;
}

.shop-order-field :is(input, select, textarea):focus-visible, .shop-order-actions button:focus-visible, .shop-game-footer button:focus-visible {
 outline: 3px solid var(--roest);
 outline-offset: 3px;
}

.shop-order-field select:disabled {
 background: var(--background);
 color: var(--text);
 opacity: 1;
}

.shop-order-fields {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 16px;
 margin: 24px 0 0;
 padding: 0;
 border: 0;
}

.shop-order-fields legend {
 margin-bottom: 12px;
 padding: 0;
 font-size: 20px;
}

.shop-order-field-wide {
 grid-column: 1 / -1;
}

.shop-order-actions {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 18px;
 margin-top: 24px;
}

.shop-order-message {
 margin: 20px 0 0;
 padding: 12px 16px;
 border-radius: 8px;
 background: var(--background);
}

.shop-order-message[hidden] {
 display: none;
}

.shop-order-message[data-state="error"] {
 color: #9b2525;
}

.shop-order-notice {
 position: fixed;
 top: 50%;
 left: 50%;
 z-index: 25;
 max-width: min(420px, calc(100% - 40px));
 margin: 0;
 padding: 14px 18px;
 border-radius: 10px;
 background: var(--petrol);
 color: var(--warm);
 box-shadow: 0 8px 24px #0003;
 text-align: center;
 transform: translate(-50%, -50%);
 pointer-events: none;
}

.shop-order-notice[hidden] {
 display: none;
}

.shop-order-actions button {
 border: 0;
 font: inherit;
 font-weight: 600;
 cursor: pointer;
}

.shop-order-cancel {
 padding: 10px 0;
 background: none;
 color: var(--petrol);
 text-decoration: underline;
}

.session-intro {
 padding-block: 48px;
}

.session-intro p {
 max-width: 850px;
 margin-bottom: 0;
}

.session-process {
 padding-block: 48px;
 background: var(--background);
}

.session-process-eyebrow {
 margin: 0 0 6px;
 color: var(--petrol);
 font-weight: 600;
}

.session-process-lead {
 max-width: 720px;
 margin: 0 0 32px;
}

.session-steps {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 24px;
}

.session-step {
 display: flex;
 flex-direction: column;
 min-width: 0;
 overflow: hidden;
 border-radius: 20px;
 background: var(--warm);
}

.session-step-content {
 flex: 1;
 padding: 30px;
}

.session-step-photo {
 display: block;
 flex-shrink: 0;
 width: 100%;
 aspect-ratio: 3 / 2;
 object-fit: cover;
}

.session-step h4 {
 color:var(--roest);
 font-size:0.8em;
 margin:0;
}

.session-step-top {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 16px;
 margin-bottom: 18px;
 color: var(--petrol);
}

.session-step-number {
 color: var(--roest);
 font-size: 44px;
 font-weight: 800;
 line-height: 1;
}

.session-step:nth-child(2) .session-step-number {
 color: var(--oker);
}

.session-step:nth-child(3) .session-step-number {
 color: var(--petrol);
}

.session-step-top .material-symbols-outlined {
 font-size: 28px;
}

.session-step h3 {
 margin-bottom: 12px;
 font-size: 22px;
}

.session-step p {
 margin: 0;
}

.session-details {
 padding-block: 48px;
}

.session-details-title {
 margin-bottom: 24px;
}

.session-details-item {
 margin-bottom: 12px;
 padding-inline: 24px;
 border-radius: 16px;
 background: var(--background);
}

.session-details-item:last-child {
 margin-bottom: 0;
}

.session-details-item summary {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
 padding-block: 22px;
 list-style: none;
 color: var(--petrol);
 cursor: pointer;
}

.session-details-item summary::-webkit-details-marker {
 display: none;
}

.session-details-item summary:hover {
 color: var(--roest);
}

.session-details-item summary:focus-visible {
 outline: 3px solid var(--roest);
 outline-offset: 4px;
}

.session-details-item h2 {
 margin: 0;
 color: inherit;
 font-size: clamp(20px, 2vw, 26px);
 line-height: 1.3;
}

.session-details-icon {
 position: relative;
 flex: none;
 width: 34px;
 height: 34px;
 border: 2px solid currentColor;
 border-radius: 50%;
}

.session-details-icon::before, .session-details-icon::after {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 12px;
 height: 2px;
 background: currentColor;
 content: '';
 transform: translate(-50%, -50%);
}

.session-details-icon::after {
 transform: translate(-50%, -50%) rotate(90deg);
}

.session-details-item[open] .session-details-icon::after {
 transform: translate(-50%, -50%);
}

.session-details-content {
 max-width: 900px;
 padding: 0 48px 24px 0;
}

.session-details-content p {
 margin: 0 0 14px;
}

.session-details-content p:last-child {
 margin-bottom: 0;
}

.contact-intro {
 display: grid;
 grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.8fr);
 align-items: center;
 gap: 64px;
 padding-block: 72px;
}

.contact-intro-copy p {
 max-width: 670px;
 margin: 0;
 font-size: 19px;
}

.contact-direct {
 padding: 26px 28px;
  border-radius: 20px;
 background: var(--background);
}


.contact-direct p {
 margin: 0 0 12px;
}

.contact-direct p:last-child {
 margin-bottom: 0;
}

.contact-direct a {
 color: var(--petrol);
 font-weight: 700;
}

.contact-section {
 padding-block: 64px 80px;
 background: var(--background);
}

.contact-layout {
 display: grid;
 grid-template-columns: minmax(220px, 0.65fr) minmax(0, 1.5fr);
 align-items: start;
 gap: 48px;
}

.contact-guidance {
 padding-top: 12px;
}

.contact-guidance h2 {
 margin-bottom: 18px;
}

.contact-guidance p {
 margin: 0 0 18px;
}

.contact-guidance ul {
 margin: 0 0 20px;
 padding-left: 22px;
}

.contact-guidance li {
 margin-bottom: 10px;
}

.contact-form {
 padding: 34px;
 border-radius: 20px;
 background: var(--warm);
}

.contact-form fieldset {
 margin: 0 0 32px;
 padding: 0;
 border: 0;
}

.contact-form legend {
 margin-bottom: 16px;
 padding: 0;
 color: var(--petrol);
 font-size: 22px;
 font-weight: 700;
}

.contact-methods, .contact-field-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 16px;
}

.contact-method {
 display: flex;
 align-items: flex-start;
 gap: 12px;
 padding: 15px 16px;
 border: 1px solid var(--petrol);
 border-radius: 12px;
 cursor: pointer;
}

.contact-method:has(input:checked) {
 background: var(--green);
}

.contact-method:focus-within {
 outline: 3px solid var(--roest);
 outline-offset: 3px;
}

.contact-method input {
 flex: 0 0 auto;
 margin-top: 6px;
 accent-color: var(--petrol);
}

.contact-method strong, .contact-method small {
 display: block;
}

.contact-method strong {
 color: var(--petrol);
}

.contact-method small {
 font-size: 14px;
 line-height: 1.45;
}

.contact-field {
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.contact-field[hidden] {
 display: none;
}

.contact-field-full {
 grid-column: 1 / -1;
}

.contact-field label {
 font-weight: 700;
}

.contact-optional {
 font-size: 14px;
 font-weight: 400;
}

.contact-field input, .contact-field select, .contact-field textarea {
 width: 100%;
 min-height: 50px;
 padding: 11px 12px;
 border: 1px solid var(--petrol);
 border-radius: 8px;
 background: #fff;
 color: var(--text);
 font: inherit;
}

.contact-field textarea {
 resize: vertical;
}

.contact-field :is(input, select, textarea):focus-visible, .contact-submit:focus-visible {
 outline: 3px solid var(--roest);
 outline-offset: 3px;
}

.contact-help {
 margin: 14px 0 0;
 font-size: 14px;
}

.contact-honeypot {
 position: absolute;
 left: -10000px;
 width: 1px;
 height: 1px;
 overflow: hidden;
}

.contact-status {
 margin: 0 0 20px;
 padding: 14px 18px;
 border-radius: 10px;
 background: var(--green);
}

.contact-status[hidden] {
 display: none;
}

.contact-status[data-state="error"] {
 background: #fce8e4;
 color: #9b2525;
}

.contact-submit {
 border: 0;
 font: inherit;
 font-weight: 600;
 cursor: pointer;
}

@media (max-width: 900px) {
 .contact-intro, .contact-layout {
  grid-template-columns: 1fr;
  gap: 32px;
 }

 .contact-intro {
  padding-block: 56px;
 }

 .shop-order-options,
 .shop-order-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }

 .shop-intro-layout {
  grid-template-columns: 1fr;
  gap: 0;
  padding-bottom: 48px;
 }

 .shop-intro {
  padding-bottom: 24px;
 }

 .session-steps {
  grid-template-columns: 1fr;
 }

 .session-details-content {
  padding-right: 0;
 }
}

@media (max-width: 1000px) {
 .featured-games {
  grid-template-columns: 1fr;
 }

 .shop-games {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}

.footer-inner p {
 margin: 0;
}

@media (max-width: 1100px) {
 .discover-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }

 .header-inner {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
 }

 .hero {
  gap: 25px;
 }

 .game-card {
  inset-inline: 25px;
 }
}

@media (max-width: 700px) {
 .shop-gallery-dialog {
  padding: 16px;
 }

 .shop-gallery-content {
  grid-template-columns: 1fr;
 }

 .shop-gallery-main-image {
  height: min(52dvh, 480px);
  min-height: 220px;
 }

 .shop-gallery-thumbnails {
  flex-direction: row;
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
 }

 .shop-gallery-thumbnail {
  width: 104px;
 }

 .contact-section {
  padding-block: 48px 64px;
 }

 .contact-form {
  padding: 24px;
 }

 .contact-methods, .contact-field-grid {
  grid-template-columns: 1fr;
 }

 .shop-order-dialog {
  padding: 24px;
 }

 .shop-order-options {
  grid-template-columns: 1fr;
  gap: 16px;
 }

 .shop-order-fields {
  grid-template-columns: 1fr;
 }

 .shop-games {
  grid-template-columns: 1fr;
 }

 .shop-intro {
  padding-top: 48px;
 }

 .footer-columns {
  grid-template-columns: 1fr;
 }

 .footer-columns > :last-child {
  justify-self: start;
 }

 .footer-inner {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-bottom: 12px;
 }

 .discover-cards {
  grid-template-columns: 1fr;
 }

 .container {
  width: calc(100% - 40px);
 }

 .brand {
  gap: 12px;
  white-space: normal;
 }

 .brand-logo {
  width: 64px;
  height: 64px;
 }

 .menu {
  gap: 6px 18px;
 }

 .hero {
  grid-template-columns: 1fr;
  gap: 35px;
  padding-block: 50px;
 }

 .game-art {
  width: min(330px, 100%);
  height: 240px;
  margin-inline: auto;
 }

 .card-front {
  font-size: 26px;
 }

 .play-options {
  grid-template-columns: 1fr;
 }

 .play-option {
  padding: 26px;
 }
}

.KLEIN {font-size:0.8em!important;}
.tekst {border:none;color:auto;background:inherit;outline:none;font-size: inherit;}

.question-intro {
 display: grid;
 grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
 align-items: center;
 gap: 64px;
 padding-block: 64px;
}

.question-intro-copy p {
 max-width: 650px;
 margin: 0;
 font-size: 19px;
}

.question-intro-photo {
 display: block;
 width: 100%;
 aspect-ratio: 4 / 3;
 border-radius: 20px;
 object-fit: cover;
}

.question-context {
 padding-block: 64px;
 background: var(--background);
}

.question-context-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 align-items: center;
 gap: 48px;
}

.question-context-lead {
 margin: 0;
 color: var(--petrol);
 font-size: clamp(20px, 2vw, 25px);
 font-weight: 600;
 line-height: 1.5;
}

.question-context-card {
 padding: 32px;
 border-radius: 20px;
 background: var(--warm);
 font-size: 18px;
}

.question-context-card p {
 margin: 0;
}

.question-framing {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
 gap: 48px;
 padding-block: 72px 88px;
}

.question-framing h2 {
 margin: 0;
}

.question-framing-copy p:first-child {
 margin-top: 0;
}

.question-framing-copy p:last-child {
 margin-bottom: 0;
 padding-left: 22px;
 border-left: 4px solid var(--oker);
}

@media (max-width: 900px) {
 .question-intro, .question-context-grid, .question-framing {
  grid-template-columns: 1fr;
  gap: 28px;
 }

 .question-intro {
  padding-block: 48px;
 }

 .question-context {
  padding-block: 48px;
 }

 .question-framing {
  padding-block: 56px 72px;
 }
}

@media (max-width: 700px) {
 .question-context-card {
  padding: 24px;
 }
}

.education-intro {
 display: grid;
 grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
 align-items: center;
 gap: 64px;
 padding-block: 64px;
}

.education-intro-copy p {
 max-width: 650px;
 margin: 0;
 font-size: 19px;
}

.education-intro-photo {
 display: block;
 width: 100%;
 aspect-ratio: 4 / 3;
 border-radius: 20px;
 object-fit: cover;
}

.education-questions {
 padding-block: 64px 72px;
 background: var(--petrol);
 color: var(--warm);
}

.education-questions h2 {
 margin-bottom: 28px;
 color: var(--warm);
}

.education-questions-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 32px;
}

.education-questions-grid p {
 margin: 0;
 padding: 4px 0 4px 22px;
 border-left: 4px solid var(--oker);
 font-size: clamp(18px, 1.8vw, 22px);
 font-weight: 600;
 line-height: 1.45;
}

.education-practice {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
 gap: 48px;
 padding-block: 76px 84px;
}

.education-practice h2 {
 max-width: 300px;
 margin: 0;
}

.education-practice-copy p:first-child {
 margin-top: 0;
}

.education-options {
 margin-bottom: 0;
 padding: 22px 26px;
 border-radius: 16px;
 background: var(--background);
 font-weight: 600;
}

.education-teams {
 padding-block: 64px;
 background: var(--background);
}

.education-teams-grid {
 display: grid;
 grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
 align-items: center;
 gap: 64px;
}

.education-teams-photo {
 display: block;
 width: 100%;
 aspect-ratio: 4 / 3;
 border-radius: 20px;
 object-fit: cover;
}

.education-teams-copy p {
 margin-bottom: 0;
}

.education-scope {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
 gap: 48px;
 padding-block: 76px 88px;
}

.education-scope h2 {
 max-width: 360px;
 margin: 0;
}

.education-scope p {
 margin: 0;
}

@media (max-width: 900px) {
 .education-intro, .education-practice, .education-teams-grid, .education-scope {
  grid-template-columns: 1fr;
  gap: 28px;
 }

 .education-intro {
  padding-block: 48px;
 }

 .education-practice, .education-scope {
  padding-block: 56px 72px;
 }

 .education-teams {
  padding-block: 48px;
 }

 .education-practice h2, .education-scope h2 {
  max-width: none;
 }
}

@media (max-width: 700px) {
 .education-questions {
  padding-block: 48px 56px;
 }

 .education-questions-grid {
  grid-template-columns: 1fr;
  gap: 24px;
 }

 .education-teams-photo {
  aspect-ratio: 16 / 10;
 }

 .education-options {
  padding: 20px;
 }
}

.culture-intro {
 display: grid;
 grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
 align-items: center;
 gap: 64px;
 padding-block: 64px;
}

.culture-intro-lead {
 color: var(--petrol);
 font-size: clamp(20px, 2vw, 25px);
 font-weight: 600;
 line-height: 1.5;
}

.culture-intro-copy p:last-child {
 margin-bottom: 0;
}

.culture-intro-photo {
 display: block;
 width: 100%;
 aspect-ratio: 4 / 3;
 border-radius: 20px;
 object-fit: cover;
}

.culture-principle {
 padding-block: 64px;
 background: var(--petrol);
 color: var(--warm);
}

.culture-principle-grid {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
 align-items: start;
 gap: 48px;
}

.culture-principle h2 {
 margin: 0;
 color: var(--warm);
}

.culture-principle p {
 margin: 0;
 padding-left: 24px;
 border-left: 4px solid var(--oker);
 font-size: 20px;
}

.culture-principle a {
 color: var(--warm);
 text-decoration-color: var(--oker);
}

.culture-principle a:hover, .culture-principle a:focus-visible {
 color: var(--oker);
}

.culture-games {
 padding-block: 76px 88px;
}

.culture-games-heading {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
 gap: 48px;
 margin-bottom: 24px;
}

.culture-games-heading h2, .culture-games-heading p {
 margin: 0;
}

.culture-games-heading p {
 font-size: 19px;
}

.culture-game {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
 gap: 48px;
 padding-block: 32px;
 border-top: 1px solid #13425140;
}

.culture-game:last-child {
 border-bottom: 1px solid #13425140;
}

.culture-game h3 {
 margin: 0;
 font-size: clamp(22px, 2.2vw, 29px);
}

.culture-game p {
 margin: 0;
}

.culture-game .culture-game-combination {
 margin-top: 18px;
 padding-left: 16px;
 border-left: 4px solid var(--oker);
 font-weight: 600;
}

.culture-game a {
 display: inline-block;
 margin-top: 16px;
 color: var(--petrol);
 font-weight: 600;
}

@media (max-width: 900px) {
 .culture-intro, .culture-principle-grid, .culture-games-heading, .culture-game {
  grid-template-columns: 1fr;
  gap: 28px;
 }

 .culture-intro {
  padding-block: 48px;
 }

 .culture-principle {
  padding-block: 48px;
 }

 .culture-games {
  padding-block: 56px 72px;
 }

 .culture-game {
  gap: 12px;
 }
}

@media (max-width: 700px) {
 .culture-principle p {
  padding-left: 20px;
  font-size: 18px;
 }
}

.teamwork-intro {
 display: grid;
 grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
 align-items: center;
 gap: 64px;
 padding-block: 64px;
}

.teamwork-intro-lead {
 color: var(--petrol);
 font-size: clamp(20px, 2vw, 25px);
 font-weight: 600;
 line-height: 1.5;
}

.teamwork-intro-copy p:last-child {
 margin-bottom: 0;
}

.teamwork-intro-photo {
 display: block;
 width: 100%;
 aspect-ratio: 4 / 3;
 border-radius: 20px;
 object-fit: cover;
}

.teamwork-format {
 padding-block: 64px;
 background: var(--petrol);
 color: var(--warm);
}

.teamwork-format-grid {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
 gap: 48px;
}

.teamwork-format h2 {
 margin: 0;
 color: var(--warm);
}

.teamwork-format p {
 margin: 0;
 padding-left: 24px;
 border-left: 4px solid var(--oker);
 font-size: 20px;
}

.teamwork-value, .teamwork-contact {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
 gap: 48px;
 padding-block: 76px 84px;
}

.teamwork-value h2, .teamwork-contact h2 {
 margin: 0;
}

.teamwork-value p:first-child, .teamwork-contact p {
 margin-top: 0;
}

.teamwork-value p:last-child {
 margin-bottom: 0;
}

.teamwork-process {
 padding-block: 64px 72px;
 background: var(--background);
}

.teamwork-process h2 {
 margin-bottom: 32px;
}

.teamwork-process-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 32px;
}

.teamwork-process-grid article {
 padding-top: 22px;
 border-top: 4px solid var(--oker);
}

.teamwork-process-grid h3 {
 margin-bottom: 12px;
 font-size: clamp(21px, 2vw, 26px);
}

.teamwork-process-grid p {
 margin: 0;
}

.teamwork-contact {
 padding-block: 76px 88px;
}

.teamwork-contact p {
 max-width: 720px;
}

@media (max-width: 900px) {
 .teamwork-intro, .teamwork-format-grid, .teamwork-value, .teamwork-contact {
  grid-template-columns: 1fr;
  gap: 28px;
 }

 .teamwork-intro {
  padding-block: 48px;
 }

 .teamwork-format {
  padding-block: 48px;
 }

 .teamwork-value, .teamwork-contact {
  padding-block: 56px 72px;
 }

 .teamwork-process-grid {
  grid-template-columns: 1fr;
  gap: 32px;
 }
}

@media (max-width: 700px) {
 .teamwork-format p {
  padding-left: 20px;
  font-size: 18px;
 }

 .teamwork-process {
  padding-block: 48px 56px;
 }
}

.about-intro {
 display: grid;
 grid-template-columns: minmax(0, 1fr) 280px;
 align-items: center;
 gap: 64px;
 padding-block: 64px 80px;
}

.about-intro-copy p:last-child {
 margin-bottom: 0;
}

.about-intro-without-photo {
 grid-template-columns: minmax(0, 800px);
}

.about-lead {
 color: var(--petrol);
 font-size: clamp(20px, 2vw, 25px);
 font-weight: 600;
 line-height: 1.5;
}

.about-portrait {
 display: block;
 width: 100%;
 height: auto;
 border-radius: 20px;
 justify-self: end;
}

.about-work {
 padding-block: 64px 80px;
 background: var(--background);
}

.about-work h2 {
 margin-bottom: 32px;
}

.about-work-grid {
 display: grid;
 grid-template-columns: repeat(5, minmax(0, 1fr));
 gap: 24px;
}

.about-work-grid figure {
 margin: 0;
}

.about-work-grid img {
 display: block;
 width: 100%;
 aspect-ratio: 4 / 3;
 border-radius: 12px;
 object-fit: cover;
}

.about-work-grid figcaption {
 padding-top: 12px;
 line-height: 1.5;
}

@media (max-width: 1100px) {
 .about-work-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
 }
}

@media (max-width: 900px) {
 .about-intro {
  grid-template-columns: 1fr;
  gap: 32px;
  padding-block: 48px 64px;
 }

 .about-portrait {
  max-width: 240px;
  justify-self: start;
 }

 .about-work-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}

@media (max-width: 600px) {
 .about-work {
  padding-block: 48px 64px;
 }

 .about-work-grid {
  grid-template-columns: 1fr;
  gap: 32px;
 }
}