/* ZZ Tool-Plattform – App-Layout im Zacharias-Zaster-Brand (v1.10.0)
   Tokens: Brand/Brand-Guide.md
   Farbschema: bewusst NUR hell – die Website ist durchgehend hell, ein automatischer
   Dark Mode wuerde die Marke je nach Geraeteeinstellung anders aussehen lassen.
   WICHTIG: Alle Groessen in px. Bricks setzt site-weit html{font-size:62.5%},
   dadurch waere 1rem = 10px und das gesamte Layout ~37% zu klein. */

@font-face {
    font-family: "Work Sans";
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/work-sans-600.woff2") format("woff2");
}
@font-face {
    font-family: "Work Sans";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/work-sans-700.woff2") format("woff2");
}
@font-face {
    font-family: "Work Sans";
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/work-sans-900.woff2") format("woff2");
}

/* Innenabstand und Rahmen zaehlen zur Breite. Ohne das laufen Elemente mit
   width:100% plus Polsterung aus ihrem Rahmen, z. B. der Knopf im Leerzustand
   und das Textfeld im Feedback-Dialog auf schmalen Geraeten. */
.zz-app,
.zz-app *,
.zz-app *::before,
.zz-app *::after { box-sizing: border-box; }

:root {
    --zz-bg: #f1efeb;
    --zz-surface: #ffffff;
    --zz-surface-2: #faf9f6;
    --zz-text: #1f1f1f;
    --zz-muted: #6b6459;
    --zz-border: #e4ddd1;
    --zz-accent: #004fc4;
    --zz-accent-hover: #003da1;
    --zz-accent-contrast: #ffffff;
    --zz-accent-soft: rgba(0, 79, 196, 0.08);
    --zz-blue-deep: #00519e;
    --zz-yellow: #ffc005;
    --zz-yellow-soft: #fff3cd;
    --zz-yellow-text: #1f1f1f;
    --zz-petrol: #004c6b;
    --zz-success: #1a7f37;
    --zz-warn: #9a6700;
    --zz-danger: #c73333;
    --zz-radius: 14px;
    --zz-radius-lg: 22px;
    --zz-shadow: 0 1px 2px rgba(0, 76, 107, 0.06), 0 8px 24px rgba(0, 76, 107, 0.07);
    --zz-shadow-lift: 0 2px 4px rgba(0, 76, 107, 0.08), 0 16px 40px rgba(0, 76, 107, 0.13);
    --zz-display: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}


.zz-app {
    margin: 0;
    /* Weiße Fläche, die Kacheln tragen die Farbe. Eine Ebene Farbe, wie auf der Marke. */
    background: var(--zz-surface);
    color: var(--zz-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

.zz-app a { color: var(--zz-accent); }
.zz-app h1, .zz-app h2, .zz-app h3 {
    font-family: var(--zz-display);
    color: var(--zz-blue-deep);
    line-height: 1.12;
    letter-spacing: -0.01em;
}
.zz-app h1 { font-size: clamp(28px, 3.2vw, 36px); font-weight: 900; margin: 0 0 0.6em; }
.zz-app h2 { font-size: 21px; font-weight: 700; margin: 0 0 0.5em; }

/* ── Header ─────────────────────────────────────────────── */
.zz-header {
    background: var(--zz-surface);
    border-bottom: 2px solid var(--zz-yellow);
    position: sticky;
    top: 0;
    z-index: 20;
}
.zz-header__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.zz-brand {
    display: flex;
    flex-direction: column;
    font-family: var(--zz-display);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--zz-blue-deep) !important;
    white-space: nowrap;
}
.zz-brand__zeile--oben { color: #004fc4; }
.zz-nav { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.zz-nav a {
    font-family: var(--zz-display);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    color: var(--zz-muted);
    padding: 7px 14px;
    border-radius: 999px;
    transition: background 0.15s ease, color 0.15s ease;
}
.zz-nav a:hover { color: var(--zz-text); background: var(--zz-accent-soft); }
.zz-nav a.is-active { color: var(--zz-accent-contrast); background: var(--zz-accent); }

/* ── Layout ─────────────────────────────────────────────── */
.zz-main { flex: 1; width: 100%; }
/* Bühnen-Seite: keine Innenabstände, der Rechner nutzt die volle Fläche */
.zz-main--stage { display: flex; }
.zz-wide, .zz-narrow {
    margin: 0 auto;
    padding: 40px 20px 64px;
    width: 100%;
    box-sizing: border-box;
}
.zz-wide { max-width: 1100px; }
.zz-narrow { max-width: 580px; }

.zz-footer {
    background: var(--zz-petrol);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
}
.zz-footer__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 56px 20px 36px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.zz-footer__top,
.zz-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 32px;
}
.zz-footer__brand { display: flex; flex-direction: column; gap: 6px; }
.zz-footer__marke {
    display: flex;
    flex-direction: column;
    font-family: var(--zz-display);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: #ffffff;
}
.zz-footer__claim { font-size: 14px; color: rgba(255, 255, 255, 0.7); }
.zz-footer__nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.zz-footer__nav a {
    font-family: var(--zz-display);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.85);
}
.zz-footer__bottom {
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 13px;
}
.zz-footer__recht { display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* Rechner-Buehne: schmale Fusszeile, damit dem Rechner die Hoehe bleibt */
.zz-footer--schmal .zz-footer__inner { padding: 12px 20px; gap: 0; }
.zz-footer--schmal .zz-footer__bottom { padding-top: 0; border-top: 0; font-size: 12px; }
.zz-footer a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.zz-footer__nav a:hover { color: #ffffff; }
.zz-footer__recht a:hover { color: #ffffff; text-decoration: underline; }

/* ── Login / Registrierung (Auth-Karte) ─────────────────── */
.zz-auth-wrap {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 48px 20px 64px;
    box-sizing: border-box;
}
.zz-auth {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    background: var(--zz-surface);
    border-radius: var(--zz-radius-lg);
    box-shadow: var(--zz-shadow-lift);
    overflow: hidden;
}
.zz-auth__panel {
    position: relative;
    background: var(--zz-yellow);
    color: #1f1f1f;
    padding: 40px 36px 0;
    display: flex;
    flex-direction: column;
    min-height: 480px;
}
.zz-auth__brand {
    font-family: var(--zz-display);
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #00519e;
    margin: 0 0 19px;
    padding-bottom: 8px;
    border-bottom: 2px dashed rgba(0, 81, 158, 0.5);
    align-self: flex-start;
}
.zz-app .zz-auth__claim {
    font-size: 30px;
    font-weight: 900;
    color: #00519e !important;
    margin: 0 0 19px;
}
.zz-auth__points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 15px;
    line-height: 1.45;
    max-width: 30ch;
}
.zz-auth__points li { padding-left: 22px; position: relative; }
.zz-auth__points li::before {
    content: "✓";
    position: absolute;
    left: 0;
    font-family: var(--zz-display);
    font-weight: 900;
    color: #00519e;
}
.zz-auth__zaster {
    display: block;
    width: 200px;
    max-width: 70%;
    margin: auto 0 0 auto;
    pointer-events: none;
}
.zz-auth__form { padding: 26px 36px 36px; }
.zz-auth__fuss { margin: 16px 0 0; font-size: 15px; }

/* Segmented Tabs */
.zz-tabs__nav {
    display: flex;
    gap: 4px;
    background: var(--zz-bg);
    border-radius: 999px;
    padding: 5px;
    margin-bottom: 24px;
}
.zz-tabs__nav button {
    flex: 1;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: 999px;
    font-family: var(--zz-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--zz-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.zz-tabs__nav button.is-active {
    background: var(--zz-surface);
    color: var(--zz-blue-deep);
    box-shadow: var(--zz-shadow);
}
.zz-tabs__panel { display: none; }
.zz-tabs__panel.is-active { display: block; }

/* ── Kacheln / Karten ───────────────────────────────────── */
.zz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
}
.zz-grid--single { grid-template-columns: minmax(260px, 380px); }

.zz-card {
    background: var(--zz-bg);
    border: 1px solid var(--zz-border);
    border-radius: var(--zz-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.18s ease, border-color 0.18s ease;
}
.zz-card:hover { transform: translateY(-3px); border-color: var(--zz-blue-deep); }
.zz-card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}
.zz-card__image--empty {
    background:
        radial-gradient(circle at 82% 20%, rgba(255, 255, 255, 0.35) 0 14%, transparent 15%),
        linear-gradient(135deg, var(--zz-yellow), #ffd75e);
}
.zz-card__body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
}
.zz-card__badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.zz-card__title { margin: 0; font-size: 17px; }
.zz-card__title a {
    text-decoration: none;
    color: var(--zz-text);
    font-family: var(--zz-display);
    font-weight: 700;
}
.zz-card__excerpt { margin: 0; color: var(--zz-muted); font-size: 15px; flex: 1; }
.zz-card .zz-button { align-self: flex-start; }

/* Ganze Kachel klickbar: Der Titel-Link spannt sich unsichtbar über die Karte,
   der sichtbare Knopf liegt darüber und bleibt ein eigenes Ziel. */
.zz-card--klickbar { position: relative; cursor: pointer; }
.zz-card__link { text-decoration: none; color: var(--zz-text); font-family: var(--zz-display); font-weight: 700; }
.zz-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.zz-card--klickbar .zz-button { position: relative; z-index: 2; }
.zz-card--klickbar:focus-within { border-color: var(--zz-blue-deep); }

/* In der Kachel ist der Knopf eine ruhige Wiederholung des Kartenziels, nicht der
   Haupt-Aufruf der Seite: kleiner und in Markenblau. Gelb bleibt dem Kauf vorbehalten. */
.zz-card .zz-button {
    padding: 9px 15px;
    font-size: 14px;
    border-radius: 8px;
}
.zz-card .zz-button--primary {
    background: var(--zz-blue-deep);
    color: #ffffff !important;
    box-shadow: inset 0 2px 1px #ffffff26;
}
.zz-card .zz-button--primary:hover { background: #004182; }
.zz-card .zz-button--ghost { background: #ffffff; border-color: var(--zz-blue-deep); color: var(--zz-blue-deep) !important; }
.zz-card .zz-button--ghost:hover { background: var(--zz-blue-deep); color: #ffffff !important; }
.zz-card__link:focus-visible { outline: 2px solid var(--zz-blue-deep); outline-offset: 3px; }

.zz-badge {
    font-family: var(--zz-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 3px 10px;
    border-radius: 99px;
    white-space: nowrap;
}
.zz-badge--owned {
    background: #e8f1ff;
    color: var(--zz-blue-deep);
}
.zz-badge--free { background: var(--zz-yellow); color: var(--zz-yellow-text); }
.zz-badge--paid { background: var(--zz-accent-soft); color: var(--zz-accent); }
.zz-badge--new { background: rgba(26, 127, 55, 0.14); color: var(--zz-success); }
.zz-badge--soon { background: rgba(154, 103, 0, 0.14); color: var(--zz-warn); }
.zz-lock { margin-left: auto; opacity: 0.8; }

/* Angebotspreis: WooCommerce liefert <del> alter Preis + <ins> neuer Preis,
   dazu Vorlesetexte, die ohne Woo-Stylesheet sichtbar waeren. */
.zz-app del,
.zz-grid del,
.zz-teaser-cta del {
    opacity: 0.6;
    font-weight: 500;
    margin-right: 5px;
}
.zz-app ins,
.zz-grid ins,
.zz-teaser-cta ins {
    background: none;
    text-decoration: none;
}
.zz-app .screen-reader-text,
.zz-grid .screen-reader-text,
.zz-teaser-cta .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Noch nicht fertige Rechner: sichtbar zurueckgenommen, aber lesbar */
.zz-card--wartet .zz-card__image { filter: saturate(0.55); opacity: 0.85; }

/* ── Hervorgehobener Rechner: Teaser ueber der Kachelliste ─ */
.zz-hero-tool {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    margin: 0 0 34px;
    border-radius: var(--zz-radius-lg);
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 16%, rgba(255, 192, 5, 0.20) 0, rgba(255, 192, 5, 0) 58%),
        linear-gradient(135deg, var(--zz-blue-deep) 0%, var(--zz-accent) 64%, #0062e8 100%);
    box-shadow: var(--zz-shadow-lift);
}
.zz-hero-tool__text {
    padding: 30px 34px 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.zz-hero-tool__label {
    margin: 0;
    padding: 5px 13px;
    border-radius: 99px;
    background: var(--zz-yellow);
    color: var(--zz-yellow-text);
    font-family: var(--zz-display);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.zz-app .zz-hero-tool__title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 900;
}
.zz-hero-tool__lead {
    margin: 0;
    max-width: 46ch;
    font-size: 17px;
    color: rgba(255, 255, 255, 0.86);
}
.zz-hero-tool__preis {
    margin: 0;
    font-family: var(--zz-display);
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
}
.zz-hero-tool__preis del { opacity: 0.6; font-weight: 600; }
.zz-hero-tool__aktionen {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.zz-app .zz-hero-tool__mehr {
    color: #ffffff !important;
    font-family: var(--zz-display);
    font-weight: 600;
    font-size: 15px;
}
.zz-hero-tool__hinweis { margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.72); }
.zz-hero-tool__media {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 210px;
}
.zz-hero-tool__bild { display: block; width: 100%; height: 100%; object-fit: cover; }
.zz-hero-tool__bild--zaster {
    width: auto;
    height: auto;
    max-width: 74%;
    max-height: 250px;
    object-fit: contain;
}

/* ── Dokument (PDF) statt Rechner ────────────────────────── */
.zz-dokument {
    background: var(--zz-bg);
    border: 1px solid var(--zz-border);
    border-radius: var(--zz-radius-lg);
    padding: 26px 28px;
    margin-bottom: 22px;
}
.zz-dokument__text { margin: 0 0 10px; font-size: 17px; max-width: 70ch; }
.zz-dokument__meta {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--zz-muted);
}
.zz-dokument__aktionen { display: flex; flex-wrap: wrap; gap: 12px; }
.zz-dokument__vorschau {
    display: block;
    width: 100%;
    height: min(78vh, 900px);
    border: 1px solid var(--zz-border);
    border-radius: var(--zz-radius);
    background: #fff;
}

/* ── Rueckmeldung aus der Plattform ──────────────────────── */
.zz-fb-karte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    background: var(--zz-bg);
    border: 1px solid var(--zz-border);
    border-radius: var(--zz-radius-lg);
    padding: 20px 24px;
    margin: 0 0 26px;
}
.zz-fb-karte p { margin: 6px 0 0; color: var(--zz-muted); max-width: 62ch; }
.zz-fb { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.zz-fb[hidden] { display: none; }
.zz-fb__hg { position: absolute; inset: 0; background: rgba(0, 42, 66, 0.75); }
.zz-fb__box {
    position: relative;
    width: min(560px, 96vw);
    background: var(--zz-surface);
    border-radius: var(--zz-radius-lg);
    padding: 28px 28px 24px;
    box-shadow: var(--zz-shadow-lift);
}
.zz-fb__zu {
    position: absolute; top: 12px; right: 14px;
    width: 34px; height: 34px; border: 0; border-radius: 999px;
    background: var(--zz-bg); color: var(--zz-text);
    font-size: 21px; line-height: 1; cursor: pointer;
}
.zz-fb__titel { margin: 0 0 8px; font-size: 21px; }
.zz-fb__text { margin: 0 0 18px; color: var(--zz-muted); font-size: 15px; }
.zz-fb__label { display: block; font-family: var(--zz-display); font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.zz-fb textarea {
    width: 100%; padding: 12px 14px; border: 1px solid var(--zz-border);
    border-radius: 10px; font: inherit; background: #fff;
}
.zz-fb__check { display: flex; align-items: center; gap: 9px; margin: 12px 0 18px; font-size: 15px; color: var(--zz-muted); }
.zz-fb__check input { width: 18px; height: 18px; }
.zz-fb__aktionen { display: flex; flex-wrap: wrap; gap: 10px; }
.zz-wide--meldung { padding-bottom: 0; }

/* Leerer Zustand */
.zz-empty {
    background: var(--zz-surface);
    border: 1px dashed var(--zz-border);
    border-radius: var(--zz-radius);
    padding: 40px 32px;
    text-align: center;
    color: var(--zz-muted);
}
.zz-empty .zz-button { margin-top: 16px; }

/* ── Buttons ────────────────────────────────────────────── */
.zz-button {
    display: inline-block;
    padding: 15px 20px;
    border-radius: 10px;
    border: 1px solid #0000001a;
    font-family: var(--zz-display);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    background: var(--zz-surface-2);
    color: var(--zz-text);
    transition: background 0.15s ease, transform 0.1s ease;
}
.zz-button:active { transform: scale(0.98); }
.zz-button--primary {
    background: var(--zz-yellow);
    color: #171717 !important;
    box-shadow: inset 0 2px 1px #ffffff33;
}
.zz-button--primary:hover { background: #e6ac00; }
.zz-button--buy { background: var(--zz-yellow); color: #171717 !important; box-shadow: inset 0 2px 1px #ffffff33; }
.zz-button--buy:hover { background: #e6ac00; }
.zz-button--ghost { background: transparent; border-color: var(--zz-border); color: var(--zz-text) !important; }
.zz-button--ghost:hover { border-color: var(--zz-accent); color: var(--zz-accent) !important; }
.zz-button--danger-ghost { background: transparent; border-color: var(--zz-danger); color: var(--zz-danger) !important; }
.zz-button--wide { width: 100%; }
/* „Noch nicht verfuegbar": sieht aus wie ein Button, ist aber keiner - es gibt
   nichts zu oeffnen, also fuehrt er auch nirgendwohin. */
.zz-button--wartet {
    background: var(--zz-bg);
    border-color: var(--zz-border);
    color: var(--zz-muted);
    cursor: default;
}
.zz-button:focus-visible { outline: 3px solid var(--zz-accent-soft); outline-offset: 1px; }

/* ── Meldungen ──────────────────────────────────────────── */
.zz-alert {
    padding: 16px 20px;
    border-radius: var(--zz-radius);
    border: 1px solid var(--zz-border);
    background: var(--zz-bg);
    margin-bottom: 22px;
}
/* Der Zustand steckt in Flaeche und Rahmen, nicht in einem Balken an der Seite. */
.zz-alert--success {
    border-color: #b9dfc4;
    background: #f0f8f2;
}
.zz-alert--error {
    border-color: #f0c2c0;
    background: #fdf1f0;
}
.zz-alert--info {
    border-color: #f2d894;
    background: #fff9e8;
}
.zz-alert form.zz-inline-form { margin-top: 11px; }

/* ── Formulare ──────────────────────────────────────────── */
.zz-form p { margin: 0 0 18px; }
.zz-form label,
.zz-app #loginform label {
    display: block;
    font-family: var(--zz-display);
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 6px;
}
.zz-form label small { font-weight: 400; color: var(--zz-muted); }
.zz-app input[type="text"],
.zz-app input[type="email"],
.zz-app input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    border: 1.5px solid var(--zz-border);
    border-radius: 12px;
    background: var(--zz-surface);
    color: var(--zz-text);
    font-size: 16px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.zz-app input:focus-visible {
    outline: none;
    border-color: var(--zz-accent);
    box-shadow: 0 0 0 4px var(--zz-accent-soft);
}
.zz-consent label { font-weight: 400 !important; font-size: 14px; color: var(--zz-muted); display: flex; gap: 10px; align-items: flex-start; font-family: inherit !important; }
.zz-consent input { margin-top: 3px; }
.zz-hp { position: absolute; left: -9999px; height: 1px; overflow: hidden; }

.zz-app #loginform p { margin: 0 0 18px; }
.zz-app #loginform .login-remember label { font-weight: 400; font-family: inherit; }
.zz-app #wp-submit {
    background: var(--zz-accent);
    color: var(--zz-accent-contrast);
    border: none;
    padding: 11px 24px;
    border-radius: 999px;
    font-family: var(--zz-display);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    width: 100%;
    transition: background 0.15s ease;
}
.zz-app #wp-submit:hover { background: var(--zz-accent-hover); }

/* ── Filter-Chips ───────────────────────────────────────── */
.zz-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.zz-chip {
    font-family: var(--zz-display);
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 99px;
    border: 1.5px solid var(--zz-border);
    text-decoration: none;
    color: var(--zz-text) !important;
    font-size: 14px;
    background: var(--zz-surface);
    transition: border-color 0.15s ease;
}
.zz-chip:hover { border-color: var(--zz-accent); }
.zz-chip.is-active { background: var(--zz-accent); border-color: var(--zz-accent); color: var(--zz-accent-contrast) !important; }

/* ── Tool-Ansicht ───────────────────────────────────────── */
.zz-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.zz-app .zz-toolbar__title { margin: 0; flex: 1; }
.zz-toolbar__version {
    font-family: var(--zz-display);
    font-weight: 600;
    color: var(--zz-muted);
    font-size: 14px;
    background: var(--zz-surface);
    border: 1px solid var(--zz-border);
    border-radius: 99px;
    padding: 4px 13px;
}
.zz-back {
    text-decoration: none;
    white-space: nowrap;
    font-family: var(--zz-display);
    font-weight: 600;
    font-size: 14px;
    padding: 6px 14px;
    border-radius: 99px;
    background: var(--zz-accent-soft);
}
.zz-tool-intro {
    margin: 0 0 20px;
    max-width: 70ch;
    font-size: 17px;
    color: var(--zz-muted);
}
.zz-tool-frame {
    width: 100%;
    border: 1px solid var(--zz-border);
    border-radius: var(--zz-radius);
    background: #fff;
    display: block;
    box-shadow: var(--zz-shadow);
}

/* ── Buehne: Rechner mit fester Hoehe und eigenem Scrollbereich ──
   Notwendig, damit Popups im Rechner (position: fixed) im Sichtfenster
   landen und nicht in der Mitte eines mehrere Tausend Pixel hohen iframes. */
.zz-app--buehne .zz-stage { --zz-header-h: 0px; }
.zz-stage {
    --zz-stage-bar: 46px;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* Die Buehne fuellt das Fenster unter der Kopfzeile. Die Fusszeile geht
       bewusst nicht in die Rechnung ein, sie steht darunter und ist erst nach
       dem Scrollen zu sehen. So aendert eine hoehere Fusszeile nie die
       Rechnerhoehe. Der calc-Wert ist der Notfall ohne JavaScript. */
    height: var(--zz-stage-h, calc(100dvh - var(--zz-header-h, 57px)));
    min-height: 620px;
    background: var(--zz-bg);
}
.zz-stage__bar {
    flex: 0 0 auto;
    min-height: var(--zz-stage-bar);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 16px;
    background: var(--zz-surface);
    border-bottom: 1px solid var(--zz-border);
}
.zz-stage__title {
    font-family: var(--zz-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--zz-blue-deep);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.zz-stage__btn {
    flex: 0 0 auto;
    font-family: var(--zz-display);
    font-weight: 600;
    font-size: 14px;
    padding: 7px 14px;
    border: 1.5px solid var(--zz-border);
    border-radius: 999px;
    background: var(--zz-surface);
    color: var(--zz-text);
    cursor: pointer;
}
.zz-stage__btn:hover { border-color: var(--zz-accent); color: var(--zz-accent); }
.zz-stage__btn--full { background: var(--zz-accent); border-color: var(--zz-accent); color: var(--zz-accent-contrast); }
.zz-stage__btn--full:hover { background: var(--zz-accent-hover); color: var(--zz-accent-contrast); }
.zz-stage__info {
    flex: 0 0 auto;
    margin: 0;
    padding: 10px 16px;
    background: var(--zz-yellow-soft);
    border-bottom: 1px solid var(--zz-border);
    font-size: 15px;
    color: var(--zz-text);
}
.zz-stage__frame {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    display: block;
    background: #fff;
    min-height: 0;
}

/* Vollbild: sowohl echtes Fullscreen als auch Fallback ueber die Klasse */
.zz-stage:fullscreen,
.zz-stage.is-vollbild {
    height: 100dvh;
    position: fixed;
    inset: 0;
    z-index: 9999;
}
.zz-stage:fullscreen .zz-stage__bar,
.zz-stage.is-vollbild .zz-stage__bar { padding: 6px 16px; }

/* ── Panels (Konto) ─────────────────────────────────────── */
.zz-panel {
    background: var(--zz-surface);
    border: 1px solid var(--zz-border);
    border-radius: var(--zz-radius);
    padding: 24px 28px;
    margin-bottom: 22px;
    box-shadow: var(--zz-shadow);
}
.zz-panel--danger { border-color: color-mix(in srgb, var(--zz-danger) 40%, var(--zz-border)); }
.zz-status { font-weight: 700; font-family: var(--zz-display); }
.zz-status--ok { color: var(--zz-success); }
.zz-status--pending { color: var(--zz-warn); }
.zz-status--off { color: var(--zz-muted); }
.zz-hint { color: var(--zz-muted); font-size: 15px; }
.zz-app .zz-section-title { margin-top: 48px; }
.zz-message { text-align: center; padding-top: 72px; }

/* ── Teaser-CTA (öffentliche Tool-Seiten, Theme-Kontext) ── */
.zz-teaser-cta {
    margin: 32px 0;
    padding: 26px;
    background: #fff8e1;
    border: 2px solid #ffc005;
    border-radius: 14px;
}
.zz-teaser-cta__hint { font-size: 14px; margin-top: 12px; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 760px) {
    .zz-auth-wrap { padding: 24px 20px 40px; }
    .zz-auth { grid-template-columns: 1fr; border-radius: 18px; }
    .zz-auth__panel { min-height: 0; padding: 26px 22px 0; }
    .zz-app .zz-auth__claim { font-size: 23px; }
    .zz-auth__points { font-size: 14px; max-width: none; }
    .zz-auth__zaster { width: 118px; margin-top: 8px; }
    .zz-auth__form { padding: 21px 22px 26px; }

    /* Hervorgehobener Rechner: Text zuerst, Bild als breites Band darunter.
       Freigestellt (Rueckfallbild) wird nicht beschnitten, sondern gestellt. */
    .zz-hero-tool { grid-template-columns: 1fr; margin-bottom: 26px; }
    .zz-hero-tool__text { padding: 24px 22px 26px; }
    .zz-hero-tool__lead { font-size: 16px; max-width: none; }
    .zz-hero-tool__aktionen { width: 100%; gap: 14px; }
    .zz-hero-tool__media { min-height: 0; padding: 0; }
    .zz-hero-tool__bild {
        width: 100%;
        height: auto;
        max-height: none;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        object-position: 50% 28%;
    }
    .zz-hero-tool__bild--zaster {
        width: auto;
        max-width: 58%;
        max-height: 190px;
        aspect-ratio: auto;
        object-fit: contain;
        margin: 18px auto 0;
    }
}

@media (max-width: 600px) {
    /* Randabstand: gleiche Luft wie auf der Website (20px) */
    .zz-wide, .zz-narrow { padding: 28px 20px 48px; }
    .zz-header__inner { padding: 11px 20px; gap: 10px; }
    .zz-footer__inner { padding: 40px 20px 28px; gap: 22px; }
    .zz-brand { font-size: 15px; }

    /* Navigation: horizontal scrollbare Pill-Leiste statt Umbruch */
    .zz-nav {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
    }
    .zz-nav::-webkit-scrollbar { display: none; }
    .zz-nav { -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
              mask-image: linear-gradient(to right, #000 88%, transparent); }
    .zz-nav a { padding: 7px 14px; font-size: 14px; white-space: nowrap; }

    .zz-app h1 { font-size: 25px; }
    .zz-app h2 { font-size: 18px; }

    /* Karten: eine Spalte, ruhigere Abstände */
    .zz-grid { grid-template-columns: 1fr; gap: 18px; }
    .zz-grid--single { grid-template-columns: 1fr; }
    .zz-card__body { padding: 16px 18px 18px; }
    .zz-card:hover { transform: none; }   /* kein Lift ohne echten Hover */

    /* Buttons: volle Breite, sichere Touch-Groesse */
    .zz-button { width: 100%; padding: 13px 20px; }
    .zz-card .zz-button, .zz-chip { width: auto; }
    .zz-inline-form .zz-button { width: 100%; }

    .zz-panel { padding: 19px 20px; }
    .zz-alert { padding: 14px 18px; }
    .zz-toolbar { gap: 10px; }
    .zz-app .zz-toolbar__title { font-size: 22px; width: 100%; order: 3; }

    /* Filter-Chips horizontal scrollbar statt Umbruch-Salat */
    .zz-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
    .zz-filter::-webkit-scrollbar { display: none; }
    .zz-chip { white-space: nowrap; }

    .zz-teaser-cta { padding: 20px; }

    .zz-hero-tool__text { padding: 22px 20px 24px; }
    /* Schmale Karte: etwas hoeheres Band, sonst wirkt Zaster angeschnitten */
    .zz-hero-tool__bild { aspect-ratio: 3 / 2; object-position: 50% 32%; }

    /* Buehnenleiste: auf dem Handy bleibt nur das Wesentliche in einer Zeile.
       Die Version steht weiterhin im Info-Text bzw. in der Uebersicht. */
    .zz-stage__bar { gap: 8px; padding: 6px 12px; }
    .zz-stage .zz-back__text { display: none; }
    .zz-stage .zz-back { padding: 7px 11px; }
    .zz-app .zz-stage__title { font-size: 15px; }
    .zz-stage__bar .zz-toolbar__version { display: none; }
    .zz-stage__btn { font-size: 13px; padding: 7px 11px; }
    .zz-stage__info { font-size: 14px; padding: 10px 12px; }
}

/* Hover-Effekte nur fuer Geraete mit echtem Zeiger */
@media (hover: none) {
    .zz-card:hover { transform: none; box-shadow: var(--zz-shadow); }
}

@media (prefers-reduced-motion: reduce) {
    .zz-app * { transition: none !important; animation: none !important; }
}

/* ── Kurz-Registrierung fuer Landingpages ([zz_registrierung]) ──
   Laeuft ausserhalb der App auf normalen Theme-Seiten, deshalb eigene Flaeche. */
.zz-reg {
    background: var(--zz-surface);
    border: 1px solid var(--zz-border);
    border-radius: var(--zz-radius);
    padding: 20px;
    box-shadow: var(--zz-shadow);
    max-width: 620px;
}
.zz-reg__zeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.zz-reg__label {
    flex: 1 0 100%;
    font-family: var(--zz-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--zz-blue-deep);
}
.zz-reg__eingabe {
    flex: 1 1 220px;
    min-width: 0;
    padding: 14px 16px;
    font-size: 16px;
    border: 1.5px solid var(--zz-border);
    border-radius: 10px;
    background: var(--zz-surface-2);
    color: var(--zz-text);
}
.zz-reg__eingabe:focus { outline: 3px solid var(--zz-accent-soft); border-color: var(--zz-accent); }
.zz-reg__zeile .zz-button { flex: 0 0 auto; }
.zz-reg__zustimmung {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--zz-muted);
}
.zz-reg__zustimmung input { margin-top: 3px; flex: 0 0 auto; }
.zz-reg__hinweis { margin: 10px 0 0; font-size: 13px; color: var(--zz-muted); }
.zz-reg__fehler {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(199, 51, 51, 0.1);
    color: var(--zz-danger);
    font-size: 15px;
}
.zz-reg__dank { font-family: var(--zz-display); font-weight: 700; font-size: 18px; color: var(--zz-blue-deep); margin: 0 0 6px; }
.zz-reg--fertig p { margin: 0 0 8px; }
.zz-reg__honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) {
    .zz-reg { padding: 16px; }
    .zz-reg__zeile .zz-button { width: 100%; }
}