.firmenfeiern-page { overflow: hidden; }
.firmenfeiern-page .section { padding-block: var(--space-10); }
.firmenfeiern-page .section-compact { padding-block: var(--space-9); }
.firmenfeiern-page .ff-hero__grid,
.firmenfeiern-page .ff-location__grid,
.firmenfeiern-page .ff-request__grid { display: grid; min-width: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); }
.firmenfeiern-page .ff-hero__copy { grid-column: 1 / span 5; min-width: 0; align-self: center; }
.firmenfeiern-page .ff-hero__copy h1 { font-size: clamp(3.4rem, 5.2vw, 4.625rem); line-height: .98; }
.firmenfeiern-page .ff-hero__copy .lead { max-width: 52ch; }
.firmenfeiern-page .ff-hero__actions { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.firmenfeiern-page .ff-hero__actions > * { min-width: 0; }
.firmenfeiern-page .ff-hero__media { grid-column: 6 / -1; width: 100%; min-width: 0; margin: 0; overflow: hidden; border-radius: var(--radius-lg); border: var(--border-subtle); align-self: stretch; }
.firmenfeiern-page .ff-hero__media img { width: 100%; height: 100%; min-height: 31rem; object-fit: cover; object-position: center; }
.firmenfeiern-page .ff-hero__markers { grid-column: 1 / span 5; display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-3); align-self: start; color: var(--color-slate-muted); font-size: var(--text-label); font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.firmenfeiern-page .ff-hero__markers span { min-width: 0; }
.firmenfeiern-page .ff-hero__markers span + span::before { content: "•"; margin-right: var(--space-3); color: var(--color-saffron); }
.firmenfeiern-page .ff-inline-link { color: var(--color-slate); font-weight: 650; text-decoration: none; background-image: linear-gradient(var(--color-aquamarine), var(--color-aquamarine)); background-repeat: no-repeat; background-position: left bottom; background-size: 32% 2px; transition: color var(--transition-fast), background-size var(--transition-base); }
.firmenfeiern-page .ff-inline-link:hover { color: var(--color-aquamarine-deep); background-size: 100% 2px; }
.firmenfeiern-page .ff-inline-link--light { color: var(--color-alabaster-bright); background-image: linear-gradient(var(--color-aquamarine), var(--color-aquamarine)); }
.firmenfeiern-page .ff-section-head { min-width: 0; }
.firmenfeiern-page .ff-occasions__head { max-width: 55ch; }
.firmenfeiern-page .ff-occasions__grid { display: grid; min-width: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-7); }
.firmenfeiern-page .ff-occasion { min-width: 0; padding: var(--space-6); border: var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-raised); transition: transform var(--transition-base); }
.firmenfeiern-page .ff-occasion:hover { transform: translateY(-3px); }
.firmenfeiern-page .ff-occasion--anniversary { grid-column: 1 / span 3; }
.firmenfeiern-page .ff-occasion--seasonal { grid-column: 4 / span 5; background: var(--color-pale-oak); }
.firmenfeiern-page .ff-occasion--client { grid-column: 9 / span 4; border-top: 4px solid var(--color-aquamarine); }
.firmenfeiern-page .ff-occasion--team { grid-column: 4 / span 5; }
.firmenfeiern-page .ff-number { display: block; margin-bottom: var(--space-4); color: var(--color-saffron); font-size: var(--text-label); font-weight: 650; letter-spacing: .14em; }
.firmenfeiern-page .ff-planning__head { max-width: 64ch; }
.firmenfeiern-page .ff-planning__grid { display: grid; min-width: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-7); }
.firmenfeiern-page .ff-service { min-width: 0; padding: var(--space-6); border: var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-raised); }
.firmenfeiern-page .ff-service--concept { grid-column: 1 / span 5; }
.firmenfeiern-page .ff-service--space { grid-column: 8 / span 5; }
.firmenfeiern-page .ff-service--coordination { grid-column: 3 / span 5; }
.firmenfeiern-page .ff-service--design { grid-column: 8 / span 5; }
.firmenfeiern-page .ff-blueprint { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); min-width: 0; height: 8rem; margin-bottom: var(--space-5); padding: var(--space-3); border: 1px solid rgba(39, 50, 53, .2); background: var(--color-stone); }
.firmenfeiern-page .ff-blueprint span { min-width: 0; border: 1px solid var(--color-aquamarine); }
.firmenfeiern-page .ff-blueprint span:nth-child(2) { background: var(--color-pale-oak); }
.firmenfeiern-page .ff-blueprint span:nth-child(3) { border-radius: 50%; background: rgba(230, 165, 46, .35); }
.firmenfeiern-page .ff-flow__head { max-width: 56ch; }
.firmenfeiern-page .ff-flow__track { display: grid; min-width: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-7); position: relative; }
.firmenfeiern-page .ff-flow__track::before { content: ""; position: absolute; top: 1.25rem; left: 0; right: 0; height: 2px; background: var(--color-saffron); }
.firmenfeiern-page .ff-stage { position: relative; z-index: 1; min-width: 0; padding: var(--space-5); border: var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-raised); transition: transform var(--transition-base); }
.firmenfeiern-page .ff-stage:hover { transform: translateY(-2px); }
.firmenfeiern-page .ff-stage__number { display: grid; width: 2.5rem; min-width: 2.5rem; height: 2.5rem; place-items: center; margin-bottom: var(--space-5); border-radius: 50%; background: var(--color-alabaster); color: var(--color-slate); font-size: var(--text-label); font-weight: 650; }
.firmenfeiern-page .ff-stage--casino { background: var(--color-slate); color: var(--color-alabaster); }
.firmenfeiern-page .ff-stage--casino h3 { color: var(--color-alabaster); }
.firmenfeiern-page .ff-stage--casino p { color: rgba(245,242,234,.8); }
.firmenfeiern-page .ff-location__copy { grid-column: 1 / span 4; min-width: 0; align-self: start; }
.firmenfeiern-page .ff-location__copy .lead { max-width: 56ch; }
.firmenfeiern-page .ff-location__visual { grid-column: 5 / -1; min-width: 0; position: relative; }
.firmenfeiern-page .ff-location__media { width: 100%; margin: 0; overflow: hidden; border-radius: var(--radius-lg); }
.firmenfeiern-page .ff-location__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform var(--transition-base); }
.firmenfeiern-page .ff-location__visual:hover img { transform: scale(1.025); }
.firmenfeiern-page .ff-location__overlay { width: min(100%, 22.5rem); min-width: 0; margin: calc(var(--space-8) * -1) 0 0 var(--space-6); padding: var(--space-5); position: relative; border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.firmenfeiern-page .ff-location__note { grid-column: 1 / span 4; min-width: 0; max-width: 58ch; margin-bottom: 0; }
.firmenfeiern-page .ff-casino__intro { padding: var(--space-8); border-radius: var(--radius-lg); }
.firmenfeiern-page .ff-casino__intro > * { max-width: 56ch; }
.firmenfeiern-page .ff-casino__split { display: grid; min-width: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.firmenfeiern-page .ff-casino__media { grid-column: 1 / span 7; width: 100%; min-width: 0; margin: 0; overflow: hidden; border-radius: var(--radius-lg); }
.firmenfeiern-page .ff-casino__media img { width: 100%; height: 100%; min-height: 36rem; object-fit: cover; }
.firmenfeiern-page .ff-casino__copy { grid-column: 8 / -1; min-width: 0; align-self: center; border-left: 2px solid var(--color-saffron); padding-left: var(--space-5); }
.firmenfeiern-page .ff-casino__notice { min-width: 0; margin-top: var(--space-6); padding: var(--space-5); border: var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-raised); }
.firmenfeiern-page .ff-tables__head { max-width: 58ch; }
.firmenfeiern-page .ff-tables__grid { display: grid; min-width: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-7); }
.firmenfeiern-page .ff-table-card { min-width: 0; overflow: hidden; border: var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-raised); transition: transform var(--transition-base); }
.firmenfeiern-page .ff-table-card:hover { transform: translateY(-3px); }
.firmenfeiern-page .ff-table-card figure { width: 100%; margin: 0; overflow: hidden; }
.firmenfeiern-page .ff-table-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform var(--transition-base); }
.firmenfeiern-page .ff-table-card:hover img { transform: scale(1.025); }
.firmenfeiern-page .ff-table-card > div { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-5); }
.firmenfeiern-page .ff-table-card > div > :is(h3,p) { margin: 0; }
.firmenfeiern-page .ff-table-card--poker { grid-column: 1 / span 5; }
.firmenfeiern-page .ff-table-card--roulette { grid-column: 6 / span 3; }
.firmenfeiern-page .ff-table-card--roulette img { aspect-ratio: 4 / 5; }
.firmenfeiern-page .ff-table-card--blackjack { grid-column: 9 / span 4; }
.firmenfeiern-page .ff-briefing__top { display: grid; min-width: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); align-items: end; }
.firmenfeiern-page .ff-briefing__head { grid-column: 1 / span 5; min-width: 0; max-width: 55ch; }
.firmenfeiern-page .ff-briefing__hint { grid-column: 9 / span 3; min-width: 0; padding: var(--space-5); border-top: 3px solid var(--color-saffron); background: var(--color-pale-oak); font-family: var(--font-heading); font-size: var(--text-lead); line-height: var(--leading-lead); }
.firmenfeiern-page .ff-briefing__grid { display: grid; min-width: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-7); }
.firmenfeiern-page .ff-brief-card { grid-column: span 5; min-width: 0; padding: var(--space-6); border: var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-raised); }
.firmenfeiern-page .ff-brief-card:nth-child(1), .firmenfeiern-page .ff-brief-card:nth-child(3) { grid-column-start: 1; }
.firmenfeiern-page .ff-brief-card:nth-child(2), .firmenfeiern-page .ff-brief-card:nth-child(4) { grid-column-start: 8; }
.firmenfeiern-page .ff-brief-card--warm { background: var(--color-pale-oak); }
.firmenfeiern-page .ff-brief-card--casino { border-top: 4px solid var(--color-aquamarine); }
.firmenfeiern-page .ff-cta { background: var(--color-aquamarine); }
.firmenfeiern-page .ff-cta__inner { display: flex; width: min(100%, 47.5rem); min-width: 0; flex-direction: column; align-items: center; gap: var(--space-5); margin-inline: auto; padding: var(--space-8); text-align: center; }
.firmenfeiern-page .ff-cta__inner > * { margin: 0; }
.firmenfeiern-page .ff-cta__inner .eyebrow { color: var(--color-slate); }
.firmenfeiern-page .ff-request__intro { grid-column: 1 / span 4; min-width: 0; align-self: start; max-width: 58ch; }
.firmenfeiern-page .ff-request__form { grid-column: 6 / -1; display: flex; min-width: 0; flex-direction: column; gap: var(--space-6); padding: var(--space-7); border: var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-raised); }
.firmenfeiern-page .ff-form__fields { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.firmenfeiern-page .ff-field { min-width: 0; }
.firmenfeiern-page .ff-field--full { grid-column: 1 / -1; }
.firmenfeiern-page .ff-field input { min-height: 3rem; }
.firmenfeiern-page .ff-form__interests { margin: 0; }
.firmenfeiern-page .ff-check-grid { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.firmenfeiern-page .ff-check-grid label, .firmenfeiern-page .ff-consent label { display: flex; min-width: 0; align-items: flex-start; gap: var(--space-3); margin: 0; padding: var(--space-2); }
.firmenfeiern-page .ff-check-grid span, .firmenfeiern-page .ff-consent span { min-width: 0; }
.firmenfeiern-page .ff-error { min-height: 1.25rem; margin: var(--space-2) 0 0; color: var(--color-raspberry-deep); font-size: var(--text-meta); line-height: var(--leading-meta); }
.firmenfeiern-page .ff-form-status { margin: 0; font-weight: 650; }
.firmenfeiern-page .ff-request__form .button { align-self: flex-start; }
@media (max-width: 73.75rem) { .firmenfeiern-page .ff-flow__track { grid-template-columns: repeat(6, minmax(0, 1fr)); } .firmenfeiern-page .ff-stage { grid-column: span 2; } .firmenfeiern-page .ff-stage--casino { grid-column: 3 / span 2; } }
@media (max-width: 68.6875rem) { .firmenfeiern-page .ff-hero__copy { grid-column: 1 / span 6; } .firmenfeiern-page .ff-hero__media { grid-column: 7 / -1; } .firmenfeiern-page .ff-hero__media img { min-height: 28rem; } .firmenfeiern-page .ff-hero__markers { grid-column: 1 / span 6; } .firmenfeiern-page .ff-occasion { grid-column: span 6; } .firmenfeiern-page .ff-occasion--anniversary, .firmenfeiern-page .ff-occasion--team { grid-column-start: 1; } .firmenfeiern-page .ff-occasion--seasonal, .firmenfeiern-page .ff-occasion--client { grid-column-start: 7; } .firmenfeiern-page .ff-service { grid-column: span 6; } .firmenfeiern-page .ff-service--concept, .firmenfeiern-page .ff-service--coordination { grid-column-start: 1; } .firmenfeiern-page .ff-service--space, .firmenfeiern-page .ff-service--design { grid-column-start: 7; } .firmenfeiern-page .ff-tables__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .firmenfeiern-page .ff-table-card { grid-column: span 1; } .firmenfeiern-page .ff-table-card--poker, .firmenfeiern-page .ff-table-card--roulette, .firmenfeiern-page .ff-table-card--blackjack { grid-column-start: auto; } .firmenfeiern-page .ff-table-card--roulette img { aspect-ratio: 3 / 2; } .firmenfeiern-page .ff-request__intro { grid-column: 1 / -1; } .firmenfeiern-page .ff-request__form { grid-column: 2 / span 10; } }
@media (max-width: 64.9375rem) { .firmenfeiern-page .ff-location__copy { grid-column: 1 / span 5; } .firmenfeiern-page .ff-location__visual { grid-column: 6 / -1; } .firmenfeiern-page .ff-location__note { grid-column: 1 / span 5; } .firmenfeiern-page .ff-casino__media { grid-column: 1 / span 6; } .firmenfeiern-page .ff-casino__copy { grid-column: 7 / -1; } }
@media (max-width: 56.1875rem) { .firmenfeiern-page .ff-flow__track { grid-template-columns: 1fr; gap: var(--space-4); } .firmenfeiern-page .ff-flow__track::before { top: 0; bottom: 0; left: 1.25rem; right: auto; width: 2px; height: auto; } .firmenfeiern-page .ff-stage, .firmenfeiern-page .ff-stage--casino { grid-column: 1; } .firmenfeiern-page .ff-briefing__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .firmenfeiern-page .ff-briefing__head { grid-column: 1 / -1; } .firmenfeiern-page .ff-briefing__hint { grid-column: 2 / span 1; } .firmenfeiern-page .ff-briefing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .firmenfeiern-page .ff-brief-card, .firmenfeiern-page .ff-brief-card:nth-child(n) { grid-column: span 1; grid-column-start: auto; } }
@media (max-width: 53.125rem) { .firmenfeiern-page .ff-location__grid { grid-template-columns: 1fr; } .firmenfeiern-page .ff-location__copy, .firmenfeiern-page .ff-location__visual, .firmenfeiern-page .ff-location__note { grid-column: 1; } .firmenfeiern-page .ff-location__overlay { width: 100%; margin: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: none; background: var(--surface-raised); backdrop-filter: none; } .firmenfeiern-page .ff-casino__split { grid-template-columns: 1fr; } .firmenfeiern-page .ff-casino__media, .firmenfeiern-page .ff-casino__copy { grid-column: 1; } .firmenfeiern-page .ff-casino__copy { padding-left: var(--space-5); } }
@media (max-width: 44.9375rem) { .firmenfeiern-page .section { padding-block: var(--space-8); } .firmenfeiern-page .ff-hero__grid, .firmenfeiern-page .ff-request__grid { grid-template-columns: 1fr; gap: var(--space-6); } .firmenfeiern-page .ff-hero__copy, .firmenfeiern-page .ff-hero__media, .firmenfeiern-page .ff-hero__markers, .firmenfeiern-page .ff-request__intro, .firmenfeiern-page .ff-request__form { grid-column: 1; } .firmenfeiern-page .ff-hero__copy { display: flex; flex-direction: column; gap: var(--space-5); } .firmenfeiern-page .ff-hero__copy > * { margin: 0; } .firmenfeiern-page .ff-hero__copy h1 { font-size: clamp(2.625rem, 11vw, 3.625rem); } .firmenfeiern-page .ff-hero__copy .lead { font-size: 1.125rem; line-height: 1.5; } .firmenfeiern-page .ff-hero__actions { align-items: stretch; flex-direction: column; } .firmenfeiern-page .ff-hero__actions .button, .firmenfeiern-page .ff-hero__actions .ff-inline-link { width: 100%; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; } .firmenfeiern-page .ff-hero__media { order: 2; } .firmenfeiern-page .ff-hero__markers { order: 3; } .firmenfeiern-page .ff-hero__media img { min-height: 0; aspect-ratio: 4 / 5; } .firmenfeiern-page .ff-occasions__grid, .firmenfeiern-page .ff-planning__grid, .firmenfeiern-page .ff-tables__grid, .firmenfeiern-page .ff-briefing__grid { grid-template-columns: 1fr; } .firmenfeiern-page .ff-occasion, .firmenfeiern-page .ff-service, .firmenfeiern-page .ff-table-card, .firmenfeiern-page .ff-brief-card, .firmenfeiern-page .ff-brief-card:nth-child(n) { grid-column: 1; grid-column-start: auto; } .firmenfeiern-page .ff-service, .firmenfeiern-page .ff-occasion, .firmenfeiern-page .ff-brief-card { padding: var(--space-5); } .firmenfeiern-page .ff-casino__intro { padding: var(--space-5); } .firmenfeiern-page .ff-casino__media img { min-height: 0; aspect-ratio: 4 / 5; } .firmenfeiern-page .ff-briefing__top { grid-template-columns: 1fr; } .firmenfeiern-page .ff-briefing__hint { grid-column: 1; } .firmenfeiern-page .ff-cta__inner { padding: var(--space-5); } .firmenfeiern-page .ff-request__form { padding: var(--space-5); } .firmenfeiern-page .ff-form__fields, .firmenfeiern-page .ff-check-grid { grid-template-columns: 1fr; } .firmenfeiern-page .ff-field--full { grid-column: 1; } .firmenfeiern-page .ff-check-grid label { min-height: 2.75rem; align-items: center; } .firmenfeiern-page .ff-request__form .button { width: 100%; min-height: 3rem; } }
@media (prefers-reduced-motion: reduce) { .firmenfeiern-page .ff-occasion:hover, .firmenfeiern-page .ff-stage:hover, .firmenfeiern-page .ff-table-card:hover, .firmenfeiern-page .ff-location__visual:hover img, .firmenfeiern-page .ff-table-card:hover img { transform: none; } }