/**
 * Calculator widget — Neue-Sachlichkeit-influenced: sharp edges, visible
 * borders as the primary separation method (not resting shadows), tabular
 * numbers on results. See docs/Websitebuilder/niches/zeitkalk.md Layer 3.
 *
 * @package ZB_Zeitkalk
 */

/* Colored hero band — real visual weight instead of a plain white page.
   Full-bleed dark-slate band behind the title, with a light diagonal-grid
   texture (pure CSS, no image request) for depth without a stock photo.
   The calculator form card floats up over the band's bottom edge. */
.zk-hero-band {
    background: linear-gradient(165deg, var(--zk-primary, #1B4B6E) 0%, var(--zk-primary-dark, #12344C) 100%);
    background-image:
        linear-gradient(165deg, var(--zk-primary, #1B4B6E) 0%, var(--zk-primary-dark, #12344C) 100%),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 28px);
    padding: 56px 0 96px 0;
}

.zk-hero-band__inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.zk-tool-hero__eyebrow {
    display: inline-block;
    font-family: var(--zk-font-body, 'Source Sans 3', sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    background: var(--zk-accent, #C46A1E);
    padding: 5px 14px;
    border-radius: var(--zk-radius-pill, 999px);
    margin: 0 0 18px 0;
}

.zk-tool-hero__title {
    font-family: var(--zk-font-heading, 'Fira Sans', sans-serif);
    font-weight: 700;
    font-size: clamp(1.9rem, 4.5vw, 2.75rem);
    line-height: 1.15;
    color: #fff;
    margin: 0 0 14px 0;
}

.zk-tool-hero__subtitle {
    font-size: 1.0625rem;
    color: #D9E4EC;
    max-width: 560px;
    margin: 0 auto;
}

.zk-tool-hero__inner {
    max-width: 900px;
    margin: -64px auto 0 auto;
    padding: 0 var(--zk-container-pad, 20px) 0;
    text-align: left;
    position: relative;
}

.zk-tool {
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
}

.zk-tool__form {
    background: var(--zk-bg-white, #fff);
    border: 1px solid var(--zk-border, #D8D8D4);
    border-radius: var(--zk-radius-md, 3px);
    padding: 24px;
}

.zk-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.zk-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zk-field label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--zk-text, #1A1A1A);
}

.zk-field input[type="time"],
.zk-field input[type="number"] {
    font-family: var(--zk-font-body, 'Source Sans 3', sans-serif);
    font-size: 1rem;
    padding: 10px 12px;
    border: 1px solid var(--zk-border, #D8D8D4);
    border-radius: var(--zk-radius-sm, 2px);
    background: var(--zk-bg-white, #fff);
    color: var(--zk-text, #1A1A1A);
    min-height: 44px;
}

.zk-field input:focus {
    outline: 2px solid var(--zk-primary, #1B4B6E);
    outline-offset: 1px;
}

.zk-breaks {
    border: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.zk-breaks legend {
    font-weight: 700;
    font-family: var(--zk-font-heading, 'Fira Sans', sans-serif);
    padding: 0 0 8px 0;
}

.zk-break-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 12px;
}

.zk-break-row--hidden {
    display: none;
}

.zk-btn {
    display: inline-block;
    font-family: var(--zk-font-body, 'Source Sans 3', sans-serif);
    font-weight: 700;
    font-size: 1rem;
    min-height: 44px;
    padding: 10px 20px;
    border-radius: var(--zk-radius-sm, 2px);
    border: 1px solid transparent;
    cursor: pointer;
}

.zk-btn--primary {
    background: var(--zk-primary, #1B4B6E);
    color: #fff;
    width: 100%;
}
.zk-btn--primary:hover {
    background: var(--zk-primary-dark, #12344C);
}

.zk-btn--ghost {
    background: transparent;
    border: 1px solid var(--zk-border, #D8D8D4);
    color: var(--zk-primary, #1B4B6E);
}
.zk-btn--ghost:hover {
    border-color: var(--zk-primary, #1B4B6E);
}

/* Hard override: the shared plugin bundle (assets/css/templates.min.css)
   ships a generic `button[type="submit"], .button, input[type="submit"]`
   rule (pill radius, resting box-shadow, uppercase, letter-spacing, a
   hardcoded #c44c34 fill via --primary-color) intended as a site-wide
   fallback default. Its attribute selector outranks the single-class
   `.zk-btn` rule above on specificity, so it silently wins on every
   zeitkalk button regardless of stylesheet load order. Re-assert the
   Neue-Sachlichkeit spec here with !important so this template's design
   tokens cannot be clobbered by that shared default again. */
button.zk-btn,
input[type="submit"].zk-btn {
    border-radius: var(--zk-radius-sm, 2px) !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 1rem !important;
    padding: 10px 20px !important;
}
button.zk-btn--primary,
input[type="submit"].zk-btn--primary {
    background: var(--zk-primary, #1B4B6E) !important;
}
button.zk-btn--primary:hover,
input[type="submit"].zk-btn--primary:hover {
    background: var(--zk-primary-dark, #12344C) !important;
    box-shadow: 0 4px 12px rgba(27, 75, 110, 0.12) !important;
}
button.zk-btn--ghost,
input[type="submit"].zk-btn--ghost {
    background: transparent !important;
    color: var(--zk-primary, #1B4B6E) !important;
}

/* Result panel: fixed min-height reserved so calculation never shifts
   layout (CLS = 0) — only text content changes at runtime. */
.zk-result {
    margin-top: 20px;
    background: var(--zk-bg-subtle, #F2F2F0);
    border: 1px solid var(--zk-border, #D8D8D4);
    border-radius: var(--zk-radius-md, 3px);
    padding: 20px 24px;
    min-height: 220px;
}

.zk-result__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid var(--zk-border, #D8D8D4);
}
.zk-result__row:last-of-type {
    border-bottom: none;
}

.zk-result__row--main {
    padding: 12px 0;
    border-top: 2px solid var(--zk-primary, #1B4B6E);
    border-bottom: 2px solid var(--zk-primary, #1B4B6E);
    margin: 8px 0;
}
.zk-result__row--main .zk-result__value {
    font-size: 1.5rem;
    color: var(--zk-primary, #1B4B6E);
}

.zk-result__label {
    color: var(--zk-text-muted, #5A5A5A);
    font-size: 0.9375rem;
}

.zk-result__value {
    font-family: var(--zk-font-body, 'Source Sans 3', sans-serif);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--zk-text, #1A1A1A);
}

.zk-result__note {
    margin: 10px 0 0 0;
    font-size: 0.875rem;
    color: var(--zk-accent, #C46A1E);
    min-height: 1.2em;
}

.zk-noscript {
    color: var(--zk-warning, #B3261E);
    font-size: 0.9375rem;
}

/* Wochenstunden -> Monatsstunden table */
.zk-conversion-table {
    margin-top: 32px;
}

.zk-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-variant-numeric: tabular-nums;
}
.zk-table th,
.zk-table td {
    border: 1px solid var(--zk-border, #D8D8D4);
    padding: 8px 12px;
    text-align: left;
}
.zk-table thead th {
    background: var(--zk-bg-subtle, #F2F2F0);
    font-weight: 700;
}
.zk-table tbody tr:nth-child(even) {
    background: var(--zk-bg-subtle, #F2F2F0);
}

.zk-field--inline {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.zk-field--inline input {
    width: 120px;
}
.zk-field--inline .zk-result__value {
    color: var(--zk-primary, #1B4B6E);
}

@media (max-width: 600px) {
    .zk-field-row,
    .zk-break-row {
        grid-template-columns: 1fr;
    }

    /* Wide reference tables (Brutto-Netto-Tabelle, Wochen->Monat, etc.)
       overflow the 375px viewport otherwise — scope the scroll to the
       table itself (tables accept display:block) instead of letting it
       push out <body>, which would violate the niche's no-horizontal-
       -scroll-at-375px quality gate. */
    .zk-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .zk-table thead,
    .zk-table tbody,
    .zk-table tr {
        display: table;
        width: 100%;
        table-layout: auto;
    }
}

/* FAQ accordion — shared by homepage (faq-zeitkalk.php) and single-tool pages */
.zk-faq__heading,
.zk-faq h2 {
    font-family: var(--zk-font-heading, 'Fira Sans', sans-serif);
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0 0 16px 0;
}

.zk-faq__list {
    max-width: 760px;
    margin: 0 auto;
}

.zk-faq__item {
    border-bottom: 1px solid var(--zk-border, #D8D8D4);
    padding: 14px 0;
}

.zk-faq__q {
    font-family: var(--zk-font-heading, 'Fira Sans', sans-serif);
    font-weight: 600;
    font-size: 1.0625rem;
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 28px;
}
.zk-faq__q::-webkit-details-marker {
    display: none;
}
.zk-faq__q::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 0;
    font-size: 1.25rem;
    color: var(--zk-primary, #1B4B6E);
}
.zk-faq__item[open] .zk-faq__q::after {
    content: '\2212';
}

.zk-faq__a {
    margin-top: 10px;
    color: var(--zk-text-muted, #5A5A5A);
    line-height: 1.6;
}
.zk-faq__a p {
    margin: 0 0 10px 0;
}
.zk-faq__a p:last-child {
    margin-bottom: 0;
}

/* Single-tool page layout (used by templates/single-zb_tool.php) */
.zk-tool-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px 16px 64px;
}
.zk-breadcrumb__list {
    display: flex;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    font-size: 0.875rem;
    color: var(--zk-text-muted, #5A5A5A);
}
.zk-breadcrumb__list a {
    color: var(--zk-text-muted, #5A5A5A);
}
.zk-tool-page__title {
    font-family: var(--zk-font-heading, 'Fira Sans', sans-serif);
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    margin: 0 0 6px 0;
}
.zk-tool-page__formula {
    font-variant-numeric: tabular-nums;
    color: var(--zk-text-muted, #5A5A5A);
    margin: 0 0 24px 0;
}
.zk-tool-page__layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 40px;
    margin-top: 40px;
}
.zk-content-section {
    margin-bottom: 32px;
}
.zk-content-section h2 {
    font-family: var(--zk-font-heading, 'Fira Sans', sans-serif);
}
.zk-tool-hero .zk-content-section,
.zk-conversion-table {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--zk-border, #D8D8D4);
    text-align: left;
}
.zk-tool-hero .zk-content-section h2,
.zk-conversion-table h2 {
    font-family: var(--zk-font-heading, 'Fira Sans', sans-serif);
    font-size: 1.375rem;
    margin: 0 0 12px 0;
}
.zk-tool-hero .zk-content-section h3,
.zk-conversion-table h3 {
    font-family: var(--zk-font-heading, 'Fira Sans', sans-serif);
    font-size: 1.0625rem;
    margin: 20px 0 8px 0;
}
.zk-tool-hero .zk-content-section p,
.zk-conversion-table p {
    color: var(--zk-text-muted, #5A5A5A);
    line-height: 1.6;
    margin: 0 0 10px 0;
}
.zk-table-note {
    font-size: 0.875rem;
}
@media (max-width: 860px) {
    .zk-tool-page__layout {
        grid-template-columns: 1fr;
    }
}

/* Mode switch (Stundenlohnrechner: Gehalt <-> Stundenlohn tabs) */
.zk-mode-switch {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.zk-mode-btn {
    flex: 1;
    font-family: var(--zk-font-body, 'Source Sans 3', sans-serif);
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 10px 12px;
    min-height: 44px;
    border: 1px solid var(--zk-border, #D8D8D4);
    border-radius: var(--zk-radius-sm, 2px);
    background: var(--zk-bg-white, #fff);
    color: var(--zk-text-muted, #5A5A5A);
    cursor: pointer;
}
.zk-mode-btn--active {
    background: var(--zk-primary, #1B4B6E);
    border-color: var(--zk-primary, #1B4B6E);
    color: #fff;
}
.zk-mode-block--hidden {
    display: none;
}

/* Checkbox fields */
.zk-field--checkbox label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    cursor: pointer;
}
.zk-field--checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Wage quick-select chips (Stundenlohnrechner reverse mode) */
.zk-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.zk-chip {
    font-family: var(--zk-font-body, 'Source Sans 3', sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 6px 12px;
    min-height: 32px;
    border: 1px solid var(--zk-border, #D8D8D4);
    border-radius: var(--zk-radius-sm, 2px);
    background: var(--zk-bg-white, #fff);
    color: var(--zk-primary, #1B4B6E);
    cursor: pointer;
}
.zk-chip--active,
.zk-chip:hover {
    border-color: var(--zk-primary, #1B4B6E);
    background: var(--zk-bg-subtle, #F2F2F0);
}

/* Result panel disclaimer line */
.zk-result__disclaimer {
    margin: 10px 0 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--zk-border, #D8D8D4);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--zk-text-muted, #5A5A5A);
}

/* Überstunden bucket fieldset */
.zk-ueberstunden-buckets {
    border: none;
    padding: 0;
    margin: 0 0 20px 0;
}
.zk-ueberstunden-buckets legend {
    font-weight: 700;
    font-family: var(--zk-font-heading, 'Fira Sans', sans-serif);
    padding: 0 0 8px 0;
}

/* Content sections rendered directly inside a tool page (not wrapped in
   .zk-tool-hero on single-tool pages) still need the muted-paragraph /
   heading treatment used sitewide. */
.zk-tool-page__content .zk-content-section h2,
.zk-tool-page .zk-content-section h2 {
    font-family: var(--zk-font-heading, 'Fira Sans', sans-serif);
    font-size: 1.375rem;
    margin: 0 0 12px 0;
}
.zk-tool-page__content .zk-content-section h3,
.zk-tool-page .zk-content-section h3 {
    font-family: var(--zk-font-heading, 'Fira Sans', sans-serif);
    font-size: 1.0625rem;
    margin: 20px 0 8px 0;
}
.zk-tool-page__content .zk-content-section p,
.zk-tool-page .zk-content-section p {
    color: var(--zk-text-muted, #5A5A5A);
    line-height: 1.6;
    margin: 0 0 10px 0;
}
.zk-tool-page__content .zk-content-section a,
.zk-tool-page .zk-content-section a {
    color: var(--zk-primary, #1B4B6E);
    font-weight: 600;
}

/* ===========================================================
   Added for Pendlerpauschale-Rechner / Gleitzeitrechner /
   Dezimalstunden-Rechner (2026-08-28). Reuses all design tokens
   already defined above — no new color/spacing system introduced.
   =========================================================== */

.zk-field__hint {
    font-size: 0.8125rem;
    color: var(--zk-text-muted, #5A5A5A);
    margin: 2px 0 0 0;
}

.zk-radio-group {
    border: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.zk-radio-group legend {
    font-weight: 700;
    font-family: var(--zk-font-heading, 'Fira Sans', sans-serif);
    padding: 0 0 6px 0;
}
.zk-radio {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9375rem;
    cursor: pointer;
}
.zk-radio input[type="radio"] {
    margin-top: 3px;
}

.zk-result__disclaimer {
    margin: 12px 0 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--zk-border, #D8D8D4);
    font-size: 0.8125rem;
    color: var(--zk-text-muted, #5A5A5A);
    line-height: 1.5;
}

/* Gleitzeitrechner mode tabs */
.zk-mode-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--zk-border, #D8D8D4);
}
.zk-mode-tab {
    font-family: var(--zk-font-body, 'Source Sans 3', sans-serif);
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 10px 18px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--zk-text-muted, #5A5A5A);
    cursor: pointer;
    min-height: 44px;
}
.zk-mode-tab--active {
    color: var(--zk-primary, #1B4B6E);
    border-bottom-color: var(--zk-primary, #1B4B6E);
}

.zk-konto-table-wrap {
    overflow-x: auto;
    margin: 16px 0;
}
.zk-konto-table {
    min-width: 520px;
}
.zk-konto-table input[type="number"] {
    width: 100%;
    min-width: 64px;
    padding: 6px 8px;
    border: 1px solid var(--zk-border, #D8D8D4);
    border-radius: var(--zk-radius-sm, 2px);
    font-family: var(--zk-font-body, 'Source Sans 3', sans-serif);
    font-variant-numeric: tabular-nums;
}
.zk-konto-row--hidden {
    display: none;
}
.zk-konto-diff,
.zk-konto-balance {
    font-size: 0.9375rem;
}

/* Dezimalstunden bidirectional converter layout */
.zk-field-row--converter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 8px;
}
.zk-converter-col__title {
    font-family: var(--zk-font-heading, 'Fira Sans', sans-serif);
    font-size: 1.125rem;
    margin: 0 0 12px 0;
}
@media (max-width: 700px) {
    .zk-field-row--converter {
        grid-template-columns: 1fr;
    }
}

.zk-additions-rechner {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--zk-border, #D8D8D4);
}
.zk-sum-table {
    margin-bottom: 16px;
}

/* Prevents wide reference tables (4+ columns) from forcing horizontal
   scroll on the whole page at narrow widths — the table scrolls inside
   this wrapper instead of pushing document body width. */
.zk-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.zk-sum-table input[type="number"] {
    width: 100%;
    min-width: 60px;
    padding: 6px 8px;
    border: 1px solid var(--zk-border, #D8D8D4);
    border-radius: var(--zk-radius-sm, 2px);
    font-family: var(--zk-font-body, 'Source Sans 3', sans-serif);
}

/* ------------------------------------------------------------------
   USP row ("Warum diesen Rechner nutzen") — honest differentiators
   only (instant results, formula/legal citation, client-side privacy,
   free), never fabricated review counts/star ratings. Flat bordered
   cards, no resting shadow, matches the Neue-Sachlichkeit spec.
   ------------------------------------------------------------------ */
.zk-usp-section {
    margin: 32px 0 40px 0;
    padding-top: 32px;
    border-top: 1px solid var(--zk-border, #D8D8D4);
}
.zk-usp-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.zk-usp {
    border: 1px solid var(--zk-border, #D8D8D4);
    border-radius: var(--zk-radius-md, 3px);
    background: var(--zk-bg-white, #fff);
    padding: 18px 16px;
    text-align: left;
}
.zk-usp__icon {
    display: inline-block;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--zk-accent, #C46A1E);
    margin-bottom: 8px;
}
.zk-usp h3 {
    font-family: var(--zk-font-heading, 'Fira Sans', sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0 0 6px 0;
}
.zk-usp p {
    font-size: 0.875rem;
    color: var(--zk-text-muted, #5A5A5A);
    line-height: 1.5;
    margin: 0;
}
@media (max-width: 860px) {
    .zk-usp-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .zk-usp-row { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   "So funktioniert's" step-card row — numbered cards, sharp corners,
   1px border as the separator (not a floating shadow-card).
   ------------------------------------------------------------------ */
.zk-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 20px 0 28px 0;
}
.zk-step {
    position: relative;
    border: 1px solid var(--zk-border, #D8D8D4);
    border-radius: var(--zk-radius-md, 3px);
    background: var(--zk-bg-white, #fff);
    padding: 20px 16px 16px 16px;
}
.zk-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--zk-radius-pill, 999px);
    background: var(--zk-primary, #1B4B6E);
    color: #fff;
    font-family: var(--zk-font-heading, 'Fira Sans', sans-serif);
    font-weight: 700;
    font-size: 0.9375rem;
    margin-bottom: 10px;
}
.zk-step h3 {
    font-size: 1rem;
    margin: 0 0 8px 0;
}
.zk-step p {
    font-size: 0.9375rem;
    color: var(--zk-text-muted, #5A5A5A);
    line-height: 1.55;
    margin: 0 0 8px 0;
}
.zk-step p:last-child {
    margin-bottom: 0;
}
@media (max-width: 860px) {
    .zk-steps { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   Legal reference box (§4 ArbZG break-rules table) — visually distinct
   bordered container with a small heading badge, not just another H2
   in the prose flow. Matches the German trust-signal research finding
   ("show the calculation basis" beats testimonials).
   ------------------------------------------------------------------ */
.zk-law-box {
    position: relative;
    border: 1px solid var(--zk-border, #D8D8D4);
    border-left: 4px solid var(--zk-primary, #1B4B6E);
    border-radius: var(--zk-radius-md, 3px);
    background: var(--zk-bg-subtle, #F2F2F0);
    padding: 28px 24px 24px 24px;
}
.zk-law-box__badge {
    display: inline-block;
    font-family: var(--zk-font-body, 'Source Sans 3', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--zk-primary, #1B4B6E);
    border-radius: var(--zk-radius-sm, 2px);
    padding: 4px 10px;
    margin-bottom: 12px;
}
.zk-law-box .zk-table thead th {
    background: var(--zk-bg-white, #fff);
}
.zk-law-box .zk-table tbody tr:nth-child(even) {
    background: var(--zk-bg-white, #fff);
}

/* ------------------------------------------------------------------
   Definition-card grid (Vollzeit / Teilzeit / Gleitzeit / Schichtarbeit)
   — one bordered card per term instead of sequential H3 paragraphs.
   ------------------------------------------------------------------ */
.zk-def-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 16px;
}
.zk-def-card {
    border: 1px solid var(--zk-border, #D8D8D4);
    border-radius: var(--zk-radius-md, 3px);
    background: var(--zk-bg-white, #fff);
    padding: 20px;
}
.zk-def-card h3 {
    font-size: 1.0625rem;
    margin: 0 0 8px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--zk-accent, #C46A1E);
    display: inline-block;
}
.zk-def-card p {
    font-size: 0.9375rem;
    color: var(--zk-text-muted, #5A5A5A);
    line-height: 1.55;
    margin: 0 0 8px 0;
}
.zk-def-card p:last-child {
    margin-bottom: 0;
}
@media (max-width: 700px) {
    .zk-def-grid { grid-template-columns: 1fr; }
}