/*
 * Idiome, die auf JEDER Seite gelten.
 *
 * Sie standen zuerst als .sz-start .mono in startseite.css — damit galten
 * sie nur auf der Startseite. In der Kasse stand die Kapitelmarke deshalb
 * als nackter Fließtext ohne Haarlinie. Klassen, die überall benutzt
 * werden, muessen auch ueberall definiert sein.
 */

.mono    { font-family: var(--sz-mono); }
.display { font-family: var(--sz-display); font-weight: 400; }

.hairline {
    height: 1px;
    background: var(--sz-border);
    border: 0;
}

.sz-kapitelmarke {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    margin: 0 0 2.5rem;
}

.sz-kapitelmarke__nr {
    font-family: var(--sz-mono);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: var(--sz-bordeaux-text);
}

.sz-kapitelmarke .hairline { flex: 1; }

.sz-kapitelmarke__kicker {
    font-family: var(--sz-mono);
    font-size: 0.7rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--sz-ink-soft);
    white-space: nowrap;
}

/*
 * Kopf- und Fußzeile.
 *
 * Wird auf JEDER Seite geladen: sie sind der Rahmen, in dem alles andere
 * steht.
 *
 * Der Kopf liegt FEST am oberen Rand — nicht sticky. Grund: body trägt
 * overflow-x: hidden, und darunter ist position: sticky unzuverlässig, weil
 * der Kasten dann an einem anderen Bezug klebt als am Fenster. fixed ist
 * davon unabhängig.
 */

:root {
    --sz-kopf-hoch:  6.25rem;   /* Ausgangshöhe */
    --sz-kopf-klein: 4.25rem;   /* nach dem Scrollen */
    --sz-kopf-oben:  0px;       /* Platz für die WordPress-Adminleiste */
}

/* Sprungmarke — sichtbar erst beim Tabben, aber dann richtig. */
.sz-sprung {
    position: fixed;
    left: -9999px;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--sz-bordeaux);
    color: var(--sz-bordeaux-fg);
}

.sz-sprung:focus { left: 1rem; top: 1rem; }

/* ===================================================================
   Kopfzeile
   =================================================================== */

.sz-kopf {
    position: fixed;
    top: var(--sz-kopf-oben);
    left: 0;
    right: 0;
    z-index: 50;
    height: var(--sz-kopf-hoch);
    background: var(--sz-bg);
    border-bottom: 1px solid var(--sz-border);
    transition: height 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sz-kopf.ist-klein { height: var(--sz-kopf-klein); }

/*
 * Der Platzhalter. Immer die volle Höhe: der Kopf schrumpft erst beim
 * Scrollen, und ganz oben braucht der Inhalt den vollen Abstand. Damit
 * springt beim Schrumpfen nichts.
 */
#page { padding-top: var(--sz-kopf-hoch); }

/* Die Adminleiste liegt darüber. Ab 782px wird sie mitgescrollt statt
   fixiert — dort gehört der Kopf wieder ganz nach oben. */
.admin-bar { --sz-kopf-oben: 32px; }

@media screen and (max-width: 782px) {
    .admin-bar { --sz-kopf-oben: 0px; }
}

.sz-kopf__innen {
    margin-inline: auto;
    max-width: var(--sz-schale);
    height: 100%;
    padding-inline: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .sz-kopf__innen { padding-inline: 3rem; gap: 2.5rem; }
}

/* --- Logo ----------------------------------------------------------
   Feste Höhe, Breite folgt — sonst springt die Leiste beim Laden, weil
   das Bild erst spät seine Maße meldet. Schrumpft mit dem Kopf mit. */

.sz-logo,
.custom-logo-link { display: inline-flex; align-items: center; flex-shrink: 0; }

.sz-logo img,
.custom-logo-link img {
    display: block;
    height: 3.25rem;
    width: auto;
    transition: height 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sz-kopf.ist-klein .sz-logo img,
.sz-kopf.ist-klein .custom-logo-link img { height: 2.15rem; }

.sz-logo--text {
    font-family: var(--sz-display);
    font-size: 1.6rem;
    color: var(--sz-ink);
    text-decoration: none;
}

/* --- Navigation --------------------------------------------------- */

.sz-nav { flex: 1; }

.sz-nav__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.75rem;
}

.sz-nav__liste a,
.sz-nav__liste .menu-item > a {
    font-family: var(--sz-mono);
    font-size: 0.82rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--sz-ink);
    white-space: nowrap;
    transition: color 200ms ease;
}

.sz-nav__liste a:hover,
.sz-nav__liste .current-menu-item > a { color: var(--sz-bordeaux-text); }

.sz-nav__liste .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    position: absolute;
    z-index: 20;
    min-width: 12rem;
    background: var(--sz-surface);
    border: 1px solid var(--sz-border);
    display: none;
}

.sz-nav__liste li { position: relative; }
.sz-nav__liste li:hover > .sub-menu,
.sz-nav__liste li:focus-within > .sub-menu { display: block; }
.sz-nav__liste .sub-menu a { display: block; padding: 0.5rem 1rem; }

/* --- Werkzeuge rechts --------------------------------------------- */

.sz-werkzeuge {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
    flex-shrink: 0;
}

/*
 * Astra setzt inline „button { padding: 15px 30px }“. Wer hier nur Breite
 * und Höhe setzt, bekommt einen 62px breiten Knopf, in dem das Symbol auf
 * 0px zusammengequetscht wird — ein leeres Oval. Padding und min-width
 * müssen ausdrücklich zurück.
 */
.sz-werkzeug {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 0;
    min-width: 0;
    line-height: 1;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--sz-border);
    border-radius: 50%;
    background: transparent;
    color: var(--sz-ink);
    cursor: pointer;
    text-decoration: none;
    transition: border-color 200ms ease, color 200ms ease;
}

.sz-werkzeug:hover,
.sz-werkzeug:focus,
.sz-werkzeug:focus-visible {
    background: transparent;
    box-shadow: none;
    color: var(--sz-bordeaux-text);
    border-color: var(--sz-bordeaux);
}

.sz-werkzeug svg { flex-shrink: 0; }

/* --- Sprachen ------------------------------------------------------
   DE · IT · EN als kleine Wörter, nicht als Fahnen: Fahnen stehen für
   Länder, nicht für Sprachen — und Südtirol spricht beides.

   Am Schreibtisch in der Werkzeugleiste oben rechts. Auf dem Telefon
   ist dort kein Platz; da steht der Schalter im Menüblatt, unter den
   Punkten. Das Theme gibt beide aus, der Stil zeigt je einen.
   Ohne Polylang gibt es keinen von beiden. */

.sz-sprachen {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    margin-right: 0.4rem;
}

.sz-sprachen__wahl {
    display: inline-block;
    padding: 0.4rem 0.45rem;
    border-radius: 999px;
    font-family: var(--sz-mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--sz-ink-soft);
    transition: color 200ms ease, background-color 200ms ease;
}

.sz-sprachen__wahl:hover,
.sz-sprachen__wahl:focus-visible { color: var(--sz-bordeaux-text); }

.sz-sprachen__wahl.ist-aktiv {
    color: var(--sz-ink);
    background: var(--sz-muted);
}

.sz-sprachen--blatt { display: none; }

@media (max-width: 979px) {
    .sz-sprachen--kopf { display: none; }

    .sz-sprachen--blatt {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        margin: 1rem 0 0;
        padding-top: 1rem;
        border-top: 1px solid var(--sz-border);
    }

    .sz-sprachen--blatt .sz-sprachen__wahl {
        padding: 0.65rem 1rem;
        font-size: 0.75rem;
        border: 1px solid var(--sz-border);
        background: transparent;
    }

    .sz-sprachen--blatt .sz-sprachen__wahl.ist-aktiv {
        border-color: var(--sz-bordeaux);
        color: var(--sz-bordeaux-text);
    }
}

.sz-warenkorb { position: relative; }

.sz-warenkorb__zahl {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding-inline: 0.25rem;
    border-radius: 999px;
    background: var(--sz-bordeaux);
    color: var(--sz-bordeaux-fg);
    font-family: var(--sz-mono);
    font-size: 0.62rem;
    line-height: 1.15rem;
    text-align: center;
}

/* --- Hell/Dunkel als Schiebeschalter --------------------------------
 *
 * Das Markup bleibt, wie es war (Knopf mit zwei Zeichen) — nur die
 * Gestaltung macht daraus einen Schalter. So bleibt der Kurzcode
 * [sz_modus] unverändert nutzbar.
 *
 * Das Eltern-Stylesheet blendet je eines der beiden Zeichen aus
 * (Spezifität 0-2-0). Hier sollen beide stehen, deshalb 0-3-0.
 */

.sz-kopf .sz-modus {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    flex-shrink: 0;
    width: 3.6rem;
    height: 2rem;
    padding: 0 0.45rem;
    min-width: 0;
    border: 1px solid var(--sz-border-strong);
    border-radius: 999px;
    background: var(--sz-muted);
    cursor: pointer;
    line-height: 1;
    transition: background 260ms ease, border-color 200ms ease;
}

.sz-kopf .sz-modus:hover,
.sz-kopf .sz-modus:focus,
.sz-kopf .sz-modus:focus-visible {
    background: var(--sz-muted);
    box-shadow: none;
    border-color: var(--sz-bordeaux);
}

.sz-kopf .sz-modus .sz-modus-hell,
.sz-kopf .sz-modus .sz-modus-dunkel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.9rem;
    height: 0.9rem;
    line-height: 1;
    color: var(--sz-ink-soft);
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.sz-kopf .sz-modus svg { display: block; width: 0.875rem; height: 0.875rem; }

/* Das jeweils gewaehlte Zeichen tritt hervor, das andere zurueck — sonst
   sieht der Schalter aus, als waere keine Seite aktiv. */
html:not([data-sz="dark"]) .sz-kopf .sz-modus .sz-modus-dunkel,
html[data-sz="dark"] .sz-kopf .sz-modus .sz-modus-hell { color: var(--sz-ink); }

/* Der Knopf, der wandert. */
.sz-kopf .sz-modus::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.2rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--sz-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transform: translateY(-50%);
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-sz="dark"] .sz-kopf .sz-modus::after {
    transform: translateY(-50%) translateX(1.55rem);
}

html[data-sz="dark"] .sz-kopf .sz-modus { background: var(--sz-muted); }

/* --- Suchfeld ------------------------------------------------------
   Faellt unter die Leiste, statt sie hoeher zu machen — der Kopf hat
   eine feste Hoehe, sonst spraenge der Platzhalter darunter. */

.sz-suchfeld {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border-top: 1px solid var(--sz-border);
    border-bottom: 1px solid var(--sz-border);
    background: var(--sz-muted);
    padding: 1rem 1.5rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    /* Mittig statt linksbuendig — das Feld steht sonst verloren unter
       dem Logo, waehrend rechts daneben nichts passiert. */
    justify-content: center;
}

.sz-suchfeld[hidden] { display: none; }

@media (min-width: 768px) { .sz-suchfeld { padding-inline: 3rem; } }

.sz-suchfeld input[type="search"] {
    flex: 1;
    max-width: 34rem;
    padding: 0.8rem 1.1rem;
    border: 1px solid var(--sz-border-strong);
    border-radius: 999px;
    background: var(--sz-surface);
    color: var(--sz-ink);
    font-size: 0.95rem;
}

.sz-suchfeld button {
    padding: 0.8rem 1.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--sz-bordeaux);
    color: var(--sz-bordeaux-fg);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}

/* --- Menüknopf für schmale Fenster --------------------------------- */

.sz-kopf__auf {
    display: none;
    box-sizing: border-box;
    padding: 0;
    min-width: 0;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--sz-border);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.sz-kopf__strich {
    position: relative;
    display: block;
    flex: none;
    width: 1.05rem;
    height: 1px;
    background: var(--sz-ink);
}

.sz-kopf__strich::before,
.sz-kopf__strich::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--sz-ink);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), top 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sz-kopf__strich::before { top: -5px; }
.sz-kopf__strich::after  { top: 5px; }

/* Offen wird aus den drei Strichen ein Kreuz. */
.sz-kopf__auf[aria-expanded="true"] .sz-kopf__strich { background: transparent; }
.sz-kopf__auf[aria-expanded="true"] .sz-kopf__strich::before { top: 0; transform: rotate(45deg); }
.sz-kopf__auf[aria-expanded="true"] .sz-kopf__strich::after  { top: 0; transform: rotate(-45deg); }

/* Beide Woerter stehen im Text; gezeigt wird jeweils das passende.
   display: none nimmt das andere auch aus dem Vorlesebaum. */
.sz-kopf__wort {
    font-family: var(--sz-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sz-ink);
}

.sz-kopf__wort--zu { display: none; }
.sz-kopf__auf[aria-expanded="true"] .sz-kopf__wort--auf { display: none; }
.sz-kopf__auf[aria-expanded="true"] .sz-kopf__wort--zu  { display: inline; }

@media (max-width: 979px) {
    :root { --sz-kopf-hoch: 4.75rem; --sz-kopf-klein: 4rem; }

    /* ---------------------------------------------------------------
       Der Menueknopf steht unten links, nicht oben rechts.

       Auf einem Telefon ist die obere rechte Ecke die unbequemste
       Stelle des Bildschirms: man muss das Geraet umgreifen, um sie zu
       treffen. Unten links liegt der Daumen ohnehin.

       Er sitzt fest im Fenster, nicht in der Leiste. Der Kopf ist
       position: fixed und ohne transform — ein fixes Kind darin bezieht
       sich also richtig auf das Fenster.
       --------------------------------------------------------------- */

    /* ---------------------------------------------------------------
       Die Suche unten links, das Menue in der Mitte.

       Vorher standen beide als Gruppe mittig nebeneinander. Der
       Menueknopf brauchte dafuer eine feste Breite von 10rem, sonst
       spraenge die ganze Gruppe, sobald aus "Menue" ein "Schliessen"
       wird. Breit war er damit immer — auch fuer das kurze Wort, das
       neunzig Prozent der Zeit dransteht.

       Getrennt braucht er die feste Breite nicht mehr. Er sitzt auf der
       Mitte und waechst beim Oeffnen nach beiden Seiten gleich weit;
       verschieben kann er dabei nichts, weil nichts mehr daneben steht.
       --------------------------------------------------------------- */

    .sz-werkzeuge .sz-suche__auf {
        position: fixed;
        left: calc(1rem + env(safe-area-inset-left, 0px));
        bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
        z-index: 60;
        width: 3.1rem;
        height: 3.1rem;
        border: 1px solid var(--sz-border-strong);
        background: var(--sz-surface);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    }

    .sz-werkzeuge .sz-suche__auf svg { width: 20px; height: 20px; }

    .sz-kopf__auf {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.55rem;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
        z-index: 60;
        /* Nur so breit wie Zeichen und Wort: keine feste Breite, kein
           Mindestmass. Die Hoehe von 3.1rem haelt die Trefferflaeche. */
        width: auto;
        height: 3.1rem;
        padding: 0 1.15rem;
        border: 1px solid var(--sz-border-strong);
        border-radius: 999px;
        background: var(--sz-surface);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    }

    .sz-kopf__innen { gap: 0.75rem; }

    /* ---------------------------------------------------------------
       Das Menue kommt von unten, nicht von oben.

       Wenn der Knopf unten steht, muss auch das Menue dort aufgehen —
       sonst tippt man unten und muss oben lesen. Es faehrt als Blatt
       herein und laesst unten Platz fuer den Knopf, der es geoeffnet hat.
       --------------------------------------------------------------- */

    .sz-nav {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 55;
        display: block;
        max-height: min(72vh, 34rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--sz-bg);
        border-top: 1px solid var(--sz-border-strong);
        border-radius: 1.25rem 1.25rem 0 0;
        box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.2);
        padding: 1.5rem 1.5rem calc(5.5rem + env(safe-area-inset-bottom, 0px));
        transform: translateY(102%);
        visibility: hidden;
        transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
                    visibility 0s linear 320ms;
    }

    .sz-nav.ist-offen {
        transform: none;
        visibility: visible;
        transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
    }

    /* Der Griff oben am Blatt — dasselbe Zeichen, das jedes Telefon
       fuer "das laesst sich herunterziehen" verwendet. */
    .sz-nav::before {
        content: "";
        display: block;
        width: 2.5rem;
        height: 4px;
        margin: -0.5rem auto 1.25rem;
        border-radius: 999px;
        background: var(--sz-border-strong);
    }

    .sz-nav__liste { flex-direction: column; align-items: stretch; gap: 0; }

    /* Grosszuegige Zeilen: getippt wird mit dem Daumen, nicht gezielt. */
    .sz-nav__liste > li > a {
        display: block;
        padding: 0.95rem 0.25rem;
        font-size: 0.95rem;
        border-bottom: 1px solid var(--sz-border);
    }

    .sz-nav__liste .sub-menu { position: static; display: block; border: 0; padding-left: 1rem; background: none; }

    /* Die Knoepfe schweben ueber der Seite. Am Seitenende duerfen sie
       nichts verdecken — der Fuss bekommt deshalb Platz unter seiner
       letzten Zeile. Sonst liegen sie auf dem Impressum. */
    .sz-fuss { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }

    /* ---------------------------------------------------------------
       Das Suchfeld kommt ebenfalls von unten.

       Es fiel bisher unter die Kopfleiste — also ans obere Ende, waehrend
       man unten getippt hat. Wer mit dem Daumen sucht, soll dort lesen,
       wo er getippt hat, und die Tastatur schiebt das Feld ohnehin nach
       oben ins Bild.
       --------------------------------------------------------------- */

    .sz-suchfeld {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 59;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 1.5rem 1.25rem calc(5.6rem + env(safe-area-inset-bottom, 0px));
        background: var(--sz-bg);
        border-top: 1px solid var(--sz-border-strong);
        border-bottom: 0;
        border-radius: 1.25rem 1.25rem 0 0;
        box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.2);
        animation: sz-blatt-hoch 300ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .sz-suchfeld::before {
        content: "";
        display: block;
        width: 2.5rem;
        height: 4px;
        margin: -0.6rem auto 0.4rem;
        border-radius: 999px;
        background: var(--sz-border-strong);
    }

    .sz-suchfeld input[type="search"] { max-width: none; }

    /* Dieselbe Bewegung wie bei der Sortierung; die Regel steht dort,
       shop.css laedt aber nur im Laden. Deshalb hier noch einmal. */
    @keyframes sz-blatt-hoch {
        from { transform: translateY(100%); }
        to   { transform: none; }
    }

    @media (prefers-reduced-motion: reduce) {
        .sz-nav { transition: visibility 0s; }
    }
}

/* ===================================================================
   Fußzeile
   =================================================================== */

.sz-fuss {
    background: var(--sz-muted);
    border-top: 1px solid var(--sz-border);
    margin-top: 4rem;
}

.sz-fuss__innen {
    margin-inline: auto;
    max-width: var(--sz-schale);
    padding: 3.5rem 1.5rem 2.5rem;
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 768px) {
    .sz-fuss__innen { padding-inline: 3rem; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; }
}

.sz-fuss__marke .sz-logo img,
.sz-fuss__marke .custom-logo-link img { height: 2.75rem; }

.sz-fuss__anschrift {
    margin: 1.25rem 0 0;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--sz-ink-soft);
}

.sz-fuss__titel {
    margin: 0 0 1.25rem;
    font-family: var(--sz-mono);
    font-size: 0.66rem;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--sz-bordeaux-text);
}

.sz-fuss__liste { list-style: none; margin: 0; padding: 0; }
.sz-fuss__liste li { margin-bottom: 0.7rem; }

.sz-fuss__liste a {
    font-size: 0.88rem;
    color: var(--sz-ink);
    text-decoration: none;
    transition: color 200ms ease;
}

.sz-fuss__liste a:hover { color: var(--sz-bordeaux-text); }
.sz-fuss__hinweis { font-size: 0.88rem; color: var(--sz-ink-soft); }

.sz-fuss__zeile {
    border-top: 1px solid var(--sz-border);
    padding: 1.25rem 1.5rem;
    text-align: center;
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    color: var(--sz-ink-soft);
}

/* ===================================================================
   Reduzierte Bewegung: die Größen ändern sich weiterhin, nur ohne
   Übergang. Ein Kopf, der beim Scrollen springt, ist immer noch besser
   als einer, der die Einstellung ignoriert.
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
    .sz-kopf,
    .sz-logo img,
    .custom-logo-link img,
    .sz-kopf .sz-modus::after,
    .sz-nav__liste a,
    .sz-werkzeug,
    .sz-fuss__liste a { transition: none; }
}

/* ===================================================================
   Bildlaufanzeige — der Porter am rechten Rand
   =================================================================== */

/*
 * Der Behaelter ist so breit wie der Wagen, nicht wie die Linie.
 *
 * Zuerst war er 2px schmal — genau die Breite der Route. WordPress setzt
 * aber img { max-width: 100% }, und damit wurde der Porter auf 2px
 * gekappt und lud nie. Die Linie sitzt jetzt mittig im breiten Behaelter.
 */
.sz-lauf {
    position: fixed;
    right: 1.25rem;
    top: calc(var(--sz-kopf-oben) + var(--sz-kopf-klein) + 2rem);
    bottom: 3rem;
    width: 44px;
    z-index: 40;
    pointer-events: none;
}

/* Die Route: gestrichelt, in Bordeaux, dezent. */
.sz-lauf__route {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background-image: linear-gradient(
        var(--sz-bordeaux) 0 6px,
        transparent 6px 12px
    );
    background-size: 2px 12px;
    opacity: 0.28;
}

.sz-lauf__porter {
    position: absolute;
    left: 50%;
    top: 0;
    width: 34px;
    max-width: none;   /* sonst kappt WordPress’ img-Regel auf die Behaelterbreite */
    height: auto;
    transform: translate(-50%, -50%);
    will-change: transform;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18));
}

/* -------------------------------------------------------------------
   Auf dem Telefon: am linken Rand, ueber die ganze Hoehe

   Zwei Fassungen davor. Unter 900px war sie zuerst ganz abgeschaltet,
   dann stand sie als kurzes Stueck ueber der Knopfgruppe in der Mitte
   — und lief damit mitten durch die Ware: Preise, Mengenschalter und
   Kaestchen hatten den Porter quer darueber.

   Am linken Rand hat sie eine eigene Spur. Der Inhalt beginnt dort erst
   nach der Polsterung, die Bahn liegt davor im Freien und verdeckt
   nichts. Ueber die ganze Hoehe wird sie ausserdem wieder das, was sie
   sein soll: eine Anzeige, an der man den Stand ablesen kann, statt
   eines Stummels, an dem sich nur etwas bewegt.

   Unten endet sie ueber dem Suchknopf, der jetzt dort steht — der
   Porter faehrt auf ihn zu.

   Und sie zeigt sich nur, solange wirklich gescrollt wird. Eine
   Anzeige, die dauernd dasteht, ist Zierrat; eine, die kommt, wenn man
   sie braucht, ist eine Auskunft. Das Skript setzt ist-faehrt und
   nimmt es nach einer knappen Sekunde Stillstand wieder weg.
   ------------------------------------------------------------------- */

@media (max-width: 979px) {
    .sz-lauf {
        right: auto;
        left: calc(1px + env(safe-area-inset-left, 0px));
        top: calc(var(--sz-kopf-oben) + var(--sz-kopf-klein) + 1rem);
        bottom: calc(5.1rem + env(safe-area-inset-bottom, 0px));
        height: auto;
        width: 26px;
        opacity: 0;
        transition: opacity 320ms ease;
    }

    .sz-lauf.ist-faehrt { opacity: 1; }

    .sz-lauf__porter { width: 22px; }
    .sz-lauf__route { opacity: 0.22; }
}

/* Wer keine Bewegung will, bekommt sie auch nicht ein- und
   ausgeblendet: dann steht sie still da, wo sie steht. */
@media (max-width: 979px) and (prefers-reduced-motion: reduce) {
    .sz-lauf { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sz-lauf__porter { transition: none; }
}

/* ===================================================================
   Wasserzeichen
   ===================================================================

   Die Logoform, sehr blass, auf jeder Seite. Sie hat die wechselnden
   Riesenziffern abgeloest, die uneinheitlich wirkten.

   Entsaettigt statt nachgebaut: das echte Logo, nur zurueckgenommen.
   Ein zweites, eigens gezeichnetes Logo waere ein zweites Logo.
*/

/*
 * Ganz im Bild, nicht angeschnitten.
 *
 * Vorher hing es mit right: -6vw ueber den Rand. Gemeint war ein
 * Anschnitt — gelesen wird es als abgeschnitten, also als Fehler:
 * am Rand stand ein halbes "ZA" und zwei Diagonalen, die ins Nichts
 * liefen. Ein Wasserzeichen darf blass sein, aber nicht kaputt.
 *
 * Kleiner, damit die ganze Raute samt Schriftzug hineinpasst, ohne
 * ueber den Text zu wandern.
 */
.sz-wasserzeichen {
    position: fixed;
    right: clamp(0.75rem, 2.5vw, 3rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
    user-select: none;
    width: min(38vw, 460px);
}

/*
 * Die gezeichnete Marke aus dem Entwurf statt des Logobilds: dort ist
 * sie eine Kontur in --numeral, nicht ein blass gestelltes Foto. Der
 * Ton kommt aus dem Token, damit sie in beiden Themen gleich schwer
 * wiegt — in Hell dunkel auf Papier, in Dunkel hell auf Anthrazit.
 */
.sz-wasserzeichen svg {
    display: block;
    width: 100%;
    height: auto;
    color: var(--sz-numeral);
}

/* Der Inhalt muss darueber liegen, sonst verschwindet Text dahinter. */
#page { position: relative; z-index: 1; }

@media (max-width: 900px) {
    .sz-wasserzeichen { display: none; }
}

@media print {
    .sz-wasserzeichen { display: none !important; }
}

/* ===================================================================
   Kicker
   ===================================================================

   Stand frueher in startseite.css und war auf .sz-start beschraenkt.
   Das Etikettenkapitel auf "Meine Artikel" braucht ihn ebenso, also
   gehoert er hierher — kopf.css laedt ueberall.
*/

/* Der Kicker: Mono, klein, weit gesperrt, bordeaux. Nicht die
   Display-Variante der übrigen Seiten — der Rhythmus hängt daran. */
.kicker {
    font-family: var(--sz-mono);
    font-size: 0.75rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--sz-bordeaux-text);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.kicker__punkt {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--sz-bordeaux);
    animation: sz-puls 2.4s ease-in-out infinite;
}

@keyframes sz-puls {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}


/* ===================================================================
   Der Astra-Deckel
   ===================================================================

   Astra setzt die Breite von .ast-container per Customizer als Inline-CSS
   in den <head> — also NACH unseren Dateien. Reihenfolge hilft da nicht,
   Spezifitaet schon: #page traegt eine ID, damit gewinnt die Regel ohne
   !important.

   Das betrifft vor allem den Shop: WooCommerce-Seiten liegen in diesem
   Container, und nur er hielt sie auf 1200px in der Mitte.
*/

#page .ast-container,
#page #content .ast-container {
    max-width: var(--sz-schale);
}

/* ===================================================================
   Karten mit Tiefe
   ===================================================================

   Alles, was eine eigene Flaeche hat, bekommt dieselbe Erhebung. Eine
   Stelle, damit die Seite einen Rhythmus behaelt statt sieben.
*/

.sz-zugang__karte,
.sz-hero__feld,
.sz-termin {
    box-shadow: var(--sz-hebung);
}

/* Beim Zeigen hebt sich, was anklickbar ist. Unter reduzierter Bewegung
   bleibt der Schatten, die Verschiebung faellt weg — nicht bewegen
   heisst nicht unsichtbar. */
.woocommerce ul.products li.product,
ul.products li.product {
    transition: box-shadow 300ms ease, transform 300ms ease, border-color 300ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .woocommerce ul.products li.product:hover,
    .woocommerce ul.products li.product:focus-within,
    ul.products li.product:hover { transform: none; }
}

/* ===================================================================
   Kapselknoepfe
   ===================================================================

   Alle Knoepfe sind Kapseln. Ausgenommen bleibt nur "In den Warenkorb"
   an der Kachel und am Artikel selbst: der bleibt eckig. So hebt sich
   die eine Handlung, auf die es ankommt, von allem uebrigen ab.

   Mit !important, weil einige aeltere Regeln in shop.css die Ecken
   selbst schon mit !important gesetzt haben \u2014 die haben sie gegen Astra
   gebraucht. Die Ausnahme unten wiegt mehr und gewinnt trotzdem.
*/

button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a.button,
.button,
.wp-element-button,
.sz-chip,
.sz-knopf,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-checkout #place_order,
.wc-block-components-button {
    border-radius: 999px !important;
}

/* Die Ausnahme. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce ul.products li.product button[type="submit"],
.single-product div.product form.cart .button,
.single-product div.product .single_add_to_cart_button {
    border-radius: var(--sz-radius) !important;
}

/* ===================================================================
   Unsere Suchfelder sind Kapseln
   ===================================================================

   In style.css steht seit Langem

       .button, .wp-element-button, input, select, textarea, …
           { border-radius: var(--sz-radius) !important; }

   Das war gegen Astra gerichtet und trifft seither jedes Eingabefeld.
   Ohne !important kommt an unseren Suchfeldern keine Kapsel an — die
   Regel gewinnt gegen jede Spezifitaet.
*/

.sz-hero__feld input[type="search"],
.sz-suchfeld input[type="search"],
.sz-artikelsuche input[type="search"] {
    border-radius: 999px !important;
}


@media (max-width: 979px) and (prefers-reduced-motion: reduce) {
    .sz-suchfeld { animation: none; }
}

/* ===================================================================
   Die Rechtslinks im Fuß
   ===================================================================

   Sie stehen in derselben Zeile wie der Rechtevermerk, rechts davon.
   Nicht in einer eigenen Spalte weiter oben: Impressum und Datenschutz
   sucht man unten am Rand, nicht zwischen den Warengruppen.
*/

.sz-fuss__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

.sz-fuss__recht {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
}

.sz-fuss__recht a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.sz-fuss__recht a:hover,
.sz-fuss__recht a:focus-visible {
    color: var(--sz-bordeaux-text);
    border-bottom-color: currentColor;
}

@media (max-width: 560px) {
    .sz-fuss__zeile { justify-content: flex-start; }
}

/* ===================================================================
   Die Zahl am Warenkorb, wenn sie sich aendert
   ===================================================================

   Legt jemand aus "Meine Artikel" etwas in den Korb, bleibt er auf der
   Seite — am Bildschirm aendert sich dann nichts als eine Ziffer weit
   oben rechts. Ein kurzer Puls sagt: angekommen.
*/

@keyframes sz-korb-puls {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.45); }
    100% { transform: scale(1); }
}

.sz-warenkorb__zahl.ist-neu { animation: sz-korb-puls 420ms cubic-bezier(0.22, 1, 0.36, 1); }

@media (prefers-reduced-motion: reduce) {
    .sz-warenkorb__zahl.ist-neu { animation: none; }
}