/*
Theme Name: ZÖLLNER Shop
Theme URI: https://die-zoellner.de/
Description: WooCommerce-Shop als nahtlose visuelle Fortsetzung von die-zoellner.de. Astra-Child-Theme im dunklen Marken-Look: dunkelblauer Grund (#090C17), Cinzel-Versalien, Montserrat-Fließtext, oranger Akzent (#FD9800). Aufbau bewusst schlank – Styling über CSS-Variablen und wenige Astra-/WooCommerce-Hooks, ohne Page-Builder-Abhängigkeit.
Author: webschoen
Author URI: https://webschoen.de/
Template: astra
Version: 1.1.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zoellner-shop
Tags: e-commerce, custom-colors, custom-menu, translation-ready, right-sidebar, full-width-template
*/

/* ==========================================================================
   ZÖLLNER Shop – Basis-Stylesheet
   Reihenfolge: dieses Stylesheet hängt als Dependency an "astra-theme-css"
   und lädt daher NACH Astras Basis- und Inline-CSS. Bei gleicher Spezifität
   gewinnt es per Quellreihenfolge – deshalb kaum !important nötig.
   Farbliche Neu-Einfärbung von Astra-Komponenten passiert zusätzlich über die
   --ast-global-color-* Overrides in functions.php.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design-Tokens (Single Source of Truth) – aus CLAUDE.md / die-zoellner.de
   -------------------------------------------------------------------------- */
:root {
    /* Marke / Akzent – exakt aus dem Elementor-Kit von die-zoellner.de */
    --zoellner-accent: #FD9800;            /* astglobalcolor0 */
    --zoellner-accent-hover: #E98C00;      /* astglobalcolor1 (Brand-Sekundär-Orange) */
    --zoellner-accent-contrast: #090C17;   /* Text auf orangem Grund */
    --zoellner-gold: #eabf4b;              /* dekoratives Gold der Hauptseite */

    /* Flächen (dunkelblau) – aus dem Elementor-Kit */
    --zoellner-bg: #090C17;                /* astglobalcolor5 */
    --zoellner-surface: #11151f;           /* Karten (zwischen bg und surface-2) */
    --zoellner-surface-2: #161923;         /* astglobalcolor4 – erhöht / Hover / Tabellenkopf */
    --zoellner-border: rgba(255, 255, 255, .08);
    --zoellner-border-strong: rgba(255, 255, 255, .16);

    /* Text */
    --zoellner-text: #EDEFF5;
    --zoellner-text-muted: #A6ADBF;
    --zoellner-heading: #F5F6FA;

    /* Typografie */
    --zoellner-font-head: "Cinzel", "Times New Roman", serif;
    --zoellner-font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --zoellner-headline-spacing: .04em;
    --zoellner-label-spacing: .18em;

    /* Lagerstatus */
    --zoellner-instock: #4ea96a;
    --zoellner-lowstock: var(--zoellner-accent);
    --zoellner-outofstock: #e5534b;

    /* Radien / Übergänge */
    --zoellner-radius: 8px;
    --zoellner-radius-lg: 14px;
    --zoellner-transition: .2s ease;
    --zoellner-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* --------------------------------------------------------------------------
   2. Grundlayout – dunkler Hintergrund, heller Text
   -------------------------------------------------------------------------- */
body {
    background-color: var(--zoellner-bg);
    color: var(--zoellner-text);
    font-family: var(--zoellner-font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Astra-Container/Content-Flächen transparent halten, damit der dunkle
   Body-Grund durchscheint. Astra rendert in der "Boxed"-Variante sonst
   weiße Karten (.ast-separate-container ...) – das ist die häufigste
   "noch helle" Fläche. Hier flächendeckend neutralisiert. */
body.ast-separate-container,
body.ast-plain-container,
.site,
.ast-container,
#content,
#primary,
.entry-content,
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.ast-separate-container .comment-respond,
.ast-separate-container .comments-count-wrapper,
.ast-separate-container .ast-comment-list li,
.ast-separate-container #content .ast-container,
.ast-page-builder-template .site-content .content-area,
.error-404 .page-content-wrap {
    background-color: transparent;
}

.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.ast-separate-container .comment-respond {
    box-shadow: none;
}

p,
li,
dd,
dt,
address,
figcaption {
    color: var(--zoellner-text);
}

hr {
    border-color: var(--zoellner-border);
}

/* --------------------------------------------------------------------------
   3. Typografie – Cinzel-Versalien für Headlines, Montserrat für Fließtext
   -------------------------------------------------------------------------- */
h1, h2, h3, h4,
.entry-title,
.ast-single-post .entry-title,
.page-title,
.widget-title {
    font-family: var(--zoellner-font-head);
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: var(--zoellner-headline-spacing);
    color: var(--zoellner-heading);
}

/* H5 laut Token: Montserrat 18px/600 */
h5 {
    font-family: var(--zoellner-font-body);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    color: var(--zoellner-heading);
}

h6 {
    font-family: var(--zoellner-font-body);
    font-weight: 600;
    line-height: 1.4;
    text-transform: none;
    color: var(--zoellner-heading);
}

/* Wiederverwendbares Sektions-Label (Orange, Versalien, Sperrung) */
.zoellner-section-label {
    display: inline-block;
    font-family: var(--zoellner-font-body);
    font-weight: 600;
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: var(--zoellner-label-spacing);
    color: var(--zoellner-accent);
}

/* --------------------------------------------------------------------------
   4. Links
   -------------------------------------------------------------------------- */
a {
    color: var(--zoellner-accent);
    text-decoration: none;
    transition: color var(--zoellner-transition);
}

a:hover,
a:focus {
    color: var(--zoellner-accent-hover);
}

/* Überschriften-Links erben die Überschriftenfarbe, färben erst bei Hover */
h1 a, h2 a, h3 a, h4 a,
.entry-title a {
    color: inherit;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover,
.entry-title a:hover {
    color: var(--zoellner-accent);
}

/* --------------------------------------------------------------------------
   5. Buttons (Astra-/WordPress-Standardbuttons)
   -------------------------------------------------------------------------- */
button,
.button,
.ast-button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.wp-block-button__link {
    font-family: var(--zoellner-font-body);
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--zoellner-accent-contrast);
    background-color: var(--zoellner-accent);
    border: 1px solid var(--zoellner-accent);
    border-radius: var(--zoellner-radius);
    transition: background-color var(--zoellner-transition),
                border-color var(--zoellner-transition),
                transform var(--zoellner-transition);
}

button:hover,
.button:hover,
.ast-button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.wp-block-button__link:hover,
button:focus,
.button:focus,
input[type="submit"]:focus {
    color: var(--zoellner-accent-contrast);
    background-color: var(--zoellner-accent-hover);
    border-color: var(--zoellner-accent-hover);
}

/* --------------------------------------------------------------------------
   6. Formularfelder – dunkel, oranger Fokus
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
    color: var(--zoellner-text);
    background-color: var(--zoellner-surface);
    border: 1px solid var(--zoellner-border);
    border-radius: var(--zoellner-radius);
    transition: border-color var(--zoellner-transition),
                box-shadow var(--zoellner-transition);
}

input::placeholder,
textarea::placeholder {
    color: var(--zoellner-text-muted);
    opacity: 1;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    border-color: var(--zoellner-accent);
    box-shadow: 0 0 0 2px rgba(253, 152, 0, .25);
    outline: none;
}

/* --------------------------------------------------------------------------
   7. Header / Footer / Navigation – dunkler Marken-Rahmen
   -------------------------------------------------------------------------- */
.site-header,
.ast-primary-header-bar,
.main-header-bar,
.ast-above-header,
.ast-below-header {
    background-color: var(--zoellner-bg);
    border-bottom: 1px solid var(--zoellner-border);
}

.main-header-menu,
.ast-header-break-point .main-header-bar-navigation .main-header-menu,
.ast-builder-menu .main-header-menu {
    background-color: transparent;
}

/* Hauptnavigation */
.main-header-menu a,
.ast-header-navigation-wrap .menu-item a,
.site-header .ast-header-account-wrap a {
    color: var(--zoellner-text);
}

.main-header-menu a:hover,
.main-header-menu .current-menu-item > a,
.ast-header-navigation-wrap .menu-item a:hover {
    color: var(--zoellner-accent);
}

/* Mobiles Menü / Untermenüs auf dunkler Fläche */
.main-header-menu .sub-menu,
.ast-header-break-point .main-navigation ul {
    background-color: var(--zoellner-surface);
    border-color: var(--zoellner-border);
}

/* Footer */
.site-footer,
.footer-adv,
.ast-small-footer,
.footer-adv-overlay {
    background-color: var(--zoellner-bg);
    color: var(--zoellner-text);
    border-top: 1px solid var(--zoellner-border);
}

.site-footer a,
.ast-small-footer a {
    color: var(--zoellner-text-muted);
}

.site-footer a:hover,
.ast-small-footer a:hover {
    color: var(--zoellner-accent);
}

/* Widgets */
.widget-title,
.wp-block-heading {
    color: var(--zoellner-heading);
}

/* --------------------------------------------------------------------------
   8. Tabellen (generisch)
   -------------------------------------------------------------------------- */
table {
    border-color: var(--zoellner-border);
}

table th {
    background-color: var(--zoellner-surface-2);
    color: var(--zoellner-heading);
}

table td,
table th {
    border-color: var(--zoellner-border);
}

/* --------------------------------------------------------------------------
   8b. Startseite (front-page.php)
   -------------------------------------------------------------------------- */
/* Full-Bleed-Hero spannt über 100vw; die Scrollbar-Breite würde sonst einen
   minimalen horizontalen Scroll erzeugen. Nur auf der Startseite abfangen. */
body.home {
    overflow-x: hidden;
}

/* Wiederverwendbarer Sektionskopf */
.zoellner-section {
    padding: clamp(2.5rem, 6vw, 4rem) 0;
}

.zoellner-section__foot {
    text-align: center;
    margin-top: 1.75rem;
}

.zoellner-section__head {
    text-align: center;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.zoellner-section__label {
    display: block;
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: var(--zoellner-label-spacing);
    color: var(--zoellner-accent);
    margin-bottom: .6rem;
}

.zoellner-section__title {
    font-family: var(--zoellner-font-head);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.15;
    color: var(--zoellner-heading);
    margin: 0;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
}

.zoellner-section__link {
    display: inline-block;
    margin-top: 1.75rem;
    font-weight: 600;
}

/* Hero – randlos über die volle Viewport-Breite (Breakout aus .ast-container) */
.zoellner-hero {
    position: relative;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: clamp(3.5rem, 11vw, 7.5rem) 1.5rem;
    text-align: center;
    background:
        radial-gradient(ellipse at 50% -10%, rgba(253, 152, 0, .12), transparent 55%),
        var(--zoellner-bg);
    border-bottom: 1px solid var(--zoellner-border);
    overflow: hidden;
}

.zoellner-hero__inner {
    max-width: 820px;
    margin: 0 auto;
}

.zoellner-hero__label {
    display: block;
    font-weight: 600;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: var(--zoellner-label-spacing);
    color: var(--zoellner-accent);
    margin-bottom: 1rem;
}

.zoellner-hero__title {
    font-family: var(--zoellner-font-head);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .14em;
    line-height: 1.02;
    color: var(--zoellner-heading);
    margin: 0;
    font-size: clamp(2.6rem, 9vw, 5.75rem);
}

/* Goldener Zierstrich – Nod an die Hauptseite */
.zoellner-hero__divider {
    width: 78px;
    height: 2px;
    margin: 1.5rem auto;
    background: linear-gradient(90deg, transparent, var(--zoellner-gold), transparent);
}

.zoellner-hero__tagline {
    font-family: var(--zoellner-font-head);
    font-weight: 400;
    font-size: clamp(1rem, 2.4vw, 1.4rem);
    letter-spacing: .08em;
    color: var(--zoellner-text);
    margin: 0 0 .5rem;
}

.zoellner-hero__text {
    color: var(--zoellner-text-muted);
    max-width: 42ch;
    margin: 0 auto 2rem;
}

.zoellner-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .85em 1.9em;
    font-family: var(--zoellner-font-body);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--zoellner-accent-contrast);
    background-color: var(--zoellner-accent);
    border: 1px solid var(--zoellner-accent);
    border-radius: var(--zoellner-radius);
    transition: background-color var(--zoellner-transition),
                transform var(--zoellner-transition);
}

.zoellner-hero__cta:hover {
    background-color: var(--zoellner-accent-hover);
    color: var(--zoellner-accent-contrast);
    transform: translateY(-2px);
}

/* Kategorie-Kacheln (NEU, MUSIK, BÜCHER …) */
.zoellner-cats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.zoellner-cat {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92px;
    padding: 1.1rem 1rem;
    text-align: center;
    background-color: var(--zoellner-surface);
    border: 1px solid var(--zoellner-border);
    border-radius: var(--zoellner-radius-lg);
    font-family: var(--zoellner-font-head);
    font-size: 1.02rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--zoellner-heading);
    transition: transform var(--zoellner-transition),
                border-color var(--zoellner-transition),
                color var(--zoellner-transition),
                background-color var(--zoellner-transition);
}

.zoellner-cat:hover {
    transform: translateY(-3px);
    border-color: var(--zoellner-accent);
    background-color: var(--zoellner-surface-2);
    color: var(--zoellner-accent);
}

/* SALE-Streifen */
.zoellner-sale-strip {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: clamp(2rem, 5vw, 3rem) 1.5rem;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(253, 152, 0, .08), transparent),
        var(--zoellner-surface);
    border-top: 1px solid var(--zoellner-border);
    border-bottom: 1px solid var(--zoellner-border);
}

@media (prefers-reduced-motion: reduce) {
    .zoellner-cat:hover,
    .zoellner-hero__cta:hover {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   9. Fokus-Styles (Barrierefreiheit) – deutlich sichtbarer oranger Ring
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.button:focus-visible {
    outline: 2px solid var(--zoellner-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Sichtbarer Skip-Link */
.skip-link:focus {
    background-color: var(--zoellner-accent);
    color: var(--zoellner-accent-contrast);
}

/* --------------------------------------------------------------------------
   10. Auswahl / Scrollbar-Feinschliff
   -------------------------------------------------------------------------- */
::selection {
    background-color: var(--zoellner-accent);
    color: var(--zoellner-accent-contrast);
}

/* --------------------------------------------------------------------------
   11. Responsive Feinschliff
   -------------------------------------------------------------------------- */
@media (max-width: 921px) {
    body {
        font-size: 15.5px;
    }
}

@media (max-width: 544px) {
    h1, h2, h3, h4,
    .entry-title,
    .page-title {
        /* Sperrung auf kleinen Displays reduzieren, damit Versalien nicht umbrechen */
        letter-spacing: .02em;
    }
}

/* --------------------------------------------------------------------------
   12. Reduced Motion respektieren
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}