/*
 * poloprofi Theme — Basis-Styles auf Grundlage der Design-Tokens (tokens.css).
 * Portiert die .pp-*-Patterns aus dem Shopware-PoloprofiTheme (base.scss).
 * AP4 baut das hier vollständig aus; dies ist das lauffähige Grundgerüst.
 */

body {
    margin: 0;
    background-color: var(--pp-cream);
    color: var(--pp-ink);
    font-family: var(--pp-font-body);
    /* sticky footer: column layout, main grows, footer stays at the
       viewport bottom on short pages (svh = stable on mobile browsers) */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
}

h1, h2 {
    font-weight: var(--pp-heading-font-weight);
    line-height: var(--pp-heading-line-height);
    letter-spacing: var(--pp-heading-letter-spacing);
    color: var(--pp-ink);
}

a { color: var(--pp-orange); }

/* Brand frame (container, top bar, header, nav, buttons, footer) comes from
   assets/css/shared.css — generated from design/shared.css, the single
   source shared with the Shopware theme. Only WP-specific layout rules that
   are NOT part of the shared look live here. */

/* CTA placement in the WP header row (the look is in shared.css; the shop
   places the same class inside a Bootstrap grid column, d-none d-xl-flex).
   display only from xl on — an unconditional display:flex here would win
   over the max-width hide in shared.css (same specificity, loaded later). */
.pp-header-ctas { margin-left: auto; align-items: center; }
@media (min-width: 1200px) {
    .pp-header-ctas { display: flex; }
}

/* Below lg: burger (nav-main-toggle-btn) right-aligned in the logo row, the
   inline nav is lg-only. The shop places its burger the same way
   (base.scss, header-actions-col); the burger's look is in shared.css. The
   row may wrap when it runs out of space. */
.pp-nav-toggle-col { display: none; }
@media (max-width: 991px) {
    .pp-header__row { flex-wrap: wrap; gap: 0; }
    .pp-nav { display: none; }
    .pp-nav-toggle-col { display: block; margin-left: auto; }
}

/* Offcanvas navigation, opened by the burger. Mirrors the storefront's
   core navigation offcanvas (Bootstrap offcanvas-start with the theme's
   Bootstrap variables): cream panel 100% - 20px wide (max 400px), slides
   in from the left in 0.45s, dark full-width close bar on top, olive
   headline, white list items with Bootstrap's gray separators. Values
   measured against the shop at 390px (25.09.2026). */
body.pp-offcanvas-open { overflow: hidden; }
.pp-offcanvas { position: fixed; inset: 0; z-index: 1050; visibility: hidden; transition: visibility 0s linear 0.45s; }
.pp-offcanvas.is-open { visibility: visible; transition-delay: 0s; }
.pp-offcanvas__backdrop {
    position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5);
    opacity: 0; transition: opacity 0.15s linear;
}
.pp-offcanvas.is-open .pp-offcanvas__backdrop { opacity: 1; }
.pp-offcanvas__panel {
    position: absolute; top: 0; bottom: 0; left: 0;
    width: min(calc(100% - 1.25rem), 25rem);
    background: var(--pp-cream); color: var(--pp-ink);
    display: flex; flex-direction: column;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.45s cubic-bezier(0.3, 0, 0.15, 1);
}
.pp-offcanvas.is-open .pp-offcanvas__panel { transform: none; }
.pp-offcanvas__close {
    display: flex; align-items: center; justify-content: center;
    width: 100%; padding: 8px 10px; margin: 0;
    background: var(--pp-ink); color: #fff;
    border: 1px solid var(--pp-ink); border-radius: var(--pp-radius);
    cursor: pointer; line-height: 0;
}
.pp-offcanvas__close svg { width: 19px; height: 19px; }
.pp-offcanvas__headline {
    padding: 20px 16px 16px;
    color: var(--pp-olive); font-weight: 700; font-size: 1rem; line-height: 1.5;
}
.pp-offcanvas__list { list-style: none; margin: 0; padding: 0; }
.pp-offcanvas__list li {
    background: #fff;
    border-top: 1px solid rgb(188, 193, 199); /* Bootstrap gray, as in the core list */
}
.pp-offcanvas__list li:last-child { border-bottom: 1px solid rgb(188, 193, 199); }
.pp-offcanvas__list a {
    display: flex; align-items: center;
    padding: 12px 16px;
    color: var(--pp-ink); text-decoration: none;
    font-size: 1rem; font-weight: 400; line-height: 1.5;
}
.pp-offcanvas__list a:hover { color: var(--pp-olive-accent); }

.pp-main {
    padding: var(--pp-space-lg) 0;
    flex: 1 0 auto;
}

/* --- Landing page sections (mirrors the Shopware home, base.scss) -------- */

.pp-sec { padding: 3rem 0; }
/* Eine Design-Sektion kann aus mehreren Elementor-Widgets bestehen (Auftakt,
   Produktliste, Button). Dann trägt nur das erste Widget den oberen und nur
   das letzte den unteren Abstand — sonst verdoppelt sich der Rhythmus
   gegenüber dem Shopware-Theme. */
.pp-sec--top { padding-bottom: 0; }
.pp-sec--bottom { padding-top: 0; }
.pp-sec--none { padding: 0; }

/* full-width band inside the constrained .pp-content column */
.pp-band {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.pp-band--dark { background: var(--pp-olive); color: rgba(255, 255, 255, 0.85); }
.pp-band--dark h2, .pp-band--dark h3 { color: #fff; }
.pp-band__inner { max-width: 72rem; margin: 0 auto; padding: 0 var(--pp-space-md); }

.pp-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ece9dc;
    color: var(--pp-olive-accent);
    font-weight: 700;
    font-size: 1.75rem;
    min-height: 320px;
}

/* hero */
.pp-hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 3.5rem 0 4rem;
}
.pp-hero h1 { margin: 0 0 1rem; font-size: clamp(2rem, 4.5vw, 3.25rem); }
.pp-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.pp-hero-media { position: relative; }
.pp-hero-media .pp-placeholder { min-height: 420px; }
/* Hero-Bild: gleiche Klasse und gleiche Werte wie im Shopware-Theme
   (PoloprofiTheme base.scss, .pp-media-img) — Kandidat für design/shared.css,
   sobald WP und Shop dort auch die Medien-Regeln teilen. */
.pp-media-img {
    display: block;
    width: 100%;
    min-height: 320px;
    max-height: 520px;
    object-fit: cover;
}
.pp-hero-media .pp-media-img { min-height: 420px; }
.pp-hero-card {
    position: absolute;
    right: -1rem;
    bottom: 2.5rem;
    max-width: 240px;
    background: var(--pp-olive);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--pp-orange);
}
@media (max-width: 767px) { .pp-hero { grid-template-columns: 1fr; } }

/* usp row */
.pp-usp-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding: 2.5rem 0;
    border-top: 1px solid var(--pp-border);
    border-bottom: 1px solid var(--pp-border);
}
p.pp-usp { border-left: 1px solid var(--pp-border); padding-left: 1.5rem; margin: 0; color: var(--pp-muted); font-size: 0.875rem; }
p.pp-usp:first-child { border-left: none; padding-left: 0; }
.pp-usp strong { display: block; margin-bottom: 0.25rem; color: var(--pp-ink); font-size: 1rem; }
@media (max-width: 575px) { .pp-usp-row { grid-template-columns: 1fr; } }

/* split intro (sortiment) */
.pp-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: start; }
.pp-sidenote { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.75rem; }
@media (max-width: 767px) { .pp-split { grid-template-columns: 1fr; } }

/* numbered target-group list: pp-numbered-* comes from shared.css */

/* dark feature grid: pp-dark-grid / pp-check-* come from shared.css */

/* musterpolo cta with ghost word */
.pp-muster { position: relative; padding: 5rem 0; }
.pp-muster-ghost {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: clamp(3rem, 9vw, 7rem);
    font-weight: 700;
    color: rgba(31, 37, 19, 0.06);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
}
.pp-muster-content { position: relative; max-width: 32rem; }

/* faq accordion (native details/summary) */
.pp-faq { border-top: 1px solid var(--pp-border); }
.pp-faq details { border-bottom: 1px solid var(--pp-border); }
.pp-faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 0;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.pp-faq summary::-webkit-details-marker { display: none; }
.pp-faq summary::after { content: '+'; font-weight: 700; font-size: 1.25rem; line-height: 1; color: var(--pp-ink); flex: 0 0 auto; }
.pp-faq details[open] summary::after { content: '\2212'; color: var(--pp-orange); }
.pp-faq details > :not(summary) { padding: 0 2rem 1.25rem 0; margin: 0; color: var(--pp-muted); font-size: 0.9375rem; }