/* =========================================================
   THE YARD – MASTER STYLESHEET
   ---------------------------------------------------------
   Aufbau:
   01  Brand Tokens & Variables
   02  Base Reset & Typography
   03  Divi Helpers & Section Reset
   04  Utilities (Labels, Buttons, Shadows)
   05  Global Header
   06  Global Footer
   07  Hero – Home
   08  Hero – Business
   09  Hero – FAQ Page
   10  Section – Disciplines (Sticky-Scroll)
   11  Section – Game Collage
   12  Section – Flow Timeline
   13  Section – Audience Split
   14  Section – Community Day
   15  Section – About / Why The Yard
   16  Section – About Action Grid (CTA + Form)
   17  Section – Business Facts Bar
   18  Section – Business Packages
   19  Section – Business Process (Nummer-Kreise)
   20  Section – Business Extras
   21  Section – Business Team Dynamics
   22  Section – Business Testimonials
   23  Section – Business Contact
   24  Section – Business Final CTA
   25  Section – Business FAQ Accordion
   26  Section – FAQ Page (Cards)
   27  Section – Social Proof Bar
   28  Component – Contact Form
   29  Component – Sticky Mobile CTA
   30  Component – Scroll Progress Indicator
   31  Animations – Slide-In on Scroll
   32  Hover Effects (Cards & Images)
   ========================================================= */


/* =========================================================
   01  BRAND TOKENS & VARIABLES
   Single Source of Truth für Farben, Typo, Spacings, Borders.
========================================================= */

:root {
    /* --- Brand Colors --- */
    --ty-black:   #121212;
    --ty-white:   #ffffff;
    --ty-blue:    #2929ab;
    --ty-pink:    #ff78d1;
    --ty-orange:  #ff6133;
    --ty-yellow:  #ffcc40;
    --ty-mint:    #40ccb0;
    --ty-cream:   #f7f3e8;

    /* --- Typography Families --- */
    --ty-font-headline: "komet", sans-serif;
    --ty-font-copy:     "Work Sans", sans-serif;
	
	    /* --- Font Weights (verfügbare Komet-Gewichte: 400, 500, 700, 800) --- */
    --ty-weight-regular:  400;
    --ty-weight-medium:   500;
    --ty-weight-semibold: 600;  /* nur Work Sans */
    --ty-weight-bold:     700;
    --ty-weight-black:    800;


    /* --- Fluid Headline Sizes --- */
    --ty-h1-size: clamp(68px, 9vw,    138px);
    --ty-h2-size: clamp(52px, 6.5vw,  104px);
    --ty-h3-size: clamp(34px, 4vw,     64px);
    --ty-h4-size: clamp(24px, 2.4vw,   38px);


    /* --- Headline Behaviour --- */

    --ty-h1-line: 0.88;
    --ty-h2-line: 0.90;
    --ty-h3-line: 0.95;
    --ty-h4-line: 1.05;

    --ty-h1-spacing: -4px;
    --ty-h2-spacing: -3px;
    --ty-h3-spacing: -1.5px;
    --ty-h4-spacing: -0.5px;

    --ty-headline-line:  0.9;
    --ty-headline-tight: -3px;

    /* --- Copy Sizes --- */
    --ty-copy-xl:   30px;  /* Lead-Text, Subline */
    --ty-copy-lg:   24px;  /* Größere Absätze */
    --ty-copy-md:   22px;  /* Standard-Akzent */
    --ty-copy-sm:   18px;  /* Standard Body */
    --ty-copy-xs:   14px;  /* Labels, Captions */
    --ty-copy-line: 1.5;


    /* --- Layout --- */
    --ty-max:        1500px;
    --ty-pad:        40px;
    --ty-pad-mobile: 22px;

    --ty-section-space:         120px;
    --ty-section-space-tablet:   96px;
    --ty-section-space-mobile:   76px;

    /* --- Borders & Shadows (Neo-Brutalism Look) --- */
    --ty-border-width: 4px;
    --ty-border:       var(--ty-border-width) solid var(--ty-black);
    --ty-border-small: 3px solid var(--ty-black);

    --ty-shadow:       10px 10px 0 var(--ty-black);
    --ty-shadow-large: 14px 14px 0 var(--ty-black);
    --ty-shadow-hover:  6px  6px 0 var(--ty-black);

    /* --- Decorative Pattern Opacities --- */
    --ty-pattern-opacity-soft:   0.16;
    --ty-pattern-opacity-medium: 0.28;
    --ty-pattern-opacity-strong: 0.62;
}

/* =========================================================
   01b  GLOBAL TYPOGRAPHY ENFORCEMENT
   ---------------------------------------------------------
   Single Source of Truth für alle Schrift-Regeln.
   Greift hart durch (!important) gegen Divi-Inline-Styles,
   alte CSS-Reste und Module-Defaults.
   
   Brand Manual:
   - Komet (Adobe Fonts) für Headlines + Labels
   - Work Sans (lokal) für Body + Forms
   
   Verfügbare Gewichte:
   - Komet: 400, 500, 700, 800
   - Work Sans: 400, 500, 600, 700, 800
========================================================= */


/* --- HEADLINES (H1-H6): Komet Black 800 ---
   Trifft auch Divi-Builder-Headlines (et_pb_heading, et_pb_text h2, etc.) */

h1,
h2,
h3,
h4,
h5,
h6,
.ty-home-hero h1,
.ty-business-hero h1,
.ty-faq-hero h1,
.et_pb_module h1,
.et_pb_module h2,
.et_pb_module h3,
.et_pb_module h4,
.et_pb_module h5,
.et_pb_module h6,
.et_pb_text h1,
.et_pb_text h2,
.et_pb_text h3,
.et_pb_text h4,
.et_pb_text h5,
.et_pb_text h6,
.et_pb_heading h1,
.et_pb_heading h2,
.et_pb_heading h3,
.et_pb_heading h4,
.et_pb_heading h5,
.et_pb_heading h6 {
    font-family: "komet", sans-serif !important;
    font-weight: 800 !important;
    font-style: normal !important;
    color: var(--ty-black);
}

.ty-home-hero p,
.ty-home-hero .ty-home-subline,
.ty-home-hero .ty-home-kicker {
    font-family: var(--ty-font-copy) !important;
}

.ty-home-kicker {
    font-weight: 800 !important;
}

.ty-home-subline {
    font-weight: 600 !important;
}


/* --- BODY-TEXT (Absätze, Listen, Links): Work Sans Regular --- */

body,
p,
li,
a,
span,
div,
input,
select,
textarea,
button,
label,
.et_pb_module p,
.et_pb_text p,
.et_pb_text_inner p,
.et_pb_text_inner li,
.et_pb_button {
    font-family: "Work Sans", sans-serif !important;
}

p,
li {
    font-weight: 400 !important;
}

strong,
b {
    font-weight: 700 !important;
}


/* --- LABELS / KICKER / BATCHES (gelbe Pillen): Work Sans Black 800 ---
   Klein, fett, uppercase, mit weitem Letter-Spacing */

.ty-section-label,
.ty-home-kicker,
.ty-audience-kicker,
.ty-business-package-kicker,
.ty-ticket-stub-label,
.ty-ticket-time-label,
.ty-ticket-price-label,
.ty-ticket-visual-tag,
.ty-ticket-id,
.ty-discipline-card-info p,
.ty-audience-sticker,
.ty-game-collage-sticker,
.ty-community-sticker,
.ty-business-sticker,
.ty-business-fact strong,
.ty-business-process-astro-number,
.ty-flow-timeline-number,
.ty-mobile-cta-book,
.ty-global-booking-button {
    font-family: "Work Sans", sans-serif !important;
    font-weight: 800 !important;
}


/* --- BUTTONS: Work Sans Black 800 --- */

.ty-home-button,
.ty-home-button-primary,
.ty-home-button-secondary,
.ty-contact-submit,
.ty-ticket-instagram,
.et_pb_button {
    font-family: "Work Sans", sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* --- NAVIGATION + GLOBAL HEADER: Work Sans Black 800 --- */

.ty-global-nav a,
.ty-global-logo,
.ty-faq-nav a {
    font-family: "Work Sans", sans-serif !important;
    font-weight: 800 !important;
}


/* --- GROSSE DISPLAY-HEADLINES (Eyebrows, Day-Labels): Komet Black 800 ---
   Diese sind keine echten H1-H6 aber visuell Display-Schriften */

.ty-disciplines-eyebrow,
.ty-disciplines-eyebrow span,
.ty-ticket-day,
.ty-ticket-time-value,
.ty-ticket-price-value,
.ty-faq-accordion-question,
.ty-disciplines-outro p,
.ty-disciplines-outro-inner p,
.ty-community-content h2,
.ty-discipline-card-info h3 {
    font-family: "komet", sans-serif !important;
    font-weight: 800 !important;
}


/* --- DIVI-OVERRIDES: et_pb_text_inner ---
   Divi setzt manchmal über inline-styles font-family auf "Open Sans" o.ä.
   Hier ziehen wir das raus. */

.et_pb_text_inner h1,
.et_pb_text_inner h2,
.et_pb_text_inner h3,
.et_pb_text_inner h4 {
    font-family: "komet", sans-serif !important;
    font-weight: 800 !important;
}


/* --- FALLBACK GLOBAL: Falls etwas durchrutscht ---
   Selektor: Alles, was wie eine Headline aussieht (gelbe Box mit Headline-Klasse) */

[class*="-headline"],
[class*="-title"],
[class*="-heading"] {
    font-family: "komet", sans-serif !important;
    font-weight: 800 !important;
}


/* =========================================================
   02  BASE RESET & TYPOGRAPHY
========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--ty-font-copy);
    font-weight: var(--ty-weight-regular);
    color: var(--ty-black);
    background: var(--ty-cream);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}


/* Headlines: Komet Black */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ty-font-headline);
    font-weight: var(--ty-weight-black);
    color: var(--ty-black);
    line-height: var(--ty-headline-line);
    letter-spacing: var(--ty-headline-tight);
    margin: 0;
}

/* Default-Größen, falls Sektion nichts überschreibt */
h1 {
    font-size: var(--ty-h1-size);
    line-height: var(--ty-h1-line);
    letter-spacing: var(--ty-h1-spacing);
}

h2 {
    font-size: var(--ty-h2-size);
    line-height: var(--ty-h2-line);
    letter-spacing: var(--ty-h2-spacing);
}

h3 {
    font-size: var(--ty-h3-size);
    line-height: var(--ty-h3-line);
    letter-spacing: var(--ty-h3-spacing);
}

h4 {
    font-size: var(--ty-h4-size);
    line-height: var(--ty-h4-line);
    letter-spacing: var(--ty-h4-spacing);
}

/* Body & Inline-Elemente: Work Sans */
p, li, a, span, button,
input, select, textarea, label {
    font-family: var(--ty-font-copy);
}

p {
    font-weight: var(--ty-weight-regular);
    line-height: var(--ty-copy-line);
}

strong, b {
    font-weight: var(--ty-weight-bold);
}

em, i {
    font-style: italic;
}

/* Lese-Lead (z.B. erster Absatz nach einer Headline) */
.ty-lead {
    font-size: var(--ty-copy-xl);
    font-weight: var(--ty-weight-medium);
    line-height: 1.35;
}



/* =========================================================
   03  DIVI HELPERS & SECTION RESET
   Zähmt Divi-Defaults damit unsere Custom-Sections sauber sitzen.
========================================================= */

.et_pb_section {
    padding: 0;
}

.et_pb_row {
    width: 92%;
    max-width: 1440px;
}

@media (min-width: 1600px) {
    .et_pb_row {
        max-width: 1600px;
    }
}

/* Utility: bricht aus einer Divi-Row aus auf volle Viewport-Breite */
.ty-fullwidth {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left:  calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/* Buttons in einer Row auf gleicher Höhe ausrichten */
.button-align .et_pb_button_module_wrapper {
    margin-top: auto;
}

/* Section, die ein Code-Modul enthält: alle Wrapper auf 0 */
.et_pb_section:has(.et_pb_code) {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

.et_pb_section:has(.et_pb_code) .et_pb_row {
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    background: transparent !important;
}

.et_pb_section:has(.et_pb_code) .et_pb_column {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

.et_pb_section .et_pb_code,
.et_pb_section .et_pb_code_inner {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Footer-Module flach drücken (Divi fügt sonst Leerraum hinzu) */
.et-l--footer,
.et-l--footer .et_pb_section,
.et-l--footer .et_pb_row,
.et-l--footer .et_pb_column,
.et-l--footer .et_pb_module,
.et-l--footer .et_pb_code,
.et-l--footer .et_pb_code_inner {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}


/* =========================================================
   04  UTILITIES – Labels, Buttons, Shadow-Helper
========================================================= */

/* Section-Label & Hero-Kicker: identisches Pill-Design */
.ty-section-label,
.ty-home-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    margin-bottom: 28px;
    padding: 0 14px;

    border: var(--ty-border-small);
    background: var(--ty-yellow);
    color: var(--ty-black);

    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Brutalist Button Basis */
.ty-home-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 62px;
    padding: 0 28px;

    border: var(--ty-border-small);
    text-decoration: none !important;

    font-size: 15px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    transition:
        transform   0.18s ease,
        box-shadow  0.18s ease,
        background  0.18s ease;
}

.ty-home-button:hover {
    transform: translateY(-3px);
}

.ty-home-button-primary {
    background: var(--ty-black);
    color: var(--ty-white) !important;
}

.ty-home-button-secondary {
    background: var(--ty-white);
    color: var(--ty-black) !important;
}

/* Hochwertiger Hover für primäre Buttons */
.ty-home-button-primary:hover,
.ty-global-booking-button:hover,
.ty-contact-submit:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--ty-black);
}

/* Shadow Helper Klassen (optional einsetzbar) */
.ty-card-shadow        { box-shadow: var(--ty-shadow); }
.ty-card-shadow-large  { box-shadow: var(--ty-shadow-large); }


/* =========================================================
   05  GLOBAL HEADER
   Sticky Header mit Logo + Nav + Booking-CTA
========================================================= */

.ty-global-header {
    position: sticky;
    top: 0;
    z-index: 9998;

    min-height: 96px;
    background: var(--ty-cream);
    border-bottom: var(--ty-border);
}

.ty-global-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    min-height: 96px;
    max-width: var(--ty-max);
    margin: 0 auto;
    padding: 18px var(--ty-pad);
}

.ty-global-logo {
    display: inline-flex;
    align-items: center;

    color: var(--ty-black) !important;
    text-decoration: none !important;

    font-family: var(--ty-font-headline);
    font-size: 28px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -1px;
    text-transform: uppercase;
}

.ty-global-logo img {
    display: block;
    width: auto;
    height: 72px;
    max-height: 72px;
    object-fit: contain;
}

.ty-global-nav {
    display: flex;
    align-items: center;
    gap: 26px;
}

.ty-global-nav a {
    color: var(--ty-black) !important;
    text-decoration: none !important;

    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.ty-global-nav a:hover {
    color: var(--ty-blue) !important;
}

.ty-global-booking-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 0 18px;

    border: var(--ty-border-small);
    background: var(--ty-orange);
    color: var(--ty-white) !important;
    text-decoration: none !important;

    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;

    box-shadow: 5px 5px 0 var(--ty-black);

    transition:
        transform  0.18s ease,
        box-shadow 0.18s ease;
}


/* =========================================================
   06  GLOBAL FOOTER
========================================================= */

.ty-footer {
    padding: 42px 0 20px;
    background: var(--ty-cream);
    border-top: var(--ty-border);
}

.ty-footer-inner {
    max-width: var(--ty-max);
    margin: 0 auto;
    padding: 0 var(--ty-pad);
}

.ty-footer-top {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr 1fr 0.8fr;
    gap: 46px;
    align-items: start;
}

.ty-footer-brand img {
    display: block;
    width: 138px;
    height: auto;
}

.ty-footer h3 {
    margin: 0 0 18px;
    font-family: var(--ty-font-copy);
    font-size: 18px;
    line-height: 1.1;
    font-weight: 800;
}

.ty-footer p {
    margin: 0 0 22px;
    font-size: 18px;
    line-height: 1.55;
    font-weight: 700;
}

.ty-footer a {
    color: var(--ty-black) !important;
    font-weight: 800;
    text-decoration: none !important;
}

.ty-footer a:hover {
    color: var(--ty-blue) !important;
}

.ty-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 0 16px;

    border: var(--ty-border-small);
    background: var(--ty-white);
    color: var(--ty-black) !important;

    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
}

.ty-footer-bottom {
    margin-top: 56px;
    padding-top: 24px;
    border-top: var(--ty-border-small);
    text-align: center;
}

.ty-footer-bottom p {
    display: inline-block;
    margin: 0;
    padding: 14px 18px;
    border: var(--ty-border-small);
    background: var(--ty-white);
    font-size: 15px;
    line-height: 1.3;
    font-weight: 800;
}


/* =========================================================
   07  HERO – HOME
   Zweispaltig: Content links, Visual rechts mit Bildern & Shape
========================================================= */

.ty-home-hero {
    position: relative;
    overflow: hidden;

    padding: 140px 0 110px;
    background: var(--ty-cream);
}

.ty-home-hero-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 90px;
    align-items: center;

    max-width: var(--ty-max);
    margin: 0 auto;
    padding: 0 var(--ty-pad);
}

.ty-home-hero-content h1 {
    margin: 0 0 28px;
    font-size: var(--ty-h1-size);
    line-height: 1.02;
    letter-spacing: -4px;
    font-weight: 800;
}

.ty-home-subline {
    max-width: 620px;
    margin: 0 0 40px;
    font-size: var(--ty-copy-lg);
    line-height: var(--ty-copy-line);
    font-weight: 600;
}

.ty-home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

/* --- Visual-Seite: absolut positionierte Bilder & Shapes --- */

.ty-home-hero-visual {
    position: relative;
    min-height: 720px;
}

.ty-home-hero-image {
    position: absolute;
    overflow: hidden;

    border: var(--ty-border);
    box-shadow: var(--ty-shadow);
    background: var(--ty-cream);
}

.ty-home-hero-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ty-home-image-main {
    top: 40px;
    right: 0;
    width: 82%;
    height: 620px;
    z-index: 2;
}

.ty-home-image-secondary {
    bottom: -30px;
    left: -70px;
    width: 50%;
    height: 320px;
    z-index: 4;
}

.ty-home-shape {
    position: absolute;
    pointer-events: none;
}

.ty-home-shape-circle {
    top: -220px;
    right: -220px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: var(--ty-mint);
    z-index: 1;
}


/* =========================================================
   08  HERO – BUSINESS
========================================================= */

.ty-business-hero {
    position: relative;
    overflow: hidden;

    padding: 120px 0 90px;
    background: var(--ty-white);
}

.ty-business-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;

    max-width: var(--ty-max);
    margin: 0 auto;
    padding: 0 var(--ty-pad);
}

.ty-business-hero-content h1 {
    margin: 0 0 28px;
    font-size: clamp(68px, 8vw, 132px);
    line-height: .88;
    letter-spacing: -4px;
}

.ty-business-hero-copy {
    max-width: 640px;
    margin: 0 0 40px;
    font-size: 28px;
    line-height: 1.35;
    font-weight: 700;
}

.ty-business-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

/* --- Visual-Seite --- */

.ty-business-hero-visual {
    position: relative;
    min-height: 720px;
}

.ty-business-hero-image {
    position: absolute;
    overflow: hidden;

    border: var(--ty-border);
    box-shadow: var(--ty-shadow);
    background: var(--ty-cream);
}

.ty-business-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ty-business-main-image {
    top: 40px;
    right: 0;
    width: 74%;
    height: 520px;
    z-index: 3;
}

.ty-business-second-image {
    left: 0;
    bottom: 40px;
    width: 48%;
    height: 280px;
    z-index: 5;
}

.ty-business-shape-circle {
    position: absolute;
    top: -60px;
    right: -100px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: var(--ty-mint);
    z-index: 1;
}

.ty-business-sticker {
    position: absolute;
    left: 40px;
    top: 60px;
    z-index: 6;

    padding: 18px 22px;
    border: var(--ty-border);
    background: var(--ty-yellow);

    font-size: 16px;
    line-height: 1.1;
    font-weight: 800;
    text-transform: uppercase;
    transform: rotate(-5deg);
}


/* =========================================================
   09  HERO – FAQ PAGE
========================================================= */

.ty-faq-hero {
    max-width: 1100px;
    margin-bottom: 90px;
}

.ty-faq-hero h1 {
    margin: 0 0 28px;
    font-size: clamp(62px, 8vw, 132px);
    line-height: .88;
    letter-spacing: -4px;
    text-transform: uppercase;
}

.ty-faq-hero p {
    max-width: 760px;
    margin: 0;
    font-size: 28px;
    line-height: 1.35;
    font-weight: 700;
}


/* =========================================================
   10  SECTION – DISCIPLINES (Sticky-Scroll)
  ========================================================= */
/* =========================================================
   DISCIPLINES V3 – Grid 2x2, versetzt, ohne Sidebar
   Ersetzt V2 komplett. Linke Sidebar entfällt.
========================================================= */

.ty-disciplines-section--v3 {
    position: relative;
    padding: var(--ty-section-space) 0;
    background: var(--ty-cream);
    overflow: hidden;
}

.ty-disciplines-section--v3 .ty-disciplines-inner {
    max-width: var(--ty-max);
    margin: 0 auto;
    padding: 0 var(--ty-pad);
}


/* --- Header über dem Grid --- */

.ty-disciplines-section--v3 .ty-disciplines-head {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 50px;
    align-items: end;

    margin-bottom: 80px;
}

.ty-disciplines-section--v3 .ty-disciplines-head-left .ty-section-label {
    margin-bottom: 24px;
}

.ty-disciplines-section--v3 .ty-disciplines-head-left h2 {
    margin: 0;
    font-family: var(--ty-font-headline);
    font-size: clamp(48px, 6vw, 96px);
    line-height: 0.88;
	 max-width: 100%;
    letter-spacing: -3px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--ty-black);
}

.ty-disciplines-section--v3 .ty-disciplines-head-right p {
	margin: 0;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--ty-black);
    max-width: 100%
}

.ty-disciplines-section--v3 .ty-disciplines-head-right p strong {
    color: var(--ty-blue);
    font-weight: 800;
}


/* --- Grid: 2 Spalten, versetzt --- */

.ty-disciplines-section--v3 .ty-disciplines-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: start;
}

/* Versatz: Boxen 2 + 4 leicht nach unten (Spielfeld-Effekt) */
.ty-disciplines-section--v3 .ty-disciplines-grid > article:nth-child(2),
.ty-disciplines-section--v3 .ty-disciplines-grid > article:nth-child(4) {
    margin-top: 60px;
}


/* --- Box-Styling --- */

.ty-disciplines-section--v3 .ty-discipline-card {
    position: relative;
    overflow: hidden;

    height: 420px;
    padding: 0;

    border: var(--ty-border);
    box-shadow: var(--ty-shadow);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

/* Bild: füllt komplett, dezent zoombar bei Hover */
.ty-disciplines-section--v3 .ty-discipline-card-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.ty-disciplines-section--v3 .ty-discipline-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* Gradient für Lesbarkeit unten */
.ty-disciplines-section--v3 .ty-discipline-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 65%;
    z-index: 2;

    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(18, 18, 18, 0) 25%,
        rgba(18, 18, 18, 0.85) 100%
    );
    pointer-events: none;
}


/* --- Info-Block (Text-Overlay unten) --- */

.ty-disciplines-section--v3 .ty-discipline-card-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;

    padding: 26px 30px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ty-disciplines-section--v3 .ty-discipline-card-info h3 {
    margin: 0;
    font-family: var(--ty-font-headline);
    font-size: clamp(28px, 2.6vw, 42px);
    line-height: 1;
    letter-spacing: -1px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--ty-white);
}

.ty-disciplines-section--v3 .ty-discipline-card-info p {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--ty-white);
    opacity: 0.95;
}


/* --- Farbiger Punkt oben rechts (Disziplin-Identifier) --- */

.ty-disciplines-section--v3 .ty-discipline-card-dot {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 4;

    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid var(--ty-black);
}

.ty-disciplines-section--v3 .ty-discipline-card[data-color="yellow"] .ty-discipline-card-dot { background: var(--ty-yellow); }
.ty-disciplines-section--v3 .ty-discipline-card[data-color="mint"]   .ty-discipline-card-dot { background: var(--ty-mint); }
.ty-disciplines-section--v3 .ty-discipline-card[data-color="pink"]   .ty-discipline-card-dot { background: var(--ty-pink); }
.ty-disciplines-section--v3 .ty-discipline-card[data-color="blue"]   .ty-discipline-card-dot { background: var(--ty-blue); }


/* --- Hover-Effekt: Box hebt sich + Bild zoomt leicht --- */

.ty-disciplines-section--v3 .ty-discipline-card:hover {
    transform: translate(-4px, -4px);
    box-shadow: 14px 14px 0 var(--ty-black);
}

.ty-disciplines-section--v3 .ty-discipline-card:hover .ty-discipline-card-image img {
    transform: scale(1.06);
}


/* --- Outro nach den 4 Boxen --- */

.ty-disciplines-section--v3 .ty-disciplines-outro {
    margin-top: 80px;
    text-align: center;
}

.ty-disciplines-section--v3 .ty-disciplines-outro-inner {
    display: inline-block;
    padding: 28px 38px;

    border: var(--ty-border);
    background: var(--ty-yellow);
    color: var(--ty-black);
    box-shadow: var(--ty-shadow);

    transform: rotate(-1deg);
}

.ty-disciplines-section--v3 .ty-disciplines-outro-inner p {
    margin: 0;
    font-family: var(--ty-font-headline);
    font-size: clamp(22px, 2vw, 32px);
    line-height: 1.2;
    letter-spacing: -0.5px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--ty-black);
}

.ty-disciplines-section--v3 .ty-disciplines-outro-inner strong {
    display: inline;
    color: var(--ty-blue);
    margin-left: 8px;
}


/* =========================================================
   ACCESSIBILITY – Reduced Motion & Touch
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .ty-disciplines-section--v3 .ty-discipline-card,
    .ty-disciplines-section--v3 .ty-discipline-card-image img {
        transition: none;
    }

    .ty-disciplines-section--v3 .ty-discipline-card:hover {
        transform: none;
        box-shadow: var(--ty-shadow);
    }

    .ty-disciplines-section--v3 .ty-discipline-card:hover .ty-discipline-card-image img {
        transform: none;
    }
}

@media (hover: none) {
    .ty-disciplines-section--v3 .ty-discipline-card:hover {
        transform: none;
        box-shadow: var(--ty-shadow);
    }

    .ty-disciplines-section--v3 .ty-discipline-card:hover .ty-discipline-card-image img {
        transform: none;
    }
}


/* =========================================================
   RESPONSIVE
========================================================= */

/* Tablet: kompakter aber noch 2-spaltig */
@media (max-width: 1100px) {
    .ty-disciplines-section--v3 .ty-discipline-card {
        height: 360px;
    }

    .ty-disciplines-section--v3 .ty-disciplines-grid > article:nth-child(2),
    .ty-disciplines-section--v3 .ty-disciplines-grid > article:nth-child(4) {
        margin-top: 40px;
    }
}

/* Tablet/Klein: einspaltig, Versatz weg */
@media (max-width: 800px) {
    .ty-disciplines-section--v3 .ty-disciplines-head {
        grid-template-columns: 1.7fr 1fr;
        gap: 40px;
    }

    .ty-disciplines-section--v3 .ty-disciplines-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .ty-disciplines-section--v3 .ty-disciplines-grid > article:nth-child(2),
    .ty-disciplines-section--v3 .ty-disciplines-grid > article:nth-child(4) {
        margin-top: 0;
    }

    .ty-disciplines-section--v3 .ty-discipline-card {
        height: 320px;
    }
}

/* Mobile: kleiner Padding, kleinere Buttons */
@media (max-width: 767px) {
    .ty-disciplines-section--v3 .ty-disciplines-inner {
        padding: 0 var(--ty-pad-mobile);
    }

    .ty-disciplines-section--v3 .ty-discipline-card {
        height: 280px;
    }

    .ty-disciplines-section--v3 .ty-discipline-card-info {
        padding: 22px 24px;
    }

    .ty-disciplines-section--v3 .ty-discipline-card-info h3 {
        font-size: 26px;
    }

    .ty-disciplines-section--v3 .ty-discipline-card-info p {
        font-size: 14px;
    }

    .ty-disciplines-section--v3 .ty-discipline-card-dot {
        top: 18px;
        right: 18px;
        width: 18px;
        height: 18px;
    }

    .ty-disciplines-section--v3 .ty-disciplines-outro {
        margin-top: 60px;
    }

    .ty-disciplines-section--v3 .ty-disciplines-outro-inner {
        padding: 22px 26px;
    }
}

/* =========================================================
   12  SECTION – FLOW TIMELINE
   5 Schritte versetzt um eine horizontale Linie
========================================================= */

.ty-flow-section-timeline {
    position: relative;
    overflow: hidden;
    padding: var(--ty-section-space) 0;
    background: var(--ty-cream);
}

.ty-flow-timeline-inner {
    max-width: var(--ty-max);
    margin: 0 auto;
    padding: 0 var(--ty-pad);
}

/* Header */
.ty-flow-timeline-header {
    margin-bottom: 20px;
}

.ty-flow-timeline-header .ty-section-label {
    margin-bottom: 28px;
}

.ty-flow-timeline-header-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: end;
}

.ty-flow-timeline-header-grid h2 {
    margin: 0;
    font-size: var(--ty-h2-size);
    line-height: var(--ty-headline-line);
    letter-spacing: var(--ty-headline-tight);
    font-weight: 800;
}

.ty-flow-timeline-header-grid p {
    max-width: 560px;
    margin: 0;
    font-size: 26px;
    line-height: 1.25;
    font-weight: 800;
}

/* Timeline-Track */
.ty-flow-track {
    position: relative;
    padding: 60px 0;
}

.ty-flow-track::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--ty-black);
    transform: translateY(-50%);
    z-index: 1;
}

.ty-flow-timeline-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    align-items: center;
}

/* Step-Karte */
.ty-flow-timeline-step {
    position: relative;
    padding: 36px 28px;

    border: var(--ty-border);
    background: var(--ty-white);
    color: var(--ty-black);
    box-shadow: var(--ty-shadow);

    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Punkt auf der Linie */
.ty-flow-timeline-step::before {
    content: "";
    position: absolute;
    left: 50%;
    width: 24px;
    height: 24px;
    border: var(--ty-border-small);
    border-radius: 50%;
    background: var(--ty-black);
    transform: translateX(-50%);
    z-index: 3;
}

/* Steps unten (01, 03, 05): Punkt + Linie über der Karte */
.ty-flow-timeline-step.is-bottom {
    margin-top: 60px;
}

.ty-flow-timeline-step.is-bottom::before {
    top: -72px;
}

.ty-flow-timeline-step.is-bottom::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -60px;
    width: 4px;
    height: 60px;
    background: var(--ty-black);
    transform: translateX(-50%);
    z-index: 2;
}

/* Steps oben (02, 04): Punkt + Linie unter der Karte */
.ty-flow-timeline-step.is-top {
    margin-bottom: 60px;
}

.ty-flow-timeline-step.is-top::before {
    bottom: -72px;
}

.ty-flow-timeline-step.is-top::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -60px;
    width: 4px;
    height: 60px;
    background: var(--ty-black);
    transform: translateX(-50%);
    z-index: 2;
}

/* Step-Inhalte */
.ty-flow-timeline-number {
    margin: 0;
    font-family: var(--ty-font-headline);
    font-size: clamp(58px, 5vw, 96px);
    line-height: 0.85;
    letter-spacing: -3px;
    font-weight: 800;
    color: var(--ty-black);
}

.ty-flow-timeline-step h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.05;
    letter-spacing: -0.5px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--ty-black);
}

.ty-flow-timeline-step p {
    margin: 0;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--ty-black);
}

/* Farb-Varianten */
.ty-flow-timeline-step.color-yellow { background: var(--ty-yellow); }
.ty-flow-timeline-step.color-mint   { background: var(--ty-mint); }
.ty-flow-timeline-step.color-pink   { background: var(--ty-pink); }

.ty-flow-timeline-step.color-orange {
    background: var(--ty-orange);
    color: var(--ty-black);
}

/* Final-Step: leicht hervorgehoben */
.ty-flow-timeline-step.is-final {
    transform: scale(1.05);
}

.ty-flow-timeline-step.is-final .ty-flow-timeline-number {
    font-size: clamp(70px, 6vw, 110px);
}


/* =========================================================
   13  SECTION – AUDIENCE SPLIT
   Friends-Karte (Yellow) vs Business-Karte (Blue)
========================================================= */

.ty-audience-section {
    position: relative;
    overflow: hidden;
    padding: var(--ty-section-space) 0;
    background: var(--ty-cream);
}

.ty-audience-inner {
    max-width: var(--ty-max);
    margin: 0 auto;
    padding: 0 var(--ty-pad);
}

.ty-audience-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.ty-audience-card {
    position: relative;
    overflow: hidden;

    min-height: 620px;
    padding: 46px;

    border: var(--ty-border);
    color: var(--ty-black);
}

.ty-audience-headlink{
  text-decoration:none;
  color:inherit;
  display:block;
}

.ty-audience-headlink:hover .ty-audience-title{
  opacity:0.8;
}

.ty-audience-friends  { background: var(--ty-yellow); }

.ty-audience-business {
    background: var(--ty-blue);
    color: var(--ty-white);
}

.ty-audience-business .ty-audience-title {
    color: var(--ty-white);
}

.ty-audience-kicker {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 54px;
    margin: 0 0 28px;
    padding: 0 16px;

    border: var(--ty-border-small);
    background: var(--ty-white);
    color: var(--ty-black);

    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ty-audience-card h2 {
    position: relative;
    z-index: 2;
    max-width: 620px;
    margin: 0 0 34px;
    font-size: clamp(42px, 4.4vw, 76px);
    line-height: var(--ty-headline-line);
    letter-spacing: var(--ty-headline-tight);
    font-weight: 800;
}

.ty-audience-card ul {
    position: relative;
    z-index: 2;
    margin: 0 0 42px;
    padding: 0;
    list-style: none;
}

.ty-audience-card li {
    position: relative;
    margin-bottom: 16px;
    padding-left: 34px;
    font-size: var(--ty-copy-md);
    line-height: 1.25;
    font-weight: 800;
}

.ty-audience-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 800;
}

.ty-audience-card .ty-home-button {
    position: relative;
    z-index: 2;
}

.ty-audience-business .ty-home-button-secondary {
    background: var(--ty-white);
    color: var(--ty-black) !important;
}

/* Dekoratives Pattern hinter den Karten */
.ty-audience-pattern {
    position: absolute;
    right: -90px;
    bottom: -90px;

    width: 360px;
    height: 360px;

    border-radius: 50%;
    opacity: var(--ty-pattern-opacity-medium);

    background:
        radial-gradient(circle at center, transparent 0 34%, var(--ty-white) 35% 49%, transparent 50%),
        var(--ty-pink);

    z-index: 1;
}

.ty-audience-business .ty-audience-pattern {
    background: repeating-linear-gradient(
        -45deg,
        var(--ty-white) 0,
        var(--ty-white) 24px,
        transparent 24px,
        transparent 52px
    );
    opacity: var(--ty-pattern-opacity-soft);
    border-radius: 0;
}

/* "Empfohlen"-Sticker oben rechts */
.ty-audience-sticker {
    position: absolute;
    top: 28px;
    right: 28px;
    z-index: 3;

    max-width: 210px;
    padding: 12px 14px;

    border: var(--ty-border-small);
    background: var(--ty-pink);
    color: var(--ty-black);

    font-size: 13px;
    line-height: 1.15;
    font-weight: 800;
    text-transform: uppercase;
    transform: rotate(3deg);
}

.ty-audience-sticker {
  text-decoration: none !important;
  cursor: pointer;
  display: inline-block;
}

.ty-audience-sticker:hover {
  transform: rotate(3deg) translate(-2px, -2px);
}

.ty-anchor-offset {
  display: block;
  position: relative;
  top: -120px;
  height: 0;
  visibility: hidden;
}

#teambuilding-reflexion{
  scroll-margin-top:120px;
}

/* =========================================================
   14  SECTION – COMMUNITY DAY TICKET
========================================================= */

:root {
    --ticket-stub-width: 320px;
}

.ty-community-section--ticket {
    position: relative;
    overflow: hidden;
    padding: var(--ty-section-space) 0;
    background: var(--ty-mint);
}

.ty-community-section--ticket .ty-community-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 var(--ty-pad);
}

/* Ticket Container */

.ty-ticket {
    position: relative;
    display: grid;
    grid-template-columns: var(--ticket-stub-width) 1fr;
    align-items: stretch;

    background: var(--ty-cream);
    border: var(--ty-border);
    box-shadow: 14px 14px 0 var(--ty-black);
}

/* Stub */

.ty-ticket-stub {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 36px 32px;

    background: var(--ty-yellow);
    color: var(--ty-black);
    border-right: var(--ty-border-small);
}

.ty-ticket-stub-label,
.ty-ticket-time-label,
.ty-ticket-id {
    font-family: var(--ty-font-copy);
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.ty-ticket-stub-label {
    margin-bottom: 14px;
}

.ty-ticket-day {
    margin: 0 0 8px;
    font-family: var(--ty-font-headline);
    font-size: clamp(44px, 5vw, 64px);
    line-height: 0.88;
    letter-spacing: -2px;
    font-weight: 800;
    text-transform: uppercase;
}

.ty-ticket-frequency {
    margin: 0 0 28px;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ty-ticket-time {
    padding-top: 22px;
    border-top: 3px solid var(--ty-black);
}

.ty-ticket-time-label {
    display: block;
    margin-bottom: 8px;
}

.ty-ticket-time-value {
    display: block;
    font-family: var(--ty-font-headline);
    font-size: 26px;
    line-height: 1;
    letter-spacing: -1px;
    font-weight: 800;
}

.ty-ticket-id {
    margin-top: 28px;
    font-size: 10px;
    opacity: 0.6;
}

/* Perforation + Notches */

.ty-ticket-perforation {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: var(--ticket-stub-width);
    transform: translateX(-50%);

    width: 4px;

    background-image: linear-gradient(
        to bottom,
        var(--ty-black) 0%,
        var(--ty-black) 50%,
        transparent 50%,
        transparent 100%
    );
    background-size: 4px 12px;
    background-repeat: repeat-y;

    z-index: 3;
    pointer-events: none;
}

.ty-ticket-notch {
    position: absolute;
    left: var(--ticket-stub-width);
    transform: translateX(-50%);

    width: 24px;
    height: 24px;

    background: var(--ty-mint);
    border: 3px solid var(--ty-black);
    border-radius: 50%;

    z-index: 4;
}

.ty-ticket-notch--top {
    top: -14px;
}

.ty-ticket-notch--bottom {
    bottom: -14px;
}

/* Body */

.ty-ticket-body {
    position: relative;

    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 36px;
    align-items: center;

    padding: 40px 42px;
}

.ty-ticket-content h2 {
    margin: 0 0 16px;

    font-family: var(--ty-font-headline);
    font-size: clamp(36px, 4vw, 56px);
    line-height: 0.92;
    letter-spacing: -2px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--ty-black);
}

.ty-ticket-lead {
    margin: 0 0 24px;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--ty-blue);
}

.ty-ticket-content ul {
    margin: 0 0 28px;
    padding: 0;
    list-style: none !important;
}

.ty-ticket-content li {
    position: relative;

    margin-bottom: 8px;
    padding-left: 22px;

    list-style: none !important;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--ty-black);
}

.ty-ticket-content li::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 0;

    color: var(--ty-blue);
    font-weight: 800;
}

.ty-ticket-content li::marker {
    content: "" !important;
    display: none !important;
}

/* Price */

.ty-ticket-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;

    padding-top: 22px;
    border-top: 3px solid var(--ty-black);
}

.ty-ticket-price-label {
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ty-black);
}

.ty-ticket-price-value {
    font-family: var(--ty-font-headline);
    font-size: 34px;
    line-height: 1;
    letter-spacing: -1px;
    font-weight: 800;
    color: var(--ty-blue);
}

.ty-ticket-price-note {
    font-size: 13px;
    font-weight: 700;
    color: var(--ty-black);
    opacity: 0.7;
}

/* Visual */

.ty-ticket-visual {
    position: relative;

    aspect-ratio: 1 / 1;
    overflow: hidden;

    border: var(--ty-border-small);
    box-shadow: 6px 6px 0 var(--ty-black);
}

.ty-ticket-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ty-ticket-visual-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;

    padding: 8px 12px;

    border: var(--ty-border-small);
    background: var(--ty-pink);
    color: var(--ty-black);

    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;

    transform: rotate(-4deg);
}

/* CTA Buttons */

.ty-ticket-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;

    margin-top: 36px;
}

.ty-ticket-main-cta,
.ty-ticket-instagram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 56px;
    padding: 0 28px;

    border: var(--ty-border-small);
    box-shadow: 6px 6px 0 var(--ty-black);

    font-family: var(--ty-font-copy);
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none !important;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.ty-ticket-main-cta {
    background: var(--ty-orange);
    color: var(--ty-black) !important;
}

.ty-ticket-instagram {
    background: var(--ty-white);
    color: var(--ty-black) !important;
}

.ty-ticket-main-cta:hover,
.ty-ticket-instagram:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--ty-black);
}

.ty-ticket-instagram svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Anchor Offset */

.ty-anchor-offset {
    display: block;
    position: relative;
    top: -120px;
    height: 0;
    visibility: hidden;
}

/* Responsive */

@media (max-width: 1100px) {
    :root {
        --ticket-stub-width: 280px;
    }

    .ty-ticket-body {
        grid-template-columns: 1fr 260px;
        gap: 28px;
        padding: 32px;
    }
}

@media (max-width: 800px) {
    .ty-ticket {
        grid-template-columns: 1fr;
    }

    .ty-ticket-stub {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;

        padding: 26px;
        border-right: 0;
        border-bottom: var(--ty-border-small);
    }

    .ty-ticket-stub > div:first-child {
        flex: 1 1 60%;
    }

    .ty-ticket-day {
        font-size: 40px;
    }

    .ty-ticket-frequency {
        margin-bottom: 0;
    }

    .ty-ticket-time {
        flex: 0 0 auto;
        padding-top: 0;
        border-top: 0;
        text-align: right;
    }

    .ty-ticket-id {
        flex: 1 1 100%;
        margin-top: 4px;
    }

    .ty-ticket-perforation {
        display: none;
    }

    .ty-ticket-notch {
        display: none;
    }

    .ty-ticket-body {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 28px 26px;
    }

    .ty-ticket-visual {
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    .ty-community-section--ticket {
        padding: var(--ty-section-space-mobile) 0;
    }

    .ty-community-section--ticket .ty-community-inner {
        padding: 0 var(--ty-pad-mobile);
    }

    .ty-ticket-stub {
        flex-direction: column;
        gap: 18px;
    }

    .ty-ticket-time {
        text-align: left;
    }

    .ty-ticket-content h2 {
        font-size: 32px;
    }

    .ty-ticket-price-value {
        font-size: 28px;
    }

    .ty-ticket-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ty-ticket-main-cta,
    .ty-ticket-instagram {
        width: 100%;
    }
}
	
	.ty-instagram-icon {
    width: 28px;
    height: 28px;
    display: block;
    flex-shrink: 0;
}


/* =========================================================
   15  SECTION – ABOUT / WHY THE YARD
   Zweispaltig: sticky Headline links, Content rechts
========================================================= */


.ty-groups-hero {
    position: relative;
    overflow: hidden;
    padding: 120px 0 100px;
    background: var(--ty-cream);
}

.ty-groups-hero-inner {
    max-width: var(--ty-max);
    margin: 0 auto;
    padding: 0 var(--ty-pad);
}

.ty-groups-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 70px;
    align-items: center;
}

.ty-groups-hero-content h1 {
    max-width: 900px;
    margin: 0 0 30px;

    font-size: clamp(58px, 7vw, 118px);
    line-height: 0.9;
    letter-spacing: -4px;
}

.ty-groups-hero-lead {
    max-width: 760px;
    margin: 0 0 38px;

    font-size: 24px;
    line-height: 1.4;
    font-weight: 700;
}

.ty-groups-hero-visual {
    position: relative;
    min-height: 560px;
}

.ty-groups-hero-visual img,
.ty-groups-hero-visual video {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;

    border: var(--ty-border);
    box-shadow: var(--ty-shadow);
    background: var(--ty-white);
}

.ty-groups-hero-sticker {
    position: absolute;
    right: -20px;
    bottom: 36px;
    z-index: 3;

    max-width: 280px;
    padding: 18px 22px;

    border: var(--ty-border);
    background: var(--ty-pink);
    color: var(--ty-black);
    box-shadow: 8px 8px 0 var(--ty-black);

    font-size: 15px;
    line-height: 1.15;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;

    transform: rotate(-4deg);
}

@media (max-width: 980px) {
    .ty-groups-hero {
        padding: 90px 0 76px;
    }

    .ty-groups-hero-inner {
        padding: 0 var(--ty-pad-mobile);
    }

    .ty-groups-hero-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .ty-groups-hero-content h1 {
        font-size: clamp(52px, 13vw, 82px);
        letter-spacing: -2px;
    }

    .ty-groups-hero-lead {
        font-size: 20px;
    }

    .ty-groups-hero-visual {
        min-height: auto;
    }

    .ty-groups-hero-visual img,
    .ty-groups-hero-visual video {
        height: 360px;
    }

    .ty-groups-hero-sticker {
        right: 18px;
        bottom: -22px;
        max-width: 240px;
    }
}

@media (max-width: 600px) {
    .ty-groups-hero-visual img,
    .ty-groups-hero-visual video {
        height: 300px;
    }

    .ty-groups-hero-sticker {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 22px;
        max-width: 100%;
    }
}

	
.et-fb .ty-groups-hero,
.et-fb .ty-groups-hero * {
    box-sizing: border-box;
}

.et-fb .ty-groups-hero-grid {
    width: 100%;
}

.et-fb .ty-groups-hero-visual img,
.et-fb .ty-groups-hero-visual video {
    max-width: 100%;
}
	
/* =========================================================
   16  SECTION – ABOUT ACTION GRID
   "Jetzt buchen ODER Anfrage senden" – CTA + Formular getrennt
========================================================= */

.ty-about-action-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 36px;
    align-items: stretch;
    margin-top: 90px;
}

.ty-about-action-grid .ty-about-cta {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ODER-Trenner: senkrechter Strich mit Kreis-Badge */
.ty-about-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ty-about-divider::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background: var(--ty-black);
    transform: translateX(-50%);
}

.ty-about-divider span {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;

    border: var(--ty-border);
    border-radius: 50%;
    background: var(--ty-cream);
    color: var(--ty-black);

    font-family: var(--ty-font-headline);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}


/* =========================================================
   17  SECTION – BUSINESS FACTS BAR
========================================================= */

.ty-business-facts {
    padding: 0 0 90px;
    background: var(--ty-white);
}

.ty-business-facts-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    max-width: var(--ty-max);
    margin: 0 auto;
    padding: 0 var(--ty-pad);

    border: var(--ty-border);
}

.ty-business-fact {
    padding: 34px 28px;
    border-right: var(--ty-border-small);
    background: var(--ty-cream);
}

.ty-business-fact:last-child {
    border-right: 0;
}

.ty-business-fact strong {
    display: block;
    margin-bottom: 10px;

    font-size: 24px;
    line-height: 1.1;
    font-weight: 800;
}

.ty-business-fact span {
    display: block;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
}


/* =========================================================
   18  SECTION – BUSINESS PACKAGES
========================================================= */

.ty-business-packages {
    padding: 120px 0;
    background: var(--ty-cream);
}

.ty-business-packages-inner {
    max-width: var(--ty-max);
    margin: 0 auto;
    padding: 0 var(--ty-pad);
}

.ty-business-packages h2 {
    max-width: 980px;
    margin: 0 0 80px;
    font-size: clamp(54px, 6vw, 104px);
    line-height: .9;
    letter-spacing: -4px;
}

.ty-business-package {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 70px;
    align-items: center;

    margin-bottom: 42px;
    padding: 48px;

    border: var(--ty-border);
    overflow: hidden;
    position: relative;
}

/* Package-Farben */
.ty-package-yellow { background: var(--ty-yellow); }
.ty-package-mint   { background: var(--ty-mint); }

.ty-package-blue {
    background: var(--ty-blue);
    color: var(--ty-white);
}

.ty-package-blue h3,
.ty-package-blue p,
.ty-package-blue strong,
.ty-package-blue span {
    color: var(--ty-white);
}

/* Blau-Paket Kicker-Fix: weißer Hintergrund braucht schwarzen Text */
.ty-package-blue .ty-business-package-kicker {
    background: var(--ty-white) !important;
    color: var(--ty-black) !important;
}

/* Visual-Seite */
.ty-business-package-visual {
    position: relative;
    min-height: 460px;
}

.ty-business-package-pattern {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 220px;
    height: 220px;

    background: radial-gradient(
        circle at center,
        transparent 0 32%,
        rgba(18,18,18,.12) 33% 48%,
        transparent 49%
    );
    z-index: 1;
}

.ty-package-blue .ty-business-package-pattern {
    background: repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,.18) 0,
        rgba(255,255,255,.18) 20px,
        transparent 20px,
        transparent 42px
    );
}

.ty-business-package-image {
    position: absolute;
    left: 0;
    top: 40px;
    width: 82%;
    height: 420px;

    overflow: hidden;
    border: var(--ty-border);
    box-shadow: var(--ty-shadow);
    z-index: 3;
}

.ty-business-package-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content-Seite */
.ty-business-package-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    margin-bottom: 24px;
    padding: 0 14px;

    border: var(--ty-border-small);
    background: var(--ty-white);
    color: var(--ty-black);

    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.ty-business-package h3 {
    margin: 0 0 24px;
    font-size: clamp(42px, 4vw, 72px);
    line-height: .92;
    letter-spacing: -3px;
}

.ty-business-package p {
    max-width: 720px;
    margin: 0 0 34px;
    font-size: 24px;
    line-height: 1.4;
    font-weight: 700;
}

/* List, Result, Price, Grid */
.ty-business-package-list {
    display: grid;
    gap: 14px;
    margin-bottom: 34px;
}

.ty-business-package-list div {
    padding: 18px 20px;
    border: var(--ty-border-small);
    background: rgba(255,255,255,.55);
    font-size: 18px;
    line-height: 1.3;
}

.ty-package-blue .ty-business-package-list div {
    background: rgba(255,255,255,.08);
}

.ty-business-package-result {
    margin-bottom: 34px;
}

.ty-business-package-result strong {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    text-transform: uppercase;
}

.ty-business-package-result span {
    font-size: 28px;
    line-height: 1.25;
    font-weight: 800;
}

.ty-business-package-price {
    margin-bottom: 34px;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
}

.ty-business-package-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 34px;
}

.ty-business-package-grid div {
    padding: 20px;
    border: var(--ty-border-small);
    background: rgba(255,255,255,.08);
}

.ty-business-package-grid span {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.ty-business-package-grid strong {
    font-size: 20px;
    line-height: 1.2;
}


/* =========================================================
   19  SECTION – BUSINESS PROCESS (Nummer-Kreise)
   Vier Schritte horizontal mit verbindender Linie
========================================================= */

.ty-business-process-astro {
    padding: var(--ty-section-space) 0;
    background: var(--ty-white);
}

.ty-business-process-astro-inner {
    max-width: var(--ty-max);
    margin: 0 auto;
    padding: 0 var(--ty-pad);
}

.ty-business-process-astro-head {
    max-width: 1000px;
    margin: 0 auto 80px;
    text-align: center;
}

.ty-business-process-astro-head .ty-section-label {
    display: inline-flex;
    margin-bottom: 28px;
}

.ty-business-process-astro-head h2 {
    margin: 0 0 22px;
    font-size: clamp(46px, 5.4vw, 84px);
    line-height: var(--ty-headline-line);
    letter-spacing: var(--ty-headline-tight);
    font-weight: 800;
}

.ty-business-process-astro-head p {
    margin: 0;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 700;
}

.ty-business-process-astro-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

/* Horizontale Linie hinter den Nummer-Kreisen */
.ty-business-process-astro-grid::before {
    content: "";
    position: absolute;
    top: 50px;
    left: 12%;
    right: 12%;
    height: 4px;
    background: var(--ty-black);
    z-index: 0;
}

.ty-business-process-astro-step {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    padding: 32px 22px;

    background: var(--ty-cream);
    border: var(--ty-border);
    box-shadow: var(--ty-shadow);
}

.ty-business-process-astro-number {
    width: 92px;
    height: 92px;
    margin: -76px 0 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: var(--ty-border);
    background: var(--ty-yellow);
    color: var(--ty-black);

    font-family: var(--ty-font-headline);
    font-size: 36px;
    line-height: 1;
    letter-spacing: -1px;
    font-weight: 800;
}

/* Farbliche Variation der Nummern */
.ty-business-process-astro-step:nth-child(1) .ty-business-process-astro-number { background: var(--ty-yellow); }
.ty-business-process-astro-step:nth-child(2) .ty-business-process-astro-number { background: var(--ty-mint); }
.ty-business-process-astro-step:nth-child(3) .ty-business-process-astro-number { background: var(--ty-pink); }
.ty-business-process-astro-step:nth-child(4) .ty-business-process-astro-number {
    background: var(--ty-blue);
    color: var(--ty-white);
}

.ty-business-process-astro-step h3 {
    margin: 0 0 14px;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -0.5px;
    font-weight: 800;
    text-transform: uppercase;
}

.ty-business-process-astro-step p {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
}


/* =========================================================
   20  SECTION – BUSINESS EXTRAS
========================================================= */

.ty-business-extras {
    position: relative;
    overflow: hidden;
    padding: var(--ty-section-space) 0;
    background: var(--ty-white);
}

.ty-business-extras-inner {
    max-width: var(--ty-max);
    margin: 0 auto;
    padding: 0 var(--ty-pad);
}

.ty-business-extras-head {
    max-width: 920px;
    margin-bottom: 70px;
}

.ty-business-extras-head h2 {
    margin: 0 0 24px;
    font-size: clamp(58px, 6vw, 108px);
    line-height: .9;
    letter-spacing: -4px;
}

.ty-business-extras-head p {
    margin: 0;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 700;
}

.ty-business-extras-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.ty-business-extra {
    min-height: 300px;
    padding: 34px;
    border: var(--ty-border);
    box-shadow: var(--ty-shadow);
}

.ty-business-extra h3 {
    margin: 0 0 20px;
    font-size: 34px;
    line-height: .95;
    letter-spacing: -1px;
}

.ty-business-extra p {
    margin: 0;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 700;
}

.ty-extra-yellow { background: var(--ty-yellow); }
.ty-extra-mint   { background: var(--ty-mint); }
.ty-extra-pink   { background: var(--ty-pink); }

.ty-extra-blue {
    background: var(--ty-blue);
}

.ty-extra-blue h3,
.ty-extra-blue p {
    color: var(--ty-white);
}


/* =========================================================
   21  SECTION – BUSINESS TEAM DYNAMICS
========================================================= */

.ty-business-dynamics {
    position: relative;
    overflow: hidden;
    padding: var(--ty-section-space) 0;
    background: var(--ty-cream);
}

.ty-business-dynamics-inner {
    max-width: var(--ty-max);
    margin: 0 auto;
    padding: 0 var(--ty-pad);
}

.ty-business-dynamics-head {
    max-width: 920px;
    margin-bottom: 70px;
}

.ty-business-dynamics-head h2 {
    margin: 0 0 24px;
    font-size: clamp(58px, 6vw, 108px);
    line-height: .9;
    letter-spacing: -4px;
}

.ty-business-dynamics-head p {
    margin: 0;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 700;
}

.ty-business-dynamics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.ty-business-dynamic {
    position: relative;
    overflow: hidden;

    min-height: 340px;
    padding: 34px;

    border: var(--ty-border);
    box-shadow: var(--ty-shadow);
}

.ty-business-dynamic::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -70px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
}

.ty-business-dynamic span {
    position: relative;
    z-index: 2;
    display: block;
    margin-bottom: 90px;
    font-size: 18px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .08em;
}

.ty-business-dynamic h3 {
    position: relative;
    z-index: 2;
    margin: 0;
    font-size: 34px;
    line-height: 1.4;
    letter-spacing: -1px;
}

.ty-dynamic-yellow { background: var(--ty-yellow); }
.ty-dynamic-mint   { background: var(--ty-mint); }
.ty-dynamic-pink   { background: var(--ty-pink); }

.ty-dynamic-blue {
    background: var(--ty-blue);
}

.ty-dynamic-blue span,
.ty-dynamic-blue h3 {
    color: var(--ty-white);
}


/* =========================================================
   22  SECTION – BUSINESS TESTIMONIALS
========================================================= */

.ty-business-testimonials {
    position: relative;
    overflow: hidden;
    padding: var(--ty-section-space) 0;
    background: var(--ty-cream);
}

.ty-business-testimonials-inner {
    max-width: var(--ty-max);
    margin: 0 auto;
    padding: 0 var(--ty-pad);
}

.ty-business-testimonials-head {
    max-width: 920px;
    margin-bottom: 70px;
}

.ty-business-testimonials-head h2 {
    margin: 0;
    font-size: clamp(58px, 6vw, 108px);
    line-height: .9;
    letter-spacing: -4px;
}

.ty-business-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 22px;
}

.ty-business-quote {
    position: relative;
    padding: 34px;
    border: var(--ty-border);
    box-shadow: var(--ty-shadow);
    min-height: 240px;

    display: flex;
    align-items: flex-end;
}

.ty-business-quote p {
    margin: 0;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 800;
}

/* Asymmetrisches Layout */
.ty-business-quote:nth-child(1) { grid-column: span 5; transform: rotate(-2deg);  }
.ty-business-quote:nth-child(2) { grid-column: span 7; transform: rotate(1.5deg); }
.ty-business-quote:nth-child(3) { grid-column: span 4; transform: rotate(-1deg);  }
.ty-business-quote:nth-child(4) { grid-column: span 4; transform: rotate(2deg);   }
.ty-business-quote:nth-child(5) { grid-column: span 4; transform: rotate(-1.5deg); }

.ty-business-quote-yellow { background: var(--ty-yellow); }
.ty-business-quote-pink   { background: var(--ty-pink); }
.ty-business-quote-mint   { background: var(--ty-mint); }
.ty-business-quote-white  { background: var(--ty-white); }

.ty-business-quote-blue {
    background: var(--ty-blue);
}

.ty-business-quote-blue p {
    color: var(--ty-white);
}


/* =========================================================
   23  SECTION – BUSINESS CONTACT
========================================================= */

.ty-business-contact {
    position: relative;
    overflow: hidden;
    padding: var(--ty-section-space) 0;
    background: var(--ty-white);
}

.ty-business-contact-inner {
    max-width: var(--ty-max);
    margin: 0 auto;
    padding: 0 var(--ty-pad);
}

.ty-business-contact-head {
    max-width: 920px;
    margin-bottom: 70px;
}

.ty-business-contact-head h2 {
    margin: 0 0 24px;
    font-size: clamp(58px, 6vw, 108px);
    line-height: .9;
    letter-spacing: -4px;
}

.ty-business-contact-head p {
    max-width: 760px;
    margin: 0;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 700;
}

.ty-business-contact-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 42px;
    align-items: stretch;
}

.ty-business-contact-info {
    padding: 42px;
    border: var(--ty-border);
    background: var(--ty-blue);
    color: var(--ty-white);
    box-shadow: var(--ty-shadow);
}

.ty-business-contact-info h3,
.ty-business-contact-info p,
.ty-business-contact-info a,
.ty-business-contact-info strong,
.ty-business-contact-info span {
    color: var(--ty-white) !important;
}

.ty-business-contact-info h3 {
    margin: 0 0 20px;
    font-size: clamp(38px, 4vw, 64px);
    line-height: .92;
    letter-spacing: -2px;
}

.ty-business-contact-info p {
    margin: 0 0 34px;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 700;
}

.ty-business-contact-card {
    padding: 20px 0;
    border-top: 3px solid rgba(255,255,255,.35);
}

.ty-business-contact-card span {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.ty-business-contact-card a,
.ty-business-contact-card strong {
    font-size: 22px;
    line-height: 1.3;
    font-weight: 800;
    text-decoration: none !important;
}


/* =========================================================
   24  SECTION – BUSINESS FINAL CTA
========================================================= */

.ty-business-final {
    position: relative;
    overflow: hidden;
    padding: var(--ty-section-space) 0;
    background: var(--ty-white);
}

.ty-business-final-inner {
    max-width: var(--ty-max);
    margin: 0 auto;
    padding: 0 var(--ty-pad);
}

.ty-business-final-content {
    position: relative;
    overflow: hidden;
    padding: 64px;

    border: var(--ty-border);
    background: var(--ty-yellow);
    box-shadow: var(--ty-shadow);
}

.ty-business-final-content::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -90px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: var(--ty-pink);
    opacity: .65;
    pointer-events: none;
}

.ty-business-final h2,
.ty-business-final p,
.ty-business-final-actions,
.ty-business-final .ty-section-label {
    position: relative;
    z-index: 2;
}

.ty-business-final h2 {
    max-width: 1050px;
    margin: 0 0 24px;
    font-size: clamp(54px, 6vw, 104px);
    line-height: .9;
    letter-spacing: -4px;
}

.ty-business-final p {
    max-width: 760px;
    margin: 0 0 38px;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 700;
}

.ty-business-final-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}


/* =========================================================
   25  SECTION – BUSINESS FAQ ACCORDION
   Multi-Open Accordion, brutalist styled
========================================================= */

.ty-business-faq {
    padding: var(--ty-section-space) 0;
    background: var(--ty-white);
}

.ty-business-faq-inner {
    max-width: var(--ty-max);
    margin: 0 auto;
    padding: 0 var(--ty-pad);
}

.ty-business-faq-head {
    max-width: 920px;
    margin-bottom: 60px;
}

.ty-business-faq-head .ty-section-label {
    margin-bottom: 28px;
}

.ty-business-faq-head h2 {
    margin: 0 0 22px;
    font-size: clamp(46px, 5.4vw, 84px);
    line-height: var(--ty-headline-line);
    letter-spacing: var(--ty-headline-tight);
    font-weight: 800;
}

.ty-business-faq-head p {
    margin: 0;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 700;
}

.ty-business-faq-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ty-faq-accordion {
    border: var(--ty-border);
    background: var(--ty-cream);
    box-shadow: var(--ty-shadow);
}

.ty-faq-accordion-question {
    width: 100%;
    padding: 28px 32px;

    background: transparent;
    border: 0;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    font-family: var(--ty-font-headline);
    font-size: clamp(20px, 1.8vw, 28px);
    line-height: 1.15;
    letter-spacing: -0.5px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: left;
    color: var(--ty-black);

    transition: background 0.2s ease;
}

.ty-faq-accordion-question:hover {
    background: var(--ty-yellow);
}

.ty-faq-accordion-question:focus-visible {
    outline: 3px solid var(--ty-orange);
    outline-offset: -3px;
}

/* Plus/Minus-Icon */
.ty-faq-accordion-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;

    position: relative;
    display: inline-block;
}

.ty-faq-accordion-icon::before,
.ty-faq-accordion-icon::after {
    content: "";
    position: absolute;
    background: var(--ty-black);
    transition: transform 0.3s ease;
}

.ty-faq-accordion-icon::before {
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    transform: translateY(-50%);
}

.ty-faq-accordion-icon::after {
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    transform: translateX(-50%);
}

.ty-faq-accordion.is-open .ty-faq-accordion-icon::after {
    transform: translateX(-50%) rotate(90deg) scaleX(0);
}

/* Antwort-Content */
.ty-faq-accordion-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.ty-faq-accordion.is-open .ty-faq-accordion-answer {
    max-height: 600px;
}

.ty-faq-accordion-answer-inner {
    padding: 24px 32px 32px;
    border-top: 3px solid var(--ty-black);
}

.ty-faq-accordion-answer p {
    margin: 0 0 14px;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 700;
}

.ty-faq-accordion-answer p:last-child {
    margin-bottom: 0;
}

.ty-faq-accordion-answer a {
    color: var(--ty-blue);
    font-weight: 800;
    text-decoration: underline;
}


/* =========================================================
   26  SECTION – FAQ PAGE (Cards)
   Eigene Seite mit Sidebar-Navigation + Karten-Grid
========================================================= */

.ty-faq-section {
    padding: 110px 0 120px;
    background: var(--ty-cream);
}

.ty-faq-inner {
    max-width: var(--ty-max);
    margin: 0 auto;
    padding: 0 var(--ty-pad);
}

/* Sidebar */
.ty-faq-sidebar {
    position: sticky;
    top: 120px;
}

.ty-faq-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ty-faq-nav a {
    display: inline-flex;
    align-items: center;

    min-height: 54px;
    padding: 0 18px;

    border: var(--ty-border-small);
    background: var(--ty-white);
    color: var(--ty-black) !important;
    text-decoration: none !important;

    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;

    transition:
        transform   .18s ease,
        background  .18s ease;
}

.ty-faq-nav a:hover {
    background: var(--ty-yellow);
    transform: translateX(4px);
}

/* Groups */
.ty-faq-group + .ty-faq-group {
    margin-top: 90px;
}

.ty-faq-group-title {
    margin: 0 0 34px;
    font-size: clamp(38px, 4vw, 62px);
    line-height: .92;
    letter-spacing: -2px;
    text-transform: uppercase;
}

/* Card-Grid */
.ty-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.ty-faq-item {
    position: relative;
    overflow: hidden;

    padding: 34px;
    border: var(--ty-border);
    box-shadow: var(--ty-shadow);
    min-height: 260px;
}

.ty-faq-item::before {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 180px;
    height: 180px;
    opacity: .12;

    background: radial-gradient(
        circle at center,
        transparent 0 34%,
        var(--ty-black) 35% 48%,
        transparent 49%
    );
}

.ty-faq-yellow { background: var(--ty-yellow); }
.ty-faq-mint   { background: var(--ty-mint); }
.ty-faq-pink   { background: var(--ty-pink); }

.ty-faq-blue {
    background: var(--ty-blue);
    color: var(--ty-white);
}

.ty-faq-blue h3,
.ty-faq-blue p {
    color: var(--ty-white);
}

.ty-faq-blue::before {
    opacity: .12;
    filter: invert(1);
}

.ty-faq-item h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 18px;
    font-size: 30px;
    line-height: .95;
    letter-spacing: -1px;
    text-transform: uppercase;
}

.ty-faq-item p {
    position: relative;
    z-index: 2;
    margin: 0;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 700;
}


/* =========================================================
   27  SECTION – SOCIAL PROOF BAR
   Schmale Bar zwischen Hero und Disciplines
========================================================= */

.ty-social-proof {
    padding: 36px 0;
    background: var(--ty-mint);
    color: var(--ty-black);
    border-top: var(--ty-border);
    border-bottom: var(--ty-border);
}

.ty-social-proof-inner {
    max-width: var(--ty-max);
    margin: 0 auto;
    padding: 0 var(--ty-pad);

    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr;
    gap: 40px;
    align-items: center;
}

.ty-social-proof-statement {
    color: var(--ty-blue);

    font-family: var(--ty-font-headline);
    font-size: clamp(24px, 2.4vw, 36px);
    line-height: 1.05;
    letter-spacing: -0.5px;
    font-weight: 800;
    text-transform: uppercase;
}

.ty-social-proof-statement em {
    font-style: normal;
    color: var(--ty-black);
    display: block;
    font-size: 0.7em;
    margin-top: 6px;
}

.ty-social-proof-item {
    border-left: 3px solid var(--ty-blue);
    padding-left: 18px;
}

.ty-social-proof-item strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--ty-font-headline);
    font-size: 22px;
    line-height: 1;
    font-weight: 800;
    color: var(--ty-black);
}

.ty-social-proof-item span {
    display: block;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--ty-black);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: .04em;
}


/* =========================================================
   28  COMPONENT – CONTACT FORM
   Anfrage-Formular im Action Grid
========================================================= */

.ty-contact-form-wrap {
    position: relative;
    padding: 54px;
    border: var(--ty-border);
    background: var(--ty-white);
    box-shadow: var(--ty-shadow);
}

.ty-contact-form-head {
    margin-bottom: 32px;
}

.ty-contact-form-head h3 {
    margin: 0 0 14px;
    font-size: clamp(32px, 3vw, 44px);
    line-height: var(--ty-headline-line);
    letter-spacing: var(--ty-headline-tight);
    font-weight: 800;
}

.ty-contact-form-head p {
    margin: 0;
    font-size: var(--ty-copy-sm);
    line-height: 1.45;
    font-weight: 700;
}

/* Form-Grid: zweispaltig, full-width spannt beide Spalten */
.ty-contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ty-contact-form-grid .full-width {
    grid-column: span 2;
}

/* Felder */
.ty-contact-form-grid input,
.ty-contact-form-grid select,
.ty-contact-form-grid textarea {
    width: 100%;
    padding: 14px 16px;

    border: var(--ty-border-small);
    background: var(--ty-white);
    color: var(--ty-black);

    font-family: var(--ty-font-copy);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;

    transition:
        box-shadow 0.15s ease,
        transform  0.15s ease;
}

.ty-contact-form-grid textarea {
    min-height: 120px;
    resize: vertical;
}

.ty-contact-form-grid input::placeholder,
.ty-contact-form-grid textarea::placeholder {
    color: var(--ty-black);
    opacity: 0.55;
    font-weight: 700;
}

.ty-contact-form-grid input:focus,
.ty-contact-form-grid select:focus,
.ty-contact-form-grid textarea:focus {
    outline: none;
    box-shadow: 4px 4px 0 var(--ty-black);
    transform: translate(-2px, -2px);
}

/* Submit Button */
.ty-contact-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 62px;
    padding: 0 28px;

    border: var(--ty-border-small);
    background: var(--ty-black);
    color: var(--ty-white);

    font-family: var(--ty-font-copy);
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    cursor: pointer;

    transition:
        transform  0.18s ease,
        box-shadow 0.18s ease;
}

.ty-contact-submit:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: var(--ty-shadow-hover);
}

.ty-contact-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Statusmeldung */
.ty-contact-message {
    margin-top: 18px;
    padding: 0;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
}

.ty-contact-message.erfolg,
.ty-contact-message.fehler {
    padding: 14px 16px;
    border: var(--ty-border-small);
}

.ty-contact-message.erfolg {
    background: var(--ty-mint);
    color: var(--ty-black);
}

.ty-contact-message.fehler {
    background: var(--ty-pink);
    color: var(--ty-black);
}


/* =========================================================
   29  COMPONENT – STICKY MOBILE CTA
   Fester Balken am unteren Bildschirmrand (nur Mobile)
========================================================= */

.ty-mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;

    display: none;  /* aktiviert über Mobile-Breakpoint */

    background: var(--ty-black);
    border-top: 3px solid var(--ty-orange);

    transform: translateY(100%);
    transition: transform 0.35s ease-out;
}

.ty-mobile-cta.is-visible {
    transform: translateY(0);
}

.ty-mobile-cta-inner {
    display: flex;
    gap: 0;
}

.ty-mobile-cta-phone {
    flex: 0 0 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--ty-white);
    color: var(--ty-black) !important;
    border-right: 3px solid var(--ty-orange);
    text-decoration: none !important;

    transition: background 0.18s ease;
}

.ty-mobile-cta-phone:active {
    background: var(--ty-yellow);
}

.ty-mobile-cta-phone svg {
    width: 26px;
    height: 26px;
}

.ty-mobile-cta-book {
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 60px;
    padding: 0 18px;

    background: var(--ty-orange);
    color: var(--ty-white) !important;
    text-decoration: none !important;

    font-family: var(--ty-font-copy);
    font-size: 15px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;

    transition: background 0.18s ease;
}

.ty-mobile-cta-book:active {
    background: var(--ty-black);
}

.ty-mobile-cta-book::after {
    content: "→";
    margin-left: 10px;
    font-size: 18px;
}


/* =========================================================
   30  COMPONENT – SCROLL PROGRESS INDICATOR
   Dünner Balken oben am Bildschirmrand
========================================================= */

.ty-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;  /* über dem Sticky-Header */

    width: 0%;
    height: 4px;

    background: var(--ty-orange);
    will-change: width;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}


/* =========================================================
   31  ANIMATIONS – Slide-In on Scroll
   Wird per JavaScript via .is-visible getriggert
========================================================= */

/* Business Facts: Stagger Slide-In */
.ty-business-fact {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity   0.6s ease-out,
        transform 0.6s ease-out;
}

.ty-business-fact.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ty-business-fact.is-visible:nth-child(1) { transition-delay: 0ms;   }
.ty-business-fact.is-visible:nth-child(2) { transition-delay: 100ms; }
.ty-business-fact.is-visible:nth-child(3) { transition-delay: 200ms; }
.ty-business-fact.is-visible:nth-child(4) { transition-delay: 300ms; }


/* =========================================================
   32  HOVER EFFECTS (Cards & Images)
   Brutalist-Look: Karte hebt sich, Schatten "fliegt" weg
========================================================= */

/* Bild-Karten: Karte hebt sich + Bild zoomt innen */
.ty-home-hero-image,
.ty-business-hero-image,
.ty-business-package-image,
.ty-community-main-image,
.ty-game-collage-item {
    transition:
        transform  0.35s ease,
        box-shadow 0.35s ease;
}

.ty-home-hero-image:hover,
.ty-business-hero-image:hover,
.ty-business-package-image:hover,
.ty-community-main-image:hover,
.ty-game-collage-item:hover {
    transform: translate(-4px, -4px);
    box-shadow: 14px 14px 0 var(--ty-black);
}

.ty-home-hero-image img,
.ty-business-hero-image img,
.ty-business-package-image img,
.ty-community-main-image img,
.ty-game-collage-item img {
    transition: transform 0.6s ease;
}

.ty-home-hero-image:hover img,
.ty-business-hero-image:hover img,
.ty-business-package-image:hover img,
.ty-community-main-image:hover img,
.ty-game-collage-item:hover img {
    transform: scale(1.05);
}

/* Karten ohne Bild: nur Hebe-Effekt */
.ty-faq-item,
.ty-business-process-step,
.ty-business-extra,
.ty-business-process-astro-step,
.ty-flow-timeline-step,
.ty-discipline-box {
    transition:
        transform  0.28s ease,
        box-shadow 0.28s ease;
}

.ty-faq-item:hover,
.ty-business-process-step:hover,
.ty-business-extra:hover,
.ty-business-process-astro-step:hover,
.ty-discipline-box:hover {
    transform: translate(-3px, -3px);
    box-shadow: 13px 13px 0 var(--ty-black);
}


/* =========================================================
   ACCESSIBILITY – Reduced Motion Override
   Schaltet alle nicht-essentiellen Animationen aus
========================================================= */

@media (prefers-reduced-motion: reduce) {

    /* Hover-Effekte deaktivieren */
    .ty-home-hero-image,
    .ty-business-hero-image,
    .ty-business-package-image,
    .ty-community-main-image,
    .ty-game-collage-item,
    .ty-faq-item,
    .ty-business-process-step,
    .ty-business-extra,
    .ty-business-process-astro-step,
    .ty-flow-timeline-step,
    .ty-discipline-box {
        transition: none;
    }

    .ty-home-hero-image:hover,
    .ty-business-hero-image:hover,
    .ty-business-package-image:hover,
    .ty-community-main-image:hover,
    .ty-game-collage-item:hover,
    .ty-faq-item:hover,
    .ty-business-process-step:hover,
    .ty-business-extra:hover,
    .ty-business-process-astro-step:hover,
    .ty-discipline-box:hover {
        transform: none;
        box-shadow: var(--ty-shadow);
    }

    .ty-home-hero-image:hover img,
    .ty-business-hero-image:hover img,
    .ty-business-package-image:hover img,
    .ty-community-main-image:hover img,
    .ty-game-collage-item:hover img {
        transform: none;
    }

    /* Slide-In sofort sichtbar */
    .ty-business-fact {
        opacity: 1;
        transform: none;
        transition: none;
    }

    /* Mobile CTA, Scroll-Progress, Accordion */
    .ty-mobile-cta,
    .ty-scroll-progress,
    .ty-faq-accordion-answer,
    .ty-faq-accordion-icon::before,
    .ty-faq-accordion-icon::after {
        transition: none;
    }
}


/* =========================================================
   TOUCH DEVICES – Kein Hover (verhindert "klebende" Effekte)
========================================================= */

@media (hover: none) {

    .ty-home-hero-image:hover,
    .ty-business-hero-image:hover,
    .ty-business-package-image:hover,
    .ty-community-main-image:hover,
    .ty-game-collage-item:hover,
    .ty-faq-item:hover,
    .ty-business-process-step:hover,
    .ty-business-extra:hover,
    .ty-business-process-astro-step:hover,
    .ty-discipline-box:hover {
        transform: none;
        box-shadow: var(--ty-shadow);
    }

    .ty-home-hero-image:hover img,
    .ty-business-hero-image:hover img,
    .ty-business-package-image:hover img,
    .ty-community-main-image:hover img,
    .ty-game-collage-item:hover img {
        transform: none;
    }
}


/* =========================================================
   RESPONSIVE – Tablet & Mobile
   Reihenfolge: 1100 → 980 → 767 → 560
========================================================= */


/* ----- 1100px: Tablet-Querformat ----- */

@media (max-width: 1100px) {
    :root {
        --ty-section-space: var(--ty-section-space-tablet);
    }

    /* Flow Timeline: 3-spaltig, Linie weg */
    .ty-flow-timeline-grid {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 80px;
    }

    .ty-flow-track::before {
        display: none;
    }

    .ty-flow-timeline-step.is-top,
    .ty-flow-timeline-step.is-bottom {
        margin-top: 0;
        margin-bottom: 0;
    }

    .ty-flow-timeline-step::before,
    .ty-flow-timeline-step::after {
        display: none;
    }

    .ty-flow-timeline-step.is-final {
        transform: none;
        grid-column: span 3;
    }

    /* Business Grids: 2-spaltig */
    .ty-business-extras-grid,
    .ty-business-dynamics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ----- 980px: Tablet-Hochformat / kleines Laptop ----- */

@media (max-width: 980px) {

    /* Inner-Padding global auf Mobile-Werte */
    .ty-home-hero-grid,
    .ty-flow-timeline-inner,
    .ty-audience-inner,
    .ty-community-inner,
    .ty-about-inner,
    .ty-disciplines-sticky-inner,
    .ty-business-packages-inner,
    .ty-business-process-astro-inner,
    .ty-business-extras-inner,
    .ty-business-dynamics-inner,
    .ty-business-testimonials-inner,
    .ty-business-contact-inner,
    .ty-business-final-inner,
    .ty-business-faq-inner,
    .ty-faq-inner,
    .ty-social-proof-inner,
    .ty-footer-inner {
        padding-left: var(--ty-pad-mobile);
        padding-right: var(--ty-pad-mobile);
    }

    /* Global Header */
    .ty-global-header-inner {
        padding: 14px var(--ty-pad-mobile);
    }

    .ty-global-nav {
        gap: 14px;
    }

    .ty-global-nav a {
        font-size: 12px;
        letter-spacing: .03em;
    }

    .ty-global-booking-button {
        min-height: 42px;
        padding: 0 12px;
        font-size: 12px;
        box-shadow: none;
    }

    /* Hero Home: einspaltig */
    .ty-home-hero {
        padding: 80px 0 60px;
    }

    .ty-home-hero-grid,
    .ty-community-grid,
    .ty-about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ty-home-hero-content h1 {
        font-size: clamp(52px, 14vw, 78px);
        letter-spacing: -2px;
    }

    .ty-home-subline {
        font-size: 20px;
    }

    .ty-home-hero-visual {
        min-height: 520px;
    }

    .ty-home-image-main {
        width: 82%;
        height: 280px;
        left: 20px !important;
    }

    .ty-home-image-secondary {
        width: 52%;
        height: 180px;
        left: -10px !important;
    }

    .ty-home-shape-circle {
        width: 220px;
        height: 220px;
        top: -80px;
        right: -80px;
    }

    /* Hero Business: einspaltig */
    .ty-business-hero {
        padding: 90px 0 70px;
    }

    .ty-business-hero-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .ty-business-hero-content h1 {
        font-size: clamp(52px, 14vw, 82px);
        letter-spacing: -2px;
    }

    .ty-business-hero-copy {
        font-size: 22px;
    }

    .ty-business-hero-visual {
        min-height: 520px;
    }

    .ty-business-main-image {
        width: 82%;
        height: 320px;
    }

    .ty-business-second-image {
        width: 54%;
        height: 180px;
    }

    /* Business Facts: 2-spaltig */
    .ty-business-facts-inner {
        grid-template-columns: 1fr 1fr;
    }

    .ty-business-fact:nth-child(2) {
        border-right: 0;
    }

    /* Disciplines Sticky: einspaltig */
    .ty-disciplines-stack {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .ty-disciplines-list {
        position: relative;
        top: auto;
    }

    .ty-disciplines-eyebrow {
        margin-bottom: 30px;
    }

    .ty-disciplines-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
    }

    .ty-disciplines-nav li {
        margin-bottom: 0;
        padding-left: 0;
        font-size: 18px;
        opacity: 1;
    }

    .ty-disciplines-nav li::before {
        display: none;
    }

    .ty-disciplines-nav li.is-active {
        transform: none;
    }

    .ty-discipline-box {
        height: 380px;
        padding: 32px;
    }

    /* Flow Timeline Header */
    .ty-flow-timeline-header-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Audience: einspaltig */
    .ty-audience-grid {
        grid-template-columns: 1fr;
    }

    .ty-audience-card {
        min-height: auto;
    }

    /* Community: Visual stacking */
    .ty-community-visual {
        min-height: auto;
        display: grid;
        gap: 18px;
    }

    .ty-community-main-image,
    .ty-community-sticker,
    .ty-community-instagram,
    .ty-community-pattern-top,
    .ty-community-pattern-bottom {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
    }

    .ty-community-main-image {
        width: 100%;
        height: 360px;
    }

    .ty-community-pattern-image {
        width: 180px;
    }

    .ty-community-sticker,
    .ty-community-instagram {
        width: fit-content;
    }

    /* Game Collage: 2-spaltig */
    .ty-game-collage {
        min-height: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .ty-game-collage::before,
    .ty-game-collage::after {
        display: none;
    }

    .ty-game-collage-item,
    .ty-game-collage-main,
    .ty-game-collage-one,
    .ty-game-collage-two,
    .ty-game-collage-wide {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: auto;
        height: 240px;
    }

    .ty-game-collage-main {
        grid-column: span 2;
        height: 360px;
    }

    .ty-game-collage-sticker {
        position: relative;
        left: auto;
        top: auto;
        grid-column: span 2;
        width: fit-content;
    }

    /* About: sticky aus */
    .ty-about-headline h2 {
        position: relative;
        top: auto;
    }

    .ty-about-content {
        padding-left: 0;
        padding-top: 32px;
        border-left: 0;
        border-top: var(--ty-border);
    }

    /* About Action Grid: einspaltig */
    .ty-about-action-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ty-about-divider {
        min-height: 80px;
    }

    .ty-about-divider::before {
        top: 50%;
        bottom: auto;
        left: 0;
        right: 0;
        width: 100%;
        height: 4px;
        transform: translateY(-50%);
    }

    /* Contact-Form */
    .ty-contact-form-wrap {
        padding: 36px;
    }

    /* Business Package: einspaltig */
    .ty-business-package {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 32px;
    }

    .ty-business-package-visual {
        min-height: 320px;
    }

    .ty-business-package-image {
        width: 100%;
        height: 300px;
    }

    .ty-business-package p {
        font-size: 20px;
    }

    /* Business Process Astro: 2-spaltig, Linie weg */
    .ty-business-process-astro-grid {
        grid-template-columns: 1fr 1fr;
        gap: 60px 24px;
    }

    .ty-business-process-astro-grid::before {
        display: none;
    }

    /* Business Contact: einspaltig */
    .ty-business-contact-grid {
        grid-template-columns: 1fr;
    }

    /* Testimonials: einspaltig */
    .ty-business-testimonial-grid {
        grid-template-columns: 1fr;
    }

    .ty-business-quote {
        grid-column: span 1 !important;
        transform: none !important;
        min-height: auto;
    }

    /* FAQ Page Sidebar */
    .ty-faq-sidebar {
        position: relative;
        top: auto;
        margin-bottom: 46px;
    }

    .ty-faq-grid {
        grid-template-columns: 1fr;
    }

    .ty-faq-hero p {
        font-size: 22px;
    }

    /* Social Proof Bar */
    .ty-social-proof-inner {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .ty-social-proof-statement {
        grid-column: span 2;
        margin-bottom: 8px;
    }

    /* Footer 2-spaltig */
    .ty-footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 34px;
    }

    /* Mobile CTA aktivieren */
    .ty-mobile-cta {
        display: block;
    }

    body {
        padding-bottom: 60px;
    }
}


/* ----- 767px: Mobile ----- */

@media (max-width: 767px) {
    :root {
        --ty-section-space: var(--ty-section-space-mobile);
    }

    /* Hero: Buttons full-width */
    .ty-home-hero-actions {
        flex-direction: column;
        position: relative;
        z-index: 5;
    }

    .ty-home-button {
        width: 100%;
    }

    /* Globale Mobile-Headlines */
    .ty-audience-card h2,
    .ty-about-headline h2,
    .ty-disciplines-sticky-header h2,
    .ty-business-extras-head h2,
    .ty-business-dynamics-head h2,
    .ty-business-contact-head h2,
    .ty-business-testimonials-head h2,
    .ty-business-final h2,
    .ty-flow-timeline-header-grid h2 {
        font-size: clamp(42px, 12vw, 62px);
        letter-spacing: -2px;
    }

    .ty-flow-timeline-header-grid p {
        font-size: 22px;
    }

    /* Hero Shape Circle: kleiner & repositioniert */
    .ty-home-shape-circle {
        top: auto !important;
        right: -90px !important;
        bottom: 380px !important;
        width: 180px !important;
        height: 180px !important;
        z-index: 1 !important;
    }

    .ty-home-hero-image {
        position: relative;
        z-index: 3;
    }

    /* Disciplines Mobile */
    .ty-discipline-letter {
        font-size: clamp(140px, 30vw, 200px);
    }

    .ty-discipline-info h3 {
        font-size: 28px;
    }

    /* Audience Cards */
    .ty-audience-card {
        padding: 30px;
    }

    .ty-audience-card li {
        font-size: 18px;
    }

    .ty-audience-sticker {
        position: relative;
        top: auto;
        right: auto;
        display: inline-block;
        margin-bottom: 22px;
    }

    /* Game Collage REWORK: Stacking statt Grid */
    .ty-game-collage {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        min-height: auto !important;
        margin-top: 42px !important;
        padding-top: 0 !important;
    }

    .ty-game-collage::before,
    .ty-game-collage::after {
        display: none !important;
    }

    .ty-game-collage-sticker {
        order: -1 !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        z-index: 8 !important;

        width: fit-content !important;
        max-width: 82% !important;
        margin: 0 0 -6px 14px !important;
        padding: 14px 18px !important;

        font-size: 16px !important;
        line-height: 1.1 !important;
        transform: rotate(-4deg) !important;
    }

    .ty-game-collage-item,
    .ty-game-collage-main,
    .ty-game-collage-one,
    .ty-game-collage-two,
    .ty-game-collage-wide {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        height: 230px !important;
        box-shadow: 6px 6px 0 var(--ty-black) !important;
    }

    .ty-game-collage-main {
        height: 260px !important;
    }

    .ty-game-collage-item img {
        object-position: center center !important;
    }

    /* Community Visual REWORK: absolute Positionierung */
    .ty-community-visual {
        position: relative !important;
        display: block !important;
        min-height: 520px !important;
        margin-top: 34px !important;
    }

    .ty-community-main-image {
        position: absolute !important;
        top: 92px !important;
        left: 18px !important;
        z-index: 4 !important;

        width: calc(100% - 36px) !important;
        height: 300px !important;

        box-shadow: 6px 6px 0 var(--ty-black) !important;
    }

    .ty-community-main-image img {
        object-position: center center !important;
    }

    .ty-community-sticker {
        position: absolute !important;
        top: 28px !important;
        left: 6px !important;
        z-index: 8 !important;

        width: fit-content !important;
        max-width: 72% !important;
        padding: 14px 18px !important;

        font-size: 14px !important;
        line-height: 1.1 !important;
        transform: rotate(-5deg) !important;
    }

    .ty-community-pattern-top {
        position: absolute !important;
        top: 0 !important;
        right: 6px !important;
        width: 150px !important;
        z-index: 2 !important;
    }

    .ty-community-pattern-bottom {
        position: absolute !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 150px !important;
        z-index: 2 !important;
    }

    .ty-community-instagram {
        position: absolute !important;
        right: 18px !important;
        bottom: 22px !important;
        z-index: 7 !important;

        min-height: 52px !important;
        padding: 0 18px !important;

        background: var(--ty-white) !important;
        box-shadow: 5px 5px 0 var(--ty-black) !important;
    }

    /* Community Copy mobile */
    .ty-community-copy,
    .ty-community-list li,
    .ty-community-outro,
    .ty-about-content p,
    .ty-about-cta p {
        font-size: 20px;
    }

    .ty-about-cta {
        margin-top: 56px;
        padding: 30px;
    }

    /* Contact Form mobile */
    .ty-contact-form-grid {
        grid-template-columns: 1fr;
    }

    .ty-contact-form-grid .full-width {
        grid-column: span 1;
    }

    .ty-contact-form-wrap {
        padding: 28px;
    }

    /* ODER-Trenner Kreis kleiner */
    .ty-about-divider span {
        width: 60px;
        height: 60px;
        font-size: 16px;
    }

    /* Flow Timeline Mobile: vertikale Linie links */
    .ty-flow-track {
        padding: 60px 0;
    }

    .ty-flow-timeline-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        position: relative;
    }

    .ty-flow-timeline-grid::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 24px;
        width: 4px;
        background: var(--ty-black);
        z-index: 0;
    }

    .ty-flow-timeline-step {
        margin-left: 56px;
        padding: 28px 24px;
        gap: 14px;
    }

    .ty-flow-timeline-step.is-final {
        grid-column: span 1;
    }

    .ty-flow-timeline-step::before {
        display: block !important;
        left: -44px;
        top: 32px;
        transform: none;
        width: 20px;
        height: 20px;
    }

    .ty-flow-timeline-step::after {
        display: none !important;
    }

    .ty-flow-timeline-step h3 {
        font-size: 19px;
    }

    .ty-flow-timeline-step p {
        font-size: 15px;
    }

    /* Business Facts: 1-spaltig */
    .ty-business-facts-inner {
        grid-template-columns: 1fr;
    }

    .ty-business-fact {
        border-right: 0;
        border-bottom: var(--ty-border-small);
    }

    .ty-business-fact:last-child {
        border-bottom: 0;
    }

    /* Business Packages */
    .ty-business-package {
        padding: 24px;
    }

    .ty-business-package h3 {
        font-size: 42px;
        letter-spacing: -2px;
    }

    .ty-business-package-grid {
        grid-template-columns: 1fr;
    }

    .ty-business-package-image {
        height: 240px;
    }

    /* Business Process Astro: 1-spaltig */
    .ty-business-process-astro-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .ty-business-process-astro-step {
        padding: 28px 20px;
    }

    .ty-business-process-astro-number {
        width: 76px;
        height: 76px;
        font-size: 30px;
        margin-top: -60px;
    }

    /* Business Extras / Dynamics: 1-spaltig */
    .ty-business-extras-grid,
    .ty-business-dynamics-grid {
        grid-template-columns: 1fr;
    }

    .ty-business-extra,
    .ty-business-dynamic {
        min-height: auto;
        padding: 28px;
    }

    .ty-business-dynamic span {
        margin-bottom: 56px;
    }

    .ty-business-extra h3,
    .ty-business-dynamic h3 {
        font-size: 30px;
    }

    /* Business Contact Info */
    .ty-business-contact-info {
        padding: 28px;
    }

    /* Business Testimonials */
    .ty-business-quote {
        padding: 28px;
    }

    /* Business Final CTA */
    .ty-business-final-content {
        padding: 30px;
    }

    .ty-business-final-actions {
        flex-direction: column;
    }

    /* Business FAQ Accordion */
    .ty-business-faq {
        padding: 80px 0;
    }

    .ty-faq-accordion-question {
        padding: 22px 22px;
        font-size: 18px;
    }

    .ty-faq-accordion-answer-inner {
        padding: 20px 22px 22px;
    }

    .ty-faq-accordion-answer p {
        font-size: 16px;
    }

    .ty-faq-accordion-icon {
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
    }

    /* FAQ Page Mobile */
    .ty-faq-section {
        padding: 76px 0;
    }

    .ty-faq-hero {
        margin-bottom: 56px;
    }

    .ty-faq-hero h1 {
        font-size: clamp(52px, 14vw, 78px);
        letter-spacing: -2px;
    }

    .ty-faq-hero p,
    .ty-faq-item p {
        font-size: 20px;
    }

    .ty-faq-item {
        min-height: auto;
        padding: 28px;
    }

    .ty-faq-item h3 {
        font-size: 24px;
    }

    .ty-faq-group + .ty-faq-group {
        margin-top: 62px;
    }
}


/* ----- 760px: Header + Footer Mobile ----- */

@media (max-width: 760px) {

    .ty-global-header {
        border-bottom: 3px solid var(--ty-black);
    }

    .ty-global-header-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 20px;
        padding: 22px 20px 24px;
        min-height: auto !important;
    }

    .ty-global-logo {
        width: 100%;
        justify-content: center;
    }

    .ty-global-logo img {
        height: 54px !important;
        max-height: 54px !important;
    }

    .ty-global-nav {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;

        gap: 16px 18px;
        width: 100%;
    }

    .ty-global-nav a {
        font-size: 14px;
        line-height: 1;
        letter-spacing: .04em;
    }

    .ty-global-booking-button {
        min-height: 52px;
        padding: 0 22px;
        font-size: 13px;
        box-shadow: 4px 4px 0 var(--ty-black);
    }

    .ty-footer {
        padding: 52px 0 24px;
    }

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

    .ty-footer-bottom p {
        display: block;
        font-size: 14px;
    }
}


/* ----- 560px: Extreme Mobile (sehr schmal) ----- */

@media (max-width: 560px) {
    /* Social Proof Bar: 1-spaltig */
    .ty-social-proof-inner {
        grid-template-columns: 1fr;
    }

    .ty-social-proof-statement {
        grid-column: span 1;
    }

    .ty-social-proof-item {
        border-left: 0;
        border-top: 3px solid var(--ty-blue);
        padding-left: 0;
        padding-top: 14px;
    }
}


/* =========================================================
   AUDIENCE CARDS V2 – Gleiches Layout, Sticker als Notiz unten
========================================================= */

/* Karten als 4-Reihen-Grid: Kicker / Headline / Liste / Button-Bereich */
.ty-audience-section .ty-audience-grid {
    align-items: stretch;
}

.ty-audience-section .ty-audience-card {
    display: grid;
    grid-template-rows: auto minmax(180px, auto) 1fr auto;
    /*                  ^Kicker  ^Headline       ^Liste ^Button */
    gap: 28px;
    align-items: start;
}

/* Falls aktuell die <p>/<h2>/<ul>/<a> margin-bottom haben: zurücksetzen */
.ty-audience-section .ty-audience-card .ty-audience-kicker {
    margin: 0;
    align-self: start;
}

.ty-audience-section .ty-audience-card h2 {
    margin: 0;
    align-self: start;
}

.ty-audience-section .ty-audience-card ul {
    margin: 0;
    align-self: start;
}

.ty-audience-section .ty-audience-card .ty-home-button {
    margin: 0;
    align-self: end;
    justify-self: start;
}


/* =========================================================
   STICKY-NOTE für Business-Karte (unten rechts)
========================================================= */

.ty-audience-section .ty-audience-business {
    position: relative;
}

/* Sticker neu positionieren: unten rechts, mit Sticky-Note-Look */
.ty-audience-section .ty-audience-business .ty-audience-sticker {
    /* Position */
    position: absolute;
    top: auto;
    right: -18px;
    bottom: -18px;
    left: auto;
    z-index: 5;

    /* Größe & Look wie eine Sticky-Note */
    max-width: 240px;
    padding: 18px 20px;

    border: var(--ty-border);
    background: var(--ty-yellow);
    color: var(--ty-black);

    box-shadow: 8px 8px 0 var(--ty-black);
    transform: rotate(-4deg);

    /* Typografie */
    font-family: var(--ty-font-headline);
    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Kleines "geknicktes Eck" oben links für den Sticky-Note-Effekt */
.ty-audience-section .ty-audience-business .ty-audience-sticker::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    background: linear-gradient(
        135deg,
        var(--ty-cream) 0%,
        var(--ty-cream) 50%,
        var(--ty-yellow) 50%,
        var(--ty-yellow) 100%
    );
    border-right: 2px solid var(--ty-black);
    border-bottom: 2px solid var(--ty-black);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px) {
    /* Auf Tablet/Mobile: feste min-height der Headline-Reihe weg */
    .ty-audience-section .ty-audience-card {
        grid-template-rows: auto auto 1fr auto;
        gap: 22px;
    }

    /* Sticker: ein bisschen weniger negativ rausragend */
    .ty-audience-section .ty-audience-business .ty-audience-sticker {
        right: 14px;
        bottom: -14px;
        max-width: 220px;
    }
}

@media (max-width: 767px) {
    /* Sticker bei mobile noch kompakter */
    .ty-audience-section .ty-audience-business .ty-audience-sticker {
        right: 14px;
        bottom: -14px;
        max-width: 200px;
        padding: 14px 16px;
        font-size: 13px;
        box-shadow: 6px 6px 0 var(--ty-black);
    }
}

/* =========================================================
   AUDIENCE STICKER – Position-Korrektur
   Sticker bleibt innerhalb der Karte, mit Abstand zu Rändern
========================================================= */

.ty-audience-section .ty-audience-business .ty-audience-sticker {
    right: 32px !important;
    bottom: 32px !important;
}

@media (max-width: 980px) {
    .ty-audience-section .ty-audience-business .ty-audience-sticker {
        right: 24px !important;
        bottom: 24px !important;
    }
}

@media (max-width: 767px) {
    .ty-audience-section .ty-audience-business .ty-audience-sticker {
        right: 20px !important;
        bottom: 20px !important;
    }
}
	
/* =========================================================
   AUDIENCE STICKER – Mobile-Fix
   Auf Mobile: Sticker NICHT mehr absolut über dem Button,
   sondern als normaler Block darunter
========================================================= */

@media (max-width: 880px) {
    /* Sticker aus absolute Position lösen */
    .ty-audience-business .ty-audience-sticker {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        top: auto !important;

        /* Als normaler Block unter dem Button */
        display: inline-block;
        margin-top: 24px;
        max-width: 280px;

        /* Rotation behalten, aber sanfter */
        transform: rotate(-3deg);

        /* Etwas kleiner für Mobile */
        padding: 16px 18px;
        font-size: 13px;
        box-shadow: 6px 6px 0 var(--ty-black);
    }

    /* Karte als Flexbox umbauen (Grid macht Probleme mit dem 4. Element) */
    .ty-audience-business {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }

    /* Friends-Karte parallel anpassen für gleiches Layout */
    .ty-audience-friends {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }
}
	
	/* =========================================================
   BOOKING SECTION – Abstand oben + unten
   Verhindert Klebe-Effekt zur Sektion davor/danach
========================================================= */

#booking,
.ty-booking,
section:has(> .activities-booking),
section:has(> [class*="booking"]) {
    padding-top: 60px;
    background: var(--ty-cream);
}

@media (max-width: 767px) {
    #booking,
    .ty-booking,
    section:has(> .activities-booking),
    section:has(> [class*="booking"]) {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

/* =========================================================
   FOOTER – Linien-Cleanup
   - Obere Linie sitzt direkt am Footer-Top (kein Puffer)
   - Untere Trennlinie weg
   - Weiße Copyright-Box ohne Rahmen
========================================================= */

/* Footer-Section: Padding-Top weg, damit die Border-Top direkt sitzt */
.ty-footer {
    padding-top: 0;
    border-top: var(--ty-border);
}

/* Inner-Container bekommt das Top-Padding (damit Border-Top außen bleibt) */
.ty-footer-inner {
    padding-top: 42px;
}

/* Untere Trennlinie (über Copyright) komplett weg */
.ty-footer-bottom {
    border-top: 0 !important;
    padding-top: 0;
    margin-top: 32px;
}

/* Weiße Copyright-Box: Rahmen weg, weiß weg, schlichter */
.ty-footer-bottom p {
    border: 0 !important;
    background: transparent !important;
    padding: 14px 0;
    font-weight: 700;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 760px) {
    .ty-footer-inner {
        padding-top: 52px;
    }
}


/* =========================================================
   TICKET CONTAINER
========================================================= */

.ty-ticket {
    position: relative;

    display: grid;
    grid-template-columns: var(--ticket-stub-width) 1fr;
    align-items: stretch;

    background: var(--ty-cream);
    border: var(--ty-border);
    box-shadow: 14px 14px 0 var(--ty-black);
}

/* --- Stub (linke Seite mit Datum) --- */

.ty-ticket-stub {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 36px 32px;

    background: var(--ty-yellow);
    color: var(--ty-black);

    border-right: var(--ty-border-small);
}

.ty-ticket-stub-label {
    font-family: var(--ty-font-copy);
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 14px;
}

.ty-ticket-day {
    font-family: var(--ty-font-headline);
    font-size: clamp(44px, 5vw, 64px);
    line-height: 0.88;
    letter-spacing: -2px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.ty-ticket-frequency {
    font-family: var(--ty-font-copy);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 28px;
}

.ty-ticket-time {
    padding-top: 22px;
    border-top: 3px solid var(--ty-black);
}

.ty-ticket-time-label {
    display: block;
    font-family: var(--ty-font-copy);
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 8px;
}

.ty-ticket-time-value {
    display: block;
    font-family: var(--ty-font-headline);
    font-size: 26px;
    line-height: 1;
    letter-spacing: -1px;
    font-weight: 800;
}

.ty-ticket-id {
    margin-top: 28px;
    font-family: var(--ty-font-copy);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.6;
}


/* --- Perforation (gestrichelte Linie an der Stub-Kante) --- */

.ty-ticket-perforation {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: var(--ticket-stub-width);
    transform: translateX(-50%);

    width: 4px;

    background-image: linear-gradient(
        to bottom,
        var(--ty-black) 0%,
        var(--ty-black) 50%,
        transparent 50%,
        transparent 100%
    );
    background-size: 4px 12px;
    background-repeat: repeat-y;

    z-index: 3;
    pointer-events: none;
}


/* --- Notches (kreisrunde Aussparungen an der Perforation) --- */

.ty-ticket-notch {
    position: absolute;
    width: 24px;
    height: 24px;

    left: var(--ticket-stub-width);
    transform: translateX(-50%);

    background: var(--ty-mint);  /* Section-Background */
    border: 3px solid var(--ty-black);
    border-radius: 50%;

    z-index: 4;
}

.ty-ticket-notch--top {
    top: -14px;
}

.ty-ticket-notch--bottom {
    bottom: -14px;
}


/* --- Main Content (rechte Seite) --- */

.ty-ticket-body {
    position: relative;
    padding: 40px 42px;

    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 36px;
    align-items: center;
}

.ty-ticket-content h2 {
    margin: 0 0 16px;
    font-family: var(--ty-font-headline);
    font-size: clamp(36px, 4vw, 56px);
    line-height: 0.92;
    letter-spacing: -2px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--ty-black);
}

.ty-ticket-content .ty-ticket-lead {
    margin: 0 0 24px;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--ty-blue);
}

.ty-ticket-content ul {
    list-style: none !important;
    margin: 0 0 28px;
    padding: 0;
}

.ty-ticket-content ul li {
    list-style: none !important;
    list-style-type: none !important;
    position: relative;
    margin-bottom: 8px;
    padding-left: 22px;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--ty-black);
}

.ty-ticket-content ul li::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--ty-blue);
    font-weight: 800;
}

.ty-ticket-content ul li::marker {
    content: "" !important;
    display: none !important;
}

/* Preis-Block */
.ty-ticket-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 22px;
    border-top: 3px solid var(--ty-black);
}

.ty-ticket-price-label {
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ty-black);
}

.ty-ticket-price-value {
    font-family: var(--ty-font-headline);
    font-size: 34px;
    line-height: 1;
    letter-spacing: -1px;
    font-weight: 800;
    color: var(--ty-blue);
}

.ty-ticket-price-note {
    font-size: 13px;
    font-weight: 700;
    color: var(--ty-black);
    opacity: 0.7;
}


/* --- Visual (Bild rechts) --- */

.ty-ticket-visual {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: var(--ty-border-small);
    box-shadow: 6px 6px 0 var(--ty-black);
}

.ty-ticket-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ty-ticket-visual-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;

    padding: 8px 12px;

    border: 3px solid var(--ty-black);
    background: var(--ty-pink);
    color: var(--ty-black);

    font-family: var(--ty-font-copy);
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;

    transform: rotate(-4deg);
}


/* --- Instagram CTA --- */

.ty-ticket-actions {
    margin-top: 36px;
    text-align: center;
}

.ty-ticket-instagram {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 56px;
    padding: 0 28px;

    border: var(--ty-border-small);
    background: var(--ty-black);
    color: var(--ty-white) !important;
    text-decoration: none !important;

    font-family: var(--ty-font-copy);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.ty-ticket-instagram:hover {
    transform: translate(-2px, -2px);
}


/* =========================================================
   RESPONSIVE – TABLET
========================================================= */

@media (max-width: 1100px) {
    :root {
        --ticket-stub-width: 280px;
    }

    .ty-ticket-body {
        grid-template-columns: 1fr 260px;
        gap: 28px;
        padding: 32px 32px;
    }
}


/* =========================================================
   RESPONSIVE – MOBILE (Ticket wird vertikal)
========================================================= */

@media (max-width: 800px) {

    /* Ticket: einspaltig (Stub oben, Body unten) */
    .ty-ticket {
        grid-template-columns: 1fr;
    }

    .ty-ticket-stub {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding: 26px 26px;
        border-right: 0;
        border-bottom: var(--ty-border-small);
    }

    .ty-ticket-stub > div:first-child {
        flex: 1 1 60%;
    }

    .ty-ticket-day {
        font-size: 40px;
    }

    .ty-ticket-frequency {
        margin-bottom: 0;
    }

    .ty-ticket-time {
        border-top: 0;
        padding-top: 0;
        text-align: right;
        flex: 0 0 auto;
    }

    .ty-ticket-id {
        flex: 1 1 100%;
        margin-top: 4px;
    }

    /* Perforation: jetzt horizontal an der Stub-Unterkante */
    .ty-ticket-perforation {
        top: auto;
        left: 12px;
        right: 12px;
        bottom: auto;
        transform: none;

        /* Wird via JS-Variable positioniert oder einfach unsichtbar */
        display: none;
    }

    /* Notches: links + rechts an der horizontalen Trennlinie */
    .ty-ticket-notch {
        left: auto;
        transform: none;
        top: auto;
        bottom: auto;

        /* Positionierung relativ zur Trennlinie zwischen Stub und Body */
    }

    .ty-ticket-notch--top {
        left: -14px;
        top: auto;
        bottom: auto;
        /* Position wird über parent absolute relativ zur Stub-Bottom-Edge */
    }

    .ty-ticket-notch--bottom {
        right: -14px;
        left: auto;
        top: auto;
        bottom: auto;
    }

    /* Vereinfachte Lösung Mobile: Notches an Stub-Bottom positionieren */
    .ty-ticket {
        position: relative;
    }

    .ty-ticket-notch--top {
        position: absolute;
        top: auto;
        bottom: auto;
        left: -14px;

        /* Position über JS oder fix nach Stub */
        top: 100px;  /* Fallback */
    }

    .ty-ticket-notch--bottom {
        position: absolute;
        top: 100px;  /* Gleicher Wert wie --top für Mobile */
        right: -14px;
        left: auto;
    }

    /* Body einspaltig */
    .ty-ticket-body {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 28px 26px;
    }

    .ty-ticket-visual {
        max-width: 360px;
        margin: 0 auto;
        width: 100%;
    }
}

@media (max-width: 600px) {

    .ty-community-section--ticket {
        padding: var(--ty-section-space-mobile) 0;
    }

    .ty-community-section--ticket .ty-community-inner {
        padding: 0 var(--ty-pad-mobile);
    }

    .ty-ticket-stub {
        flex-direction: column;
        gap: 18px;
    }

    .ty-ticket-time {
        text-align: left;
    }

    .ty-ticket-content h2 {
        font-size: 32px;
    }

    .ty-ticket-price-value {
        font-size: 28px;
    }
}



/* =========================================================
   HOME HERO – Aufteilung 2/3 Text + 1/3 Visual
   Text bekommt mehr Platz, H1 bleibt 2-zeilig
========================================================= */

.ty-home-hero .ty-home-hero-grid {
    grid-template-columns: 2fr 1fr;
    gap: 60px;
}

/* H1 darf jetzt mehr Platz nehmen */
.ty-home-hero .ty-home-hero-content h1 {
    max-width: 100%;
}

/* Visual-Seite an die schmalere Spalte anpassen */
.ty-home-hero .ty-home-hero-visual {
    min-height: 620px;
}

/* Hauptbild: passt sich der schmaleren Spalte an */
.ty-home-hero .ty-home-image-main {
    width: 100%;
    height: 500px;
}

/* Sekundäres Bild: kleiner und besser positioniert */
.ty-home-hero .ty-home-image-secondary {
    width: 70%;
    height: 240px;
    bottom: 0;
    left: -50px;
}

/* Shape-Kreis: kleiner damit es nicht erschlägt */
.ty-home-hero .ty-home-shape-circle {
    width: 360px;
    height: 360px;
    top: -180px;
    right: -180px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

/* Tablet: noch 2/3 - 1/3 aber kompakter */
@media (max-width: 1100px) {
    .ty-home-hero .ty-home-hero-grid {
        grid-template-columns: 1.6fr 1fr;
        gap: 40px;
    }

    .ty-home-hero .ty-home-image-main {
        height: 420px;
    }

    .ty-home-hero .ty-home-image-secondary {
        height: 200px;
        left: -30px;
    }
}

/* Mobile: vorher schon einspaltig, hier nichts zu tun */

/* =========================================================
   RESPONSIVE FIX – Hero + Disciplines
   Früherer Wechsel auf einspaltig, sauberere Übergänge
========================================================= */


/* =========================================================
   HERO – Verbesserte Breakpoints
========================================================= */

/* 1200px → Übergang vorbereiten (Bilder kleiner) */
@media (max-width: 1200px) {
    .ty-home-hero .ty-home-hero-grid {
        grid-template-columns: 1.8fr 1fr;
        gap: 50px;
    }

    .ty-home-hero .ty-home-image-main {
        height: 460px;
    }

    .ty-home-hero .ty-home-image-secondary {
        height: 220px;
    }

    .ty-home-hero .ty-home-shape-circle {
        width: 280px;
        height: 280px;
        top: -140px;
        right: -140px;
    }
}

/* 1024px → Tablet quer: noch 2-spaltig aber kompakter */
@media (max-width: 1024px) {
    .ty-home-hero {
        padding: 100px 0 80px;
    }

    .ty-home-hero .ty-home-hero-grid {
        grid-template-columns: 1.5fr 1fr;
        gap: 40px;
    }

    .ty-home-hero .ty-home-hero-content h1 {
        font-size: clamp(54px, 7.5vw, 88px);
        letter-spacing: -2px;
    }

    .ty-home-subline {
        font-size: 20px;
    }

    .ty-home-hero .ty-home-hero-visual {
        min-height: 480px;
    }

    .ty-home-hero .ty-home-image-main {
        height: 380px;
    }

    .ty-home-hero .ty-home-image-secondary {
        width: 75%;
        height: 180px;
        left: -30px;
    }
}

/* 880px → einspaltig (vorher: erst bei 980px) */
@media (max-width: 880px) {
    .ty-home-hero .ty-home-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 60px;
    }

    .ty-home-hero .ty-home-hero-content h1 {
        font-size: clamp(48px, 9vw, 72px);
    }

    .ty-home-hero .ty-home-hero-visual {
        min-height: 460px;
    }

    .ty-home-hero .ty-home-image-main {
        width: 78%;
        height: 320px;
        right: 0;
    }

    .ty-home-hero .ty-home-image-secondary {
        width: 50%;
        height: 200px;
        left: 0;
        bottom: -10px;
    }
}


/* =========================================================
   DISCIPLINES V3 – Verbesserte Breakpoints
========================================================= */

/* 1200px → Header bekommt etwas weniger fr-Vorsprung */
@media (max-width: 1200px) {
    .ty-disciplines-section--v3 .ty-disciplines-head {
        grid-template-columns: 1.7fr 1fr;
        gap: 45px;
    }

    .ty-disciplines-section--v3 .ty-disciplines-head-left h2 {
        font-size: clamp(44px, 5.5vw, 80px);
    }
}

/* 1024px → Header bricht früher zu einspaltig
   Boxen bleiben aber 2-spaltig, nur kleiner */
@media (max-width: 1024px) {
    .ty-disciplines-section--v3 .ty-disciplines-head {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 60px;
    }

    .ty-disciplines-section--v3 .ty-disciplines-head-left h2 {
        font-size: clamp(42px, 6vw, 64px);
        letter-spacing: -2px;
    }

    .ty-disciplines-section--v3 .ty-disciplines-head-right p {
        font-size: 20px;
        max-width: 640px;
    }

    .ty-disciplines-section--v3 .ty-discipline-card {
        height: 380px;
    }

    .ty-disciplines-section--v3 .ty-disciplines-grid > article:nth-child(2),
    .ty-disciplines-section--v3 .ty-disciplines-grid > article:nth-child(4) {
        margin-top: 50px;
    }
}

/* 880px → 2x2 Grid wird zu 1x4 (einspaltig), Versatz weg */
@media (max-width: 880px) {
    .ty-disciplines-section--v3 .ty-disciplines-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .ty-disciplines-section--v3 .ty-disciplines-grid > article:nth-child(2),
    .ty-disciplines-section--v3 .ty-disciplines-grid > article:nth-child(4) {
        margin-top: 0;
    }

    .ty-disciplines-section--v3 .ty-discipline-card {
        height: 340px;
    }
}



/* =========================================================
   BUSINESS CONTACT HEAD – Header neu strukturiert
   - Label oben
   - Headline 2-zeilig (max. ~14 Zeichen pro Zeile)
   - Subtext einzeilig darunter (volle Breite, schlank)
========================================================= */

/* Header ist KEIN Grid mehr – einfacher Stack */
.ty-business-contact .ty-business-contact-head {
    display: block;
    margin-bottom: 60px;
}

/* Section-Label oben */
.ty-business-contact .ty-business-contact-head .ty-section-label {
    display: inline-flex;
    margin: 0 0 24px;
}

/* Headline: groß, 2-zeilig, aber Schriftgröße begrenzt */
.ty-business-contact .ty-business-contact-head h2 {
    margin: 0 0 20px;
    max-width: 16ch;  /* sorgt für 2-zeiligen Bruch */

    font-family: var(--ty-font-headline) !important;
    font-size: clamp(48px, 5vw, 84px);
    line-height: 0.92;
    letter-spacing: -2px;
    font-weight: 900 !important;
    text-transform: none;  /* falls Divi uppercase erzwingt */
    color: var(--ty-black);
}

/* Subtext: schlank, 1-zeilig auf Desktop */
.ty-business-contact .ty-business-contact-head p {
    margin: 0;
    max-width: 760px;

    font-family: var(--ty-font-copy) !important;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--ty-black);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1024px) {
    .ty-business-contact .ty-business-contact-head h2 {
        font-size: clamp(44px, 6vw, 64px);
        max-width: 18ch;
    }

    .ty-business-contact .ty-business-contact-head p {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .ty-business-contact .ty-business-contact-head h2 {
        font-size: clamp(38px, 9vw, 56px);
        max-width: 100%;
        letter-spacing: -1.5px;
    }

    .ty-business-contact .ty-business-contact-head p {
        font-size: 17px;
    }
}

/* =========================================================
   BUSINESS HERO – 2/3 Text + 1/3 Visual
========================================================= */

.ty-business-hero .ty-business-hero-grid {
    grid-template-columns: 2fr 1fr;
    gap: 60px;
}

.ty-business-hero .ty-business-hero-content h1 {
    max-width: 100%;
}

.ty-business-hero .ty-business-hero-visual {
    min-height: 620px;
}

.ty-business-hero .ty-business-main-image {
    width: 100%;
    height: 480px;
    top: 30px;
    right: 0;
}

.ty-business-hero .ty-business-second-image {
    width: 75%;
    height: 220px;
    left: -40px;
    bottom: 0;
}

.ty-business-hero .ty-business-shape-circle {
    width: 280px;
    height: 280px;
    top: -100px;
    right: -100px;
}

.ty-business-hero .ty-business-sticker {
    top: 30px;
    left: -30px;
}

/* =========================================================
   RESPONSIVE BREAKPOINTS
========================================================= */

/* 1200px: Bilder kompakter */
@media (max-width: 1200px) {
    .ty-business-hero .ty-business-hero-grid {
        grid-template-columns: 1.8fr 1fr;
        gap: 50px;
    }

    .ty-business-hero .ty-business-main-image {
        height: 440px;
    }

    .ty-business-hero .ty-business-second-image {
        height: 200px;
    }

    .ty-business-contact .ty-business-contact-head {
        grid-template-columns: 1.7fr 1fr;
        gap: 8px 40px;
    }
}

/* 1024px: Hero noch 2-spaltig, Contact-Header bricht ein */
@media (max-width: 1024px) {
    .ty-business-hero {
        padding: 90px 0 70px;
    }

    .ty-business-hero .ty-business-hero-grid {
        grid-template-columns: 1.5fr 1fr;
        gap: 40px;
    }

    .ty-business-hero .ty-business-hero-content h1 {
        font-size: clamp(52px, 7.5vw, 84px);
        letter-spacing: -2px;
    }

    .ty-business-hero-copy {
        font-size: 22px;
    }

    .ty-business-hero .ty-business-hero-visual {
        min-height: 460px;
    }

    .ty-business-hero .ty-business-main-image {
        height: 360px;
    }

    .ty-business-hero .ty-business-second-image {
        width: 78%;
        height: 180px;
        left: -20px;
    }

    /* Contact Header: einspaltig */
    .ty-business-contact .ty-business-contact-head {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 20px;
        align-items: start;
    }

    .ty-business-contact .ty-business-contact-head .ty-section-label,
    .ty-business-contact .ty-business-contact-head h2,
    .ty-business-contact .ty-business-contact-head p {
        grid-column: 1;
        grid-row: auto;
    }

    .ty-business-contact .ty-business-contact-head p {
        max-width: 720px;
    }
}

/* 880px: Hero komplett einspaltig */
@media (max-width: 880px) {
    .ty-business-hero .ty-business-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 50px;
    }

    .ty-business-hero .ty-business-hero-content h1 {
        font-size: clamp(48px, 9vw, 72px);
    }

    .ty-business-hero .ty-business-hero-visual {
        min-height: 440px;
    }

    .ty-business-hero .ty-business-main-image {
        width: 80%;
        height: 300px;
        right: 0;
    }

    .ty-business-hero .ty-business-second-image {
        width: 55%;
        height: 180px;
        left: 0;
        bottom: -10px;
    }

    .ty-business-hero .ty-business-sticker {
        top: 18px;
        left: -10px;
        font-size: 14px;
        padding: 14px 16px;
    }

    .ty-business-hero .ty-business-shape-circle {
        width: 200px;
        height: 200px;
        top: -80px;
        right: -80px;
    }
}

/* 767px: Mobile-Tuning */
@media (max-width: 767px) {
    .ty-business-hero .ty-business-hero-actions {
        flex-direction: column;
    }

    .ty-business-hero .ty-business-hero-actions .ty-home-button {
        width: 100%;
    }

    .ty-business-hero .ty-business-sticker {
        position: relative;
        top: auto;
        left: auto;
        display: inline-block;
        margin-top: 20px;
        transform: rotate(-3deg);
    }
}

/* =========================================================
   SECTION SPACING – Whitespace zwischen den Sektionen reduzieren
   Stattdessen: jede Section hat schmaleres oberes UND unteres Padding,
   sodass zwei Nachbarn zusammen nicht 240px sondern 120-160px ergeben
========================================================= */

/* --- Disciplines V3 --- */
.ty-disciplines-section--v3 {
    padding: 80px 0 60px;  /* war: 120px / 120px */
}

/* --- Flow Timeline --- */
.ty-flow-section-timeline {
    padding: 60px 0 60px;  /* war: 120px / 120px */
}

/* --- Audience Section --- */
.ty-audience-section {
    padding: 60px 0 80px;  /* war: 120px / 120px */
}


/* =========================================================
   DIVI WRAPPER FIX
   Divi packt jede Section in einen eigenen et_pb_section
   mit eigenem Padding - das müssen wir auf 0 setzen,
   damit nur unser CSS-Padding zählt.
========================================================= */

.et_pb_section:has(.ty-disciplines-section--v3),
.et_pb_section:has(.ty-flow-section-timeline),
.et_pb_section:has(.ty-audience-section) {
    padding: 0 !important;
    margin: 0 !important;
}


/* =========================================================
   RESPONSIVE – Mobile braucht weniger Section-Space
========================================================= */

@media (max-width: 1024px) {
    .ty-disciplines-section--v3 {
        padding: 60px 0 50px;
    }

    .ty-flow-section-timeline {
        padding: 50px 0 50px;
    }

    .ty-audience-section {
        padding: 50px 0 60px;
    }
}

@media (max-width: 767px) {
    .ty-disciplines-section--v3 {
        padding: 50px 0 40px;
    }

    .ty-flow-section-timeline {
        padding: 40px 0 40px;
    }

    .ty-audience-section {
        padding: 40px 0 50px;
    }
}


/* =========================================================
   COMMUNITY TICKET CTA ON WEBSITE
========================================================= */

.ty-ticket-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
}

.ty-ticket-main-cta,
.ty-ticket-instagram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-height: 56px;
  padding: 0 28px;

  border: var(--ty-border-small);
  background: var(--ty-black);
  color: var(--ty-white) !important;
  text-decoration: none !important;

  font-family: var(--ty-font-copy);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;

  box-shadow: 6px 6px 0 var(--ty-black);

  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ty-ticket-main-cta:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--ty-black);
}

.ty-ticket-instagram {
    background: var(--ty-white);
    color: var(--ty-black) !important;
    box-shadow: none;
}

.ty-community-ticket-embed {
    padding: 0 0 var(--ty-section-space);
    background: var(--ty-mint);
}

@media (max-width: 767px) {
    .ty-ticket-actions {
        flex-direction: column;
    }

    .ty-ticket-main-cta,
    .ty-ticket-instagram {
        width: 100%;
    }

    .ty-community-ticket-embed {
        padding-bottom: var(--ty-section-space-mobile);
    }
}

/* =========================================================
   FOOTER MOBILE – Logo zentriert + 2-spaltiges Info-Grid
   Ohne Trennlinien, durchgehend 2-spaltig bis ganz klein
========================================================= */

@media (max-width: 880px) {

    /* Footer-Grid: Logo volle Breite, dann 2-spaltig, dann Social voll */
    .ty-footer-top {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "brand    brand"
            "location hours"
            "social   social";
        gap: 32px 24px;
    }

    .ty-footer-brand {
        grid-area: brand;
        display: flex;
        justify-content: center;
    }

    .ty-footer-brand img {
        width: 120px;
        height: auto;
    }

    .ty-footer-location { grid-area: location; }
    .ty-footer-hours    { grid-area: hours; }
    .ty-footer-social   { grid-area: social; }

    /* Mobile-Typografie kompakter */
    .ty-footer h3 {
        margin: 0 0 12px;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .ty-footer p {
        margin: 0 0 14px;
        font-size: 15px;
        line-height: 1.5;
    }

    .ty-footer p:last-child {
        margin-bottom: 0;
    }

    /* Social: Button volle Breite, gut tappbar */
    .ty-footer-social a {
        display: flex;
        width: 100%;
        min-height: 54px;
        justify-content: center;
        font-size: 15px;
    }

    /* Bottom Copyright */
    .ty-footer-bottom {
        margin-top: 28px;
    }

    .ty-footer-bottom p {
        font-size: 13px;
        line-height: 1.6;
		padding: 0;
    	margin: 0;
    }
	
	.ty-footer {
    padding-bottom: 24px;
}

	@media (max-width: 880px) {
    .ty-footer {
        padding-bottom: 20px;
    }
	
}