/*
 * Leschuplast GLT - everything that makes this site look different from the
 * shared base theme. This file is the ONLY place for site look; the shared
 * files (assets/css/base.css, forms.css, downloads.css, layout-primitives.css,
 * editor.css, blockstudio/sections/**) stay byte-identical with
 * theme-netzlicht-wp so that `git merge upstream/main` never conflicts.
 *
 * Load order (functions.php of the base theme): style.css tokens, primitives,
 * base.css, then this file. Blockstudio writes the CSS of the blocks on a page
 * right before </head>, i.e. AFTER this file (measured on the live page,
 * 2026-10-13; the Blockstudio assets docs in docs/vendor-specs/ give no order).
 * Rules here that must beat a block rule therefore carry one more class or
 * element in the selector (never !important).
 *
 * Contents: 1 tokens, 2 font, 3 typography, 4 buttons, 5 header and burger,
 * 6 off-canvas menu, 7 footer, 8 block variants, 9 base rules this site
 * switches off (they belong to the generic top bar / desktop navigation).
 */

/* ── 1. Tokens (colours outside the token block, type scale, page margins) ── */
:root {
    --color-dark: var(--color-accent);                           /* dark areas (section "Dunkel", top bar, footer) = the navy accent */
    --color-sand: #eee3d4;                                       /* "Fläche warm" = Sand, Schluss-Box */
    --font-size-base: clamp(17px, 0.9286rem + 0.4464vw, 22px);   /* body text like the Kadence version */
    --font-size-display: clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem);
    /* Heading scale measured on the Kadence site at 390 and 1440px */
    --font-size-h1:       clamp(2.5rem, 1.943rem + 2.286vw, 4rem);
    --font-size-h1-hero:  clamp(2.75rem, 1.543rem + 4.952vw, 6rem);
    --font-size-h2:       clamp(2.25rem, 1.971rem + 1.143vw, 3rem);
    --font-size-h2-large: clamp(2.5rem, 1.943rem + 2.286vw, 4rem);
    --font-size-h3:       clamp(1.75rem, 1.657rem + 0.381vw, 2rem);
}
/* Page margins like Kadence: 4rem desktop (token), 2rem to 1024px, 1rem to 767px */
@media (max-width: 1024px) { :root { --container-padding: 2rem; } }
@media (max-width: 767px)  { :root { --container-padding: 1rem; } }

/* ── 2. Nunito Sans (variable font, one file covers 400 and 700), latin and
   latin-ext as in the Kadence version; the latin file is preloaded by
   inc/site-config.php. ── */
@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 200 1000;
    font-stretch: 100%;
    font-display: swap;
    src: url("../fonts/nunito-sans-variable-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 200 1000;
    font-stretch: 100%;
    font-display: swap;
    src: url("../fonts/nunito-sans-variable-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── 3. Typography: body text 1.3 / 1px tracking, headings 700 ── */
:where(h1, h2, h3, section, li)[id] { scroll-margin-top: 7.5rem; }
body {
    line-height:    1.3;
    letter-spacing: 1px;
}
h1, h2, h3, h4 { font-weight: 700; letter-spacing: 1px; }
h1 { line-height: 1.2; }
h3 { line-height: 1.2; }
.section--sand { color: #000000; }
.section--dark .btn:focus-visible { outline-color: #ffffff; }

/* ── 4. Buttons: square, 1px border, small chevron on the right ── */
.btn {
    gap:         0.75rem;
    padding:     0.6rem 1.1rem;
    font-weight: 400;
    border-width: 1px;
}
.btn::after {
    content: '';
    flex-shrink: 0;
    width: 0.4em;
    height: 0.4em;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}
/* Large buttons of the hero "Bild rechts", hero-bildwechsel "mitte",
   spezialisierungen tiles and teaser "vollbreit": room for the chevron. */
.hero--bild-rechts .btn-hell,
.hero-slides--mitte .btn-primary,
.spez__kachel .btn,
.bild-teaser-voll .btn { padding: 0.375rem 3.75rem 0.375rem 0.8rem; }
/* Filled button on blue or navy: light area with navy text like the Kadence
   version ("Produkte >" in the hero), >= 12:1. Hover: white. */
.section--dark .btn-primary,
.section--primary .btn-primary {
    background: var(--color-bg-soft);
    border-color: var(--color-bg-soft);
    color: var(--color-accent);
}
@media (hover: hover) and (pointer: fine) {
    .section--dark .btn-primary:hover,
    .section--primary .btn-primary:hover {
        background: #ffffff;
        border-color: #ffffff;
        color: var(--color-accent);
    }
}

/* ── 5.-7. Header, burger, off-canvas menu, footer (lifted from the former fork base.css) ── */
/* ── Kopf (Leschuplast): weiss, Logo links, rechts nur der Burger auf allen
   Breiten. Keine Topbar, keine Desktop-Navigation, kein Header-Button; das
   Off-Canvas-Menue (.site-drawer) ist das einzige Menue. Hoehe/Logo wie
   die Kadence-Vorlage: 110px Kopf + 250px Logo am Desktop, 94px + 120px
   mobil (Breakpoint 767px wie Kadence). ── */
.site-header {
    position:   sticky;
    top:        0;
    z-index:    100;
    background: #ffffff;
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 110px;
}
.site-header .logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-text);
    flex-shrink: 0;
}
.site-header .logo img { width: 250px; max-width: 60vw; height: auto; }
.logo__text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-primary);
    white-space: nowrap;
}
.site-footer .logo__text { color: var(--color-primary); }
.site-header .logo:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
@media (max-width: 767px) {
    .site-header__inner { min-height: 94px; }
    .site-header .logo img { width: 120px; }
}

/* ── Burger (alle Breiten): drei blaue Linien ohne Rahmen ── */
.nav-toggle {
    display: inline-flex;
    background: transparent;
    border: 0;
    padding: 0.75rem;
    margin-right: -0.75rem;
    cursor: pointer;
    color: var(--color-primary);
}
.nav-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.nav-toggle__box {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 40px;
    height: 25px;
}
.nav-toggle__box span {
    display: block;
    height: 2px;
    background: currentColor;
    transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(1) { transform: translateY(11.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(3) { transform: translateY(-11.5px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
    .nav-toggle__box span { transition: none; }
}

/* ── Off-Canvas-Menue (alle Breiten) ──
   Drawer ist Sibling des <header> (Stacking-/backdrop-filter-Falle, siehe
   header.php). Rechts einfahrendes Panel: 400px am Desktop, volle Breite
   bis 767px. Navy-Overlay (accent, 80 %) ueber dem Foto
   assets/img/menue-hintergrund.webp. Backdrop (z-index 105) dunkelt die
   Seite ab, der Drawer (110) liegt darueber. */
.site-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(100vw, 400px);
    padding: 5rem 2rem 2rem;
    background:
        linear-gradient(rgba(13, 31, 79, 0.8), rgba(13, 31, 79, 0.8)),
        url("../img/menue-hintergrund.webp") center / cover no-repeat,
        var(--color-accent);
    color: #ffffff;
    /* Closed = not painted (visibility interpolates discretely, so the
       slide-out stays visible; per MDN visibility, verified 2026-09-24).
       The closed drawer is also inert + aria-hidden (init.js). */
    visibility: hidden;
    transform: translateX(100%);
    transition: transform .28s ease, visibility .28s;
    z-index: 110;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.site-drawer[data-open="true"] { transform: translateX(0); visibility: visible; }
@media (max-width: 767px) {
    .site-drawer { width: 100vw; }
}

.site-drawer__close {
    position: absolute;
    top: 0.75rem; right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 0;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
}
.site-drawer__close svg { width: 1.75rem; height: 1.75rem; }
.site-drawer__close:focus-visible,
.site-drawer__items a:focus-visible,
.site-drawer__toggle:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

.site-drawer__items {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.site-drawer__row { position: relative; }
.site-drawer__items a {
    display: block;
    padding: 0.6rem 1rem;
    border: 2px solid transparent;
    font-size: 2rem;
    line-height: 1.3;
    color: #ffffff;
    text-decoration: none;
}
/* Aktive Seite: weisser Rahmen */
.site-drawer__items a[aria-current="page"] { border-color: #ffffff; }
.site-drawer__row > a { padding-right: 3.5rem; }
@media (hover: hover) and (pointer: fine) {
    .site-drawer__items a:hover { border-color: rgba(255, 255, 255, 0.6); }
    .site-drawer__items a[aria-current="page"]:hover { border-color: #ffffff; }
}

/* Aufklappen der Unterpunkte: eigener Chevron-Button neben dem Link
   (der Link selbst fuehrt zur Seite), Logik in init.js. */
.site-drawer__toggle {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 3.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
}
.site-drawer__toggle::before {
    content: '';
    width: 0.6rem;
    height: 0.6rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform .2s ease;
}
.site-drawer__toggle[aria-expanded="true"]::before { transform: translateY(25%) rotate(-135deg); }

.site-drawer__sub {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.6rem;
    padding-left: 1rem;
}
.site-drawer__sub[hidden] { display: none; }
.site-drawer__sub a { font-size: 1.5rem; }

@media (max-width: 767px) {
    .site-drawer__items { gap: 0.55rem; }
    .site-drawer__items a { font-size: 1.125rem; padding: 0.55rem 1rem; }
    .site-drawer__sub a { font-size: 1rem; }
}

body.nav-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 105;
    animation: fadeIn .2s ease;
}
body.nav-open { overflow: hidden; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .site-drawer { transition: none; }
    .site-drawer__toggle::before { transition: none; }
    body.nav-open::after { animation: none; }
}

/* ── Fuss (Leschuplast) ──
   Drei Baender in einem <footer>: (1) Schluss-Box auf Sand (Titel gross,
   Text, Buttons; per Seite ueberschreibbar, siehe footer.php), (2) blauer
   Fuss mit weissem Logo-Kasten, der 1rem nach oben ueber die Kante in die
   Schluss-Box ragt, und je einer Spalte pro Standort (Feld "Standorte"),
   (3) weisse Leiste mit Copyright links und rechtlichen Links rechts. */
.site-footer { display: flow-root; font-size: var(--font-size-base); }

.site-footer__closing {
    padding-block: clamp(3.5rem, 2rem + 5vw, 6rem);
}
.site-footer__closing-title { margin-bottom: 1.25rem; }
.site-footer__closing-sub { max-width: 60em; }
.site-footer__closing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.75rem;
}

.site-footer__main {
    background: var(--color-primary);
    color: #ffffff;
}
.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: start;
    padding-bottom: 5rem;
}
.site-footer__brand {
    position: relative;
    margin-top: -1rem;
    width: min(100%, 300px);
    padding: 1.5rem;
    background: #ffffff;
}
.site-footer__brand a { display: block; }
.site-footer__brand img { display: block; width: 100%; height: auto; }
.site-footer__place { padding-top: 5rem; }
.site-footer__place-title {
    color: #ffffff;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    margin-bottom: 1.25rem;
}
.site-footer__place address { font-style: normal; }
.site-footer__place p { margin-bottom: 1.25rem; }
.site-footer__place p:last-child { margin-bottom: 0; }
.site-footer__main a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
.site-footer__main a:focus-visible,
.site-footer__bottom a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.site-footer__bottom {
    background: #ffffff;
    color: var(--color-text);
    font-size: 0.8125rem;
}
.site-footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-block: 0.6rem;
}
.site-footer__bottom p { margin: 0; }
.site-footer__bottom a { color: var(--color-text); text-decoration: underline; text-underline-offset: 0.15em; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }

@media (max-width: 1024px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
    .site-footer__brand { grid-column: 1 / -1; }
    .site-footer__place { padding-top: 2rem; }
}
@media (max-width: 767px) {
    .site-footer__grid { grid-template-columns: 1fr; gap: 3rem; }
    .site-footer__place { padding-top: 0; }
    .site-footer__brand + .site-footer__place { padding-top: 2rem; }
    .site-footer__bottom-inner { flex-direction: column-reverse; justify-content: center; text-align: center; }
    .site-footer__legal { justify-content: center; }
}


/* ── 8. Block variants ── */
/* Hero start page ("mitte"): flat black veil, navy button (the base makes
   the button of dark areas light). Three classes to beat the base rule. */
.hero-slides.hero-slides--mitte .hero-slides__overlay { background: rgba(0, 0, 0, 0.6); }
.hero-slides.hero-slides--mitte .btn-primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-fg);
}
@media (hover: hover) and (pointer: fine) {
    .hero-slides.hero-slides--mitte .btn-primary:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-fg); }
}
/* Specialisations: navy veil over the photo tile */
.spez .spez__kachel--bild::after { background: rgba(13, 31, 79, 0.65); }

/* ── 9. Switch off what the base theme styles for the generic top bar,
   desktop navigation and dark footer, so only the Leschuplast rules above
   stay (same specificity as the base rules, this file comes later). ── */

/* Header: no frosted glass, no divider, no scroll state */
.site-header {
    padding: 0;
    border-bottom: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
}
.site-header .logo img { transition: none; }

/* Menu panel */
.site-drawer {
    border-left: 0;
    box-shadow: none;
}
.site-drawer__close {
    border: 0;
    border-radius: 0;
    transform: none;
    opacity: 1;
    transition: none;
}
@media (hover: hover) and (pointer: fine) {
    .site-drawer__close:hover { background: transparent; border-color: transparent; transform: none; }
}
.site-drawer__close:active { transform: none; }
.site-drawer__items { padding: 0; }
.site-drawer__items a { width: auto; }
.site-drawer__items a[aria-current="page"]:not(.btn) {
    border-left: 2px solid #ffffff;
    padding-left: 1rem;
    font-weight: inherit;
}
body.nav-open::after {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Footer: the three bands bring their own colours */
.site-footer {
    background: transparent;
    color: inherit;
    margin-top: 0;
}
.site-footer__closing {
    display: block;
    margin-bottom: 0;
    padding-inline: 0;
}
.site-footer__closing-title {
    font-size: var(--font-size-h2);
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
}
.site-footer__main .site-footer__grid { margin-top: 0; }
.site-footer__bottom {
    display: block;
    margin-top: 0;
    padding: 0;
    border-top: 0;
    font-size: 0.8125rem;
}
.site-footer a:not(.btn) {
    text-decoration-color: currentColor;
    text-decoration-thickness: auto;
    text-underline-offset: 0.15em;
    transition: none;
}
.site-footer a:not(.btn):focus-visible { outline-color: currentColor; }
@media (hover: hover) and (pointer: fine) {
    .site-footer a:not(.btn):hover {
        text-decoration-color: currentColor;
        text-decoration-thickness: auto;
    }
}
.site-footer__bottom a:not(.btn) {
    color: var(--color-text);
    text-decoration-color: currentColor;
}
.site-footer__main a:not(.btn) { color: #ffffff; }
.site-footer address { line-height: inherit; }