/* ==========================================================================
   pages.css
   Inhalt:
   - Page-spezifische Styles (immer scoped über body.page_* / .page_*)
   - Layout-Overrides, die nur auf bestimmten Seiten gelten

   ========================================================================== */

/* ==========================================================================
   Home
   ========================================================================== */

body.page_home {
    background: var(--color-white);
}

body.page_home .content-section.is-coral {
    padding-top: 3rem;
}

body.page_home main {
    max-width: none;
    padding: 0;
}

/* ==========================================================================
   Home: Hero
   ========================================================================== */

body.page_home .hero {
    position: relative;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    isolation: isolate;

    width: 100%;
    height: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;

    gap: 20px;
    background: linear-gradient(#d000c5, #8a15ff);
}

body.page_home .hero > div {
    width: 100%;
}

body.page_home .hero .container {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;

    text-align: center;
    margin: 12vh auto;
    padding: 20px;
}

/* ==========================================================================
   Home: Crowd background
   ========================================================================== */

/* The background layer that receives the generated balls */
body.page_home .hero .crowd {
    position: absolute;
    inset: 0;
    z-index: 0;

    width: 100%;
    height: 100%;
    bottom: 0;

    overflow: hidden;
    pointer-events: none;
}

/* Visual styling for generated balls */
body.page_home .hero .ball {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(#8a15ff, #d000c5);
}

/* ==========================================================================
   Home: Project section
   ========================================================================== */

body.page_home .project-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 6rem 1.5rem;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;

    transition: 400ms;
}

body.page_home .project-title {
    position: sticky;
    top: 6rem;
    align-self: start;
}

body.page_home .project-content {
    display: grid;
    gap: 3rem;
}

body.page_home .project-content article {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    word-break: break-word;
}

body.page_home .project-content a {
    align-self: flex-start;
}

body.page_home .project-content a img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 250px;
}

body.page_home section.content-section {
    padding-bottom: 2rem;
}

/* ==========================================================================
   Content pages (global)
   ========================================================================== */

body.page_content {
    overflow-x: hidden;
    --stack-top: 0;
}

/* Hero wrapper on content pages */
body.page_content .hero {
    top: var(--stack-top);

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;

    overflow: hidden;
    isolation: isolate;

    width: 100%;
    height: 100%;
    min-height: 100vh;

    margin: 0;
    padding-left: 30px;

    gap: 20px;
}

/* Sticky header helper (scoped to content pages) */
body.page_content .header-top-sticky {
    position: sticky;
    z-index: 1;
}

/* Video section stickiness on content pages */
body.page_content main > section[aria-labelledby="video-title"] {
    position: sticky;
    top: var(--stack-top);
    z-index: 2;
}

/* Lists inside content sections */
body.page_content section.content-section .ul_none_bullet {
    margin: 0;
    padding: 0;
}

body.page_content section.content-section .ul_none_bullet > li {
    position: sticky;
    top: var(--stack-top);
    z-index: 3;

    min-height: 95vh;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 6rem 1.5rem;
}

/* Teaser: center the visual block */
body.page_content section.content-section .teaser__layout > div:last-child {
    display: flex;
    justify-content: center;
}

/* Banner teaser visual fixed positioning */
body.page_content header[role="banner"] .teaser__layout > div:last-child {
    position: fixed;
    right: clamp(4rem, 8vw, 12rem);
    top: 30vh;
    width: clamp(180px, 22vw, 420px);
    z-index: 5;
    pointer-events: none;
}

body.page_content header[role="banner"] .teaser__layout > div:last-child img {
    display: block;
    width: 100%;
    height: auto;
}

/* Main content grid */
body.page_content .content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(220px, 28vw, 520px);
}

body.page_content .section-grid-left {
    grid-column: 1;
    width: min(45rem, 100%);
    margin-inline: auto;

    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* ==========================================================================
   Content pages: Content split layout
   ========================================================================== */

body.page_content .content-split {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;

    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1.5rem;

    display: grid;
    grid-template-columns: minmax(360px, 2.5fr) minmax(0, 3fr);
    gap: 5rem;
    align-items: start;
}

body.page_content .content-split__title {
    position: sticky;
    top: var(--stack-top);
}

body.page_content .content-split__content {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

body.page_content .content-split__content p,
body.page_content .content-split__content hr {
    max-width: 45rem;
}

body.page_content .content-split__content .btn {
    margin-top: 1rem;
}

/* ==========================================================================
   Content pages: Quote block
   ========================================================================== */

body.page_content .quote-block {
    grid-column: 1 / -1;
    max-width: 1200px;
    width: 100%;

    margin-left: 25%;
    margin-block: 4rem;
    padding: 4rem 1.5rem;

    position: relative;
    z-index: 5;

    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;

    border-radius: 20px;
    word-break: break-word;
}

/* NOTE: typography-like rules; kept here because it is page-specific presentation */
body.page_content .quote-block > p {
    margin: 0;
    line-height: 1.2;
    font-size: 3.4em;
    font-weight: 700;
    font-family: var(--font-serif);
}

body.page_content .quote-block .small_quote {
    font-size: 1em;
    font-family: var(--font-sans);
}

/* ==========================================================================
   Content pages: Alternating backgrounds
   ========================================================================== */

body.page_content .information ul > li:nth-child(odd) {
    background: var(--color-light-coral);
}

body.page_content .information ul > li:nth-child(even) {
    background: var(--lighter-light-coral);
}

body.page_content .concerns ul > li:nth-child(odd) {
    background: var(--color-light-blue);
}

body.page_content .concerns ul > li:nth-child(even) {
    background: var(--color-lighter-light-blue);
}

body.page_content .communications ul > li:nth-child(odd) {
    background: var(--color-dark-blue);
    color: var(--color-white);
}

body.page_content .communications ul > li:nth-child(even) {
    background: var(--color-blue);
    color: var(--color-white);
}

/* ==========================================================================
   Page: Linksammlung
   ========================================================================== */

body.page_linksammlung .content {
    display: block;
}

/* ==========================================================================
   Page: Kontakt
   ========================================================================== */

.contact {
    max-width: 70ch;
    margin: 0 auto;
    padding-bottom: 10rem;
    padding-top: 20rem;
}

/* ==========================================================================
   Page: Konfigurator
   ========================================================================== */

body.page_konfigurator #main {
    min-height: 100vh;
}

body.page_konfigurator .wrapper {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    gap: 20px;
    align-items: start;

    padding-bottom: 20px;
    min-height: 70vh;
}

body.page_konfigurator .empty-page {
    grid-column: 1 / -1;
    min-height: 60vh;

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

    max-width: 80vh;
    margin: auto;

    text-align: center;
    opacity: 0.5;
}

/* Categories */
body.page_konfigurator .categories-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
}

body.page_konfigurator .categories {
    position: sticky;
    top: 100px;

    display: flex;
    flex-direction: column;
    gap: 10px;

    width: 100%;
    padding-left: 10px;
}

body.page_konfigurator .categories a {
    display: flex;
    align-items: center;

    width: 100%;
    border-radius: 20px;

    padding-left: 20px;
    padding-right: 10px;

    font-weight: 600;
    font-size: 1.2em;

    background-color: grey;
    color: white;
}

body.page_konfigurator .categories a.category-link.is-active {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    background: var(--color-black);
    color: var(--color-white);
}

body.page_konfigurator .categories-mobile {
    display: none;
}

body.page_konfigurator .category-link {
    display: inline-block;
}

body.page_konfigurator .buttons-wrapper {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

/* Selections */
body.page_konfigurator .selection-wrapper {
    display: none;
}

body.page_konfigurator .selection-wrapper.active-selection {
    display: block;
}

body.page_konfigurator .selections {
    border-radius: 8px;
    padding: 0.75rem;
}

body.page_konfigurator .selections-headline {
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 0.5rem;
}

body.page_konfigurator .button-more.fixed {
    position: sticky;
    top: 1rem;
}

body.page_konfigurator .product-item.full-width .buttons-wrapper {
    position: absolute;
    left: 40px;
    bottom: 40px;

    display: flex;
    gap: 1rem;

    z-index: 10;
}

/* Products grid */
body.page_konfigurator .products {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem 1.25rem;
}

body.page_konfigurator .product-item {
    grid-column: span 6;

    position: relative;

    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    border-radius: 12px;
    padding: 1rem;

    border: 1px solid rgba(0, 0, 0, 0.08);
    background: var(--color-light-grey);
}

body.page_konfigurator .product-item .button-more {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--color-light-grey);
}

body.page_konfigurator .button-update {
    display: none;
}

body.page_konfigurator .product-item.full-width {
    position: relative;
    z-index: 5;
}

body.page_konfigurator .product-item-info {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    background: var(--color-light-grey);
}

body.page_konfigurator .product-item-info.sticky {
    position: sticky;
    top: 0;
    padding: 40px;
}

/* Full-width overlay */
body.page_konfigurator .product-item.full-width {
    position: fixed;
    inset: 60px;
    z-index: 999999;

    display: grid;
    grid-column: 1;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;

    overflow: hidden;
    border-radius: 20px;

    /* Dim background behind the overlay */
    box-shadow: 0 0 300px 200px rgba(44, 20, 32, 0.75);
}

body.page_konfigurator .product-item.full-width .selection-wrapper {
    display: block;
    grid-column: 2;
    height: 100%;
}

body.page_konfigurator .product-item.full-width .selection-wrapper.active-selection {
    display: grid;
    opacity: 1;
    padding: 40px 60px 60px;
    overflow: auto;
}

body.page_konfigurator .product-headline h3 {
    margin: 0;
    line-height: 1.25;
}

body.page_konfigurator .product-description {
    color: #333;
}

/* ==========================================================================
   Konfigurator: Avatar
   ========================================================================== */

body.page_konfigurator .avatar-wrapper {
    position: fixed;
    left: 20px;
    bottom: 20px;

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

    width: 100%;
    max-width: 200px;

    transform: translateY(var(--footer-overlap, 0px));
}

body.page_konfigurator .avatar-information {
    background: var(--color-lighter-light-blue);

    display: flex;
    flex-direction: column;

    border-radius: 20px;
    padding: 10px;

    max-width: 100%;
    overflow-wrap: anywhere;
    hyphens: auto;
}

body.page_konfigurator .avatar-wrapper img {
    width: 8vh;
    border-radius: 50%;
}

/* ==========================================================================
   Konfigurator: Cart (Auswahl)
   ========================================================================== */

body.page_konfigurator .products > .cart-title,
body.page_konfigurator .products > #cart-status,
body.page_konfigurator .products > #cart {
    grid-column: 1 / -1;
}

body.page_konfigurator #cart {
    max-width: 950px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem 1.25rem;
}

body.page_konfigurator #cart .cart-item {
    grid-column: span 6;

    position: relative;

    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    border-radius: 12px;
    padding: 2.5rem 1rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: var(--color-light-grey);
}

body.page_konfigurator #cart .cart-headline {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;
}

body.page_konfigurator #cart .cart-description {
    font-size: 1.15rem;
    line-height: 1.5;
}

body.page_konfigurator #cart .cart-remove {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;

    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 9999px;
    background: var(--color-light-grey);

    cursor: pointer;
}

body.page_konfigurator .cart-wrapper-button {
    position: fixed;
    right: 20px;
    bottom: 20px;

    display: flex;
    gap: 10px;

    z-index: 1200;

    background: white;
    padding: 10px;
    border-radius: 20px;

    transform: translateY(var(--footer-overlap, 0px));
}

body.page_konfigurator #cart .headlineDiv {
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: 0.25rem;
}

body.page_konfigurator #cart .labelDivInner {
    display: grid;
    grid-template-columns: 1fr 24px;
    column-gap: 0.75rem;
    align-items: start;

    padding: 0.25rem 0;
}

body.page_konfigurator #cart .option-label {
    display: block;
    font-size: 0.95rem;
    line-height: 1.45;
}

body.page_konfigurator #cart .option-remove {
    width: 24px;
    height: 24px;

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

    padding: 0;
    margin: 0;
    border: 0;

    background: transparent;
    cursor: pointer;

    justify-self: end;
}

body.page_konfigurator #cart .option-remove img {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    max-width: none !important;
}

body.page_konfigurator #cart .option-remove:focus-visible {
    outline: 2px solid var(--color-dark-blue);
    outline-offset: 2px;
}

/* ==========================================================================
   Konfigurator: PDF preview layout (Auswahl)
   ========================================================================== */

body.page_konfigurator #pdfPreview[hidden],
body.page_konfigurator #pdfSummary[hidden] {
    display: none;
}

body.page_konfigurator #pdfSummary:not([hidden]) {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 2rem;
    align-items: start;
}

body.page_konfigurator #pdfPreview:not([hidden]) {
    display: block;
    min-height: calc(100vh - 140px);
}

body.page_konfigurator #pdfPreview .pdf-preview-wrapper {
    height: 100%;
    min-height: inherit;

    display: grid;
    grid-template-rows: auto 1fr;
    gap: 1rem;
}

body.page_konfigurator #pdfPreview iframe {
    width: 100%;
    height: 100%;
    min-height: 60vh;
    border: 0;
}

/* ==========================================================================
   Page transition tiles (from-top)
   ========================================================================== */

.transition-container {
  position: fixed;
  inset: 0;
  display: flex;
  z-index: 9999999;
  pointer-events: none; /* must never block interaction */
}

/* Each tile is a vertical column */
.transition-container .tile {
  display: block;          /* IMPORTANT: span -> block */
  flex: 1;                 /* equal width columns */
  position: relative;
  height: 0;               /* animated via GSAP */
  background: var(--color-light-blue);
}