@font-face {
    font-family: "Montserrat Local";
    src: url("../fonts/montserrat-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}

@font-face {
    font-family: "Prompt Local";
    src: url("../fonts/prompt-800-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: "Inter Local";
    src: url("../fonts/inter-latin.woff2") format("woff2"),
         url("../fonts/inter-regular-latin.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Inter Local";
    src: url("../fonts/inter-extrabold-latin.ttf") format("truetype");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: "Inter-ExtraBold";
    src: url("../fonts/inter-extrabold-latin.ttf") format("truetype");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: "Inter-Regular";
    src: url("../fonts/inter-latin.woff2") format("woff2"),
         url("../fonts/inter-regular-latin.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "GARAN Inter Regular";
    src: url("../fonts/inter-latin.woff2") format("woff2"),
         url("../fonts/inter-regular-latin.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "GARAN Inter ExtraBold";
    src: url("../fonts/inter-extrabold-latin.ttf") format("truetype");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

:root {
    --avery-blue: #0038a5;
    --avery-blue-deep: #03178b;
    --avery-blue-light: #e8f0fe;
    --avery-cream: #f9f4ea;
    --avery-yellow: #ffd20c;
    --avery-magenta: #c720a7;
    --avery-cyan: #3bcfe5;
    --avery-ink: #101322;
    --avery-muted: #555968;
    --avery-line: #d9d9df;
    --avery-line-subtle: #e8eaee;
    --avery-white: #ffffff;
    --avery-success: #087a4b;
    --avery-success-light: #edf8f2;
    --avery-warning: #8b4a00;
    --avery-warning-light: #fff6eb;
    --avery-danger: #9a2f19;
    --avery-danger-light: #fef1ee;
    --avery-surface-subtle: #f4f5f7;
    --avery-surface-card: #ffffff;

    --eu-blue: #003399;
    --eu-yellow: #ffed00;
    --eu-black: #000000;
    --eu-white: #ffffff;

    --font-ui: "Montserrat Local", Montserrat, Arial, sans-serif;
    --font-display: "Prompt Local", "Arial Black", sans-serif;
    --font-eu: "Inter Local", Inter, Arial, sans-serif;
    --site-header-height: 4.25rem;
    --shell: 78rem;
    --radius-xs: 0.375rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.25rem;
    --shadow-card: 0 4px 20px -2px rgba(16, 19, 34, 0.08), 0 1px 3px rgba(16, 19, 34, 0.04);
    --shadow-floating: 0 12px 32px -4px rgba(3, 23, 139, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-paper: 0 12px 28px -4px rgba(16, 19, 34, 0.14), 0 2px 6px rgba(16, 19, 34, 0.06);
    --focus: 0 0 0 0.22rem var(--avery-yellow), 0 0 0 0.4rem var(--avery-blue-deep);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-block: 5.5rem 7rem;
}

body {
    margin: 0;
    background: var(--avery-white);
    color: var(--avery-ink);
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.65;
    overflow-wrap: break-word;
}

body.has-sticky-cta {
    padding-block-end: 6rem;
}

img {
    display: block;
    max-inline-size: 100%;
}

a {
    color: inherit;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.18em;
}

button,
input {
    font: inherit;
}

button,
summary,
label,
a {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

[id] {
    scroll-margin-block-start: 5.5rem;
}

[hidden] {
    display: none !important;
}

.shell {
    inline-size: min(100% - 2.5rem, var(--shell));
    margin-inline: auto;
}

.sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    z-index: 1000;
    padding: 0.75rem 1rem;
    background: var(--avery-yellow);
    color: var(--avery-ink);
    font-weight: 700;
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-card);
    transform: translateY(-180%);
    transition: transform 160ms ease;
}

.skip-link:focus {
    transform: translateY(0);
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */

.site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--avery-line);
    box-shadow: 0 1px 4px rgba(16, 19, 34, 0.04);
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease;
}

.site-header.is-hidden {
    transform: translateY(-100%);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    min-block-size: 4.25rem;
    padding-block: 0.55rem;
}

.text-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--avery-blue-deep);
    text-decoration: none;
    flex-shrink: 0;
}

.text-lockup__logo {
    width: auto;
    height: 1.85rem;
    max-height: 32px;
    color: var(--avery-blue-deep);
    flex-shrink: 0;
}

.text-lockup__divider {
    display: inline-block;
    width: 1px;
    height: 1.85rem;
    background-color: var(--border-soft, #d1d5db);
    opacity: 0.6;
    flex-shrink: 0;
}

.text-lockup__badge {
    padding: 0.25rem 0.55rem;
    background: var(--avery-blue-deep);
    border-radius: var(--radius-xs);
    color: var(--avery-yellow);
    font-family: var(--font-ui);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.text-lockup__text {
    display: grid;
    line-height: 1.1;
}

.text-lockup__product {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--avery-text);
}

.text-lockup__brand {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--avery-blue);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1.25rem;
    font-size: 0.82rem;
    font-weight: 700;
}

.site-nav a {
    min-block-size: 2.5rem;
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-xs);
    color: var(--avery-blue-deep);
    text-decoration: none;
    transition: color 140ms ease, background-color 140ms ease;
}

.site-nav a:hover {
    color: var(--avery-blue);
    background: var(--avery-surface-subtle);
}

.header-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.button--nav-inquiry {
    min-block-size: 2.4rem;
    padding: 0.45rem 1.1rem;
    background: var(--avery-blue);
    color: var(--avery-white);
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0, 56, 165, 0.2);
    transition: background-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.button--nav-inquiry:hover {
    background: var(--avery-blue-deep);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(3, 23, 139, 0.25);
}

.button--nav-cta {
    min-block-size: 2.4rem;
    padding: 0.45rem 1.1rem;
    background: var(--avery-white);
    border: 1.5px solid var(--avery-blue);
    color: var(--avery-blue-deep);
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px) scale(0.96);
    transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease, background-color 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.button--nav-cta.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.button--nav-cta.is-visible:hover {
    background: var(--avery-blue-light);
    border-color: var(--avery-blue-deep);
    color: var(--avery-blue-deep);
    transform: translateY(-1px);
}

.no-js .button--nav-cta {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

/* Burger Button */
.burger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    inline-size: 2.65rem;
    block-size: 2.65rem;
    padding: 0.45rem;
    background: var(--avery-surface-subtle);
    border: 1px solid var(--avery-line);
    border-radius: var(--radius-sm);
    color: var(--avery-blue-deep);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.burger-btn:hover {
    background: var(--avery-blue-light);
    border-color: var(--avery-blue);
}

.burger-btn:focus-visible {
    box-shadow: var(--focus);
}

.burger-btn__bar {
    display: block;
    inline-size: 1.25rem;
    block-size: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 200ms ease, opacity 200ms ease;
}

/* Mobile Nav Drawer */
.mobile-nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 1200;
}

.mobile-nav-drawer[hidden] {
    display: none;
}

.mobile-nav-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 19, 34, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: modal-fade-in 200ms ease-out;
}

.mobile-nav-sheet {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    block-size: 100%;
    inline-size: min(100% - 2.5rem, 21rem);
    background: var(--avery-white);
    box-shadow: -8px 0 32px rgba(16, 19, 34, 0.22);
    display: flex;
    flex-direction: column;
    z-index: 1;
    animation: drawerSlideIn 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes drawerSlideIn {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.mobile-nav-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border-block-end: 1px solid var(--avery-line);
    background: var(--avery-surface-subtle);
    flex-shrink: 0;
}

.mobile-nav-brand {
    display: grid;
    line-height: 1.15;
}

.mobile-nav-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--avery-blue-deep);
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.mobile-nav-subtitle {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--avery-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mobile-nav-close {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    background: var(--avery-white);
    border: 1px solid var(--avery-line);
    border-radius: 50%;
    color: var(--avery-muted);
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

.mobile-nav-close:hover {
    background: var(--avery-danger-light);
    color: var(--avery-danger);
    border-color: var(--avery-danger);
}

.mobile-nav-close:focus-visible {
    box-shadow: var(--focus);
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    padding: 0.85rem 0.65rem;
    flex-grow: 1;
    overflow-y: auto;
    gap: 0.25rem;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.8rem 1rem;
    color: var(--avery-ink);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.mobile-nav-link:hover,
.mobile-nav-link:focus-visible {
    background: var(--avery-blue-light);
    color: var(--avery-blue-deep);
    transform: translateX(4px);
}

.mobile-nav-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.6rem;
    block-size: 1.6rem;
    background: var(--avery-blue-light);
    color: var(--avery-blue);
    font-size: 0.68rem;
    font-weight: 800;
    border-radius: var(--radius-xs);
    flex-shrink: 0;
}

.mobile-nav-link:hover .mobile-nav-num {
    background: var(--avery-blue);
    color: var(--avery-white);
}

.mobile-nav-text {
    flex-grow: 1;
}

.mobile-nav-sheet__footer {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem 1.25rem;
    border-block-start: 1px solid var(--avery-line);
    background: var(--avery-surface-subtle);
    flex-shrink: 0;
}

.button--full {
    inline-size: 100%;
}

/* ==========================================================================
   Hero Section & Trust Bar
   ========================================================================== */

.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--avery-cream) 0%, #f4eee2 100%);
    border-block-end: 1px solid #ddd5c5;
    padding-block: clamp(3rem, 6vw, 5.5rem);
}

.hero-grid {
    display: grid;
    gap: 2.5rem;
}

.hero-copy {
    align-self: start;
}

.hero-compliance-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.85rem;
    margin-block-end: 1.25rem;
    background: var(--avery-white);
    border: 1px solid #d5cfbf;
    border-radius: 999px;
    color: var(--avery-blue-deep);
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.compliance-pulse {
    inline-size: 0.55rem;
    block-size: 0.55rem;
    background: var(--avery-success);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(8, 122, 75, 0.4);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(8, 122, 75, 0.5); }
    70% { box-shadow: 0 0 0 7px rgba(8, 122, 75, 0); }
    100% { box-shadow: 0 0 0 0 rgba(8, 122, 75, 0); }
}

h1,
h2,
h3,
p {
    margin-block-start: 0;
}

h1,
h2 {
    text-wrap: balance;
}

h1 {
    max-inline-size: 46rem;
    margin-block-end: 1.25rem;
    color: var(--avery-blue-deep);
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.02;
    text-transform: uppercase;
}

h1 span {
    color: var(--avery-blue);
}

h2 {
    margin-block-end: 1.15rem;
    color: var(--avery-blue-deep);
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 4vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
}

h3 {
    color: var(--avery-blue-deep);
    font-size: 1.15rem;
    line-height: 1.3;
}

.hero-lead {
    max-inline-size: 42rem;
    color: #2b303d;
    font-size: clamp(1.02rem, 1.8vw, 1.2rem);
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    margin-block: 1.75rem 1.5rem;
}

.button {
    min-block-size: 3.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.7rem 1.4rem;
    border: 2px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.button:hover:not(.button--disabled):not(:disabled) {
    transform: translateY(-2px);
}

.button--primary {
    background: var(--avery-blue);
    color: var(--avery-white);
    box-shadow: 0 4px 14px rgba(0, 56, 165, 0.28);
}

.button--primary:hover:not(.button--disabled):not(:disabled) {
    background: var(--avery-blue-deep);
    box-shadow: 0 6px 18px rgba(3, 23, 139, 0.35);
}

.button--secondary {
    background: var(--avery-white);
    border-color: var(--avery-blue);
    color: var(--avery-blue-deep);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.button--secondary:hover {
    background: var(--avery-blue-light);
}

.button--ghost {
    background: transparent;
    border-color: #beb7a7;
    color: var(--avery-blue-deep);
}

.button--ghost:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--avery-blue-deep);
}

.button--ghost-light {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--avery-white);
}

.button--ghost-light:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--avery-white);
}

.button--sm {
    min-block-size: 2.35rem;
    padding: 0.4rem 0.95rem;
    font-size: 0.76rem;
}

.button--disabled,
.button:disabled {
    background: #8b8f9e;
    border-color: transparent;
    color: var(--avery-white);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-text-mobile {
    display: none;
}

.btn-text-desktop {
    display: inline;
}

@media (max-width: 32rem) {
    .btn-text-desktop {
        display: none;
    }
    .btn-text-mobile {
        display: inline;
    }
}

/* Trusted Shops Rating Badge (Native Emulation) */
.hero-trust-rating {
    display: flex;
    align-items: center;
    min-block-size: 28px;
    margin-block-start: 1.15rem;
}

.ts-rating-badge {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.55rem;
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.2;
    color: var(--avery-navy, #001f3f);
    transition: opacity 0.15s ease;
}

.ts-rating-badge:hover {
    opacity: 0.92;
}

.ts-rating-badge:hover .ts-rating-count {
    text-decoration: underline;
}

.ts-rating-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.ts-star {
    inline-size: 18px;
    block-size: 18px;
    flex-shrink: 0;
    display: block;
}

.ts-rating-score {
    font-weight: 800;
    font-size: 1.05rem;
    color: #000000;
    letter-spacing: -0.01em;
}

.ts-rating-label {
    font-weight: 400;
    color: #111827;
}

.ts-rating-count {
    color: #005EA8;
    font-weight: 400;
    margin-inline-start: 0.15rem;
}

.ts-seal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: 0.2rem;
    flex-shrink: 0;
}

/* Trust Bar */
.trust-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    margin-block-start: 1.5rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #ddd7c9;
    border-radius: var(--radius-md);
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.trust-badge__icon {
    font-size: 1.25rem;
    line-height: 1;
}

.trust-badge__content {
    display: grid;
    line-height: 1.2;
}

.trust-badge__content strong {
    color: var(--avery-blue-deep);
    font-size: 0.76rem;
    font-weight: 700;
}

.trust-badge__content span {
    color: var(--avery-muted);
    font-size: 0.66rem;
}

/* ==========================================================================
   Workbench & GARAN Editor Card
   ========================================================================== */

.label-workbench {
    position: relative;
    scroll-margin-block-start: 5.5rem;
    padding: clamp(1.2rem, 3vw, 1.85rem);
    background: var(--avery-white);
    border: 1px solid #d4cdc1;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-paper);
}

.workbench-topline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-block-end: 0.5rem;
}

.workbench-topline h2 {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-transform: none;
}

.workbench-header-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}

.workbench-mode-switch {
    display: inline-flex;
    padding: 0.2rem;
    background: var(--avery-surface-subtle);
    border: 1px solid var(--avery-line);
    border-radius: var(--radius-sm);
    gap: 0.2rem;
}

.mode-toggle {
    padding: 0.25rem 0.6rem;
    background: transparent;
    border: none;
    border-radius: calc(var(--radius-sm) - 2px);
    color: var(--avery-muted);
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
    white-space: nowrap;
}

.mode-toggle:hover {
    color: var(--avery-ink);
}

.mode-toggle.is-active {
    background: var(--avery-white);
    color: var(--avery-blue-deep);
    box-shadow: 0 1px 3px rgba(16, 19, 34, 0.12);
}

.mode-toggle:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

.workbench-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.eyebrow,
.section-number,
.micro-label {
    margin: 0 0 0.4rem;
    color: var(--avery-blue-deep);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.status-chip {
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    white-space: nowrap;
}

.status-chip--primary {
    background: var(--avery-blue-light);
    color: var(--avery-blue-deep);
    border: 1px solid #c2d6ff;
}

.status-chip--neutral {
    background: var(--avery-surface-subtle);
    color: var(--avery-muted);
    border: 1px solid var(--avery-line);
}

.label-sheet {
    position: relative;
    inline-size: min(100%, 95mm);
    aspect-ratio: 95 / 100;
    margin: 1rem auto 1.25rem;
    background: var(--eu-white);
    box-shadow: 0 6px 18px rgba(16, 19, 34, 0.15);
    border-radius: 2px;
    overflow: hidden;
}

.label-sheet svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

.label-sheet svg .cls-1 { clip-path: url(#clippath-6); }
.label-sheet svg .cls-2 { clip-path: url(#clippath-7); }
.label-sheet svg .cls-3 {
    font-family: "GARAN Inter ExtraBold", "Inter Local", Inter, sans-serif;
    font-size: 80px;
    font-variation-settings: 'wght' 800, 'slnt' 0;
    font-weight: 800;
    letter-spacing: -0.03em;
    fill: #231f20;
}
.label-sheet svg .cls-4 { fill: #231f20; }
.label-sheet svg .cls-5 {
    font-family: "GARAN Inter Regular", "Inter Local", Inter, sans-serif;
    font-size: 9px;
    font-variation-settings: 'wght' 400, 'slnt' 0;
    font-weight: 400;
    fill: #231f20;
}
.label-sheet svg .cls-6 { clip-path: url(#clippath-4); }
.label-sheet svg .cls-7 {
    fill: #ffffff;
    stroke-width: 0.5px;
    stroke: #231f20;
    stroke-miterlimit: 10;
}
.label-sheet svg .cls-8 { fill: #ffffff; }
.label-sheet svg .cls-9 {
    stroke-width: 0.5px;
    stroke: #231f20;
    stroke-miterlimit: 10;
    fill: none;
}
.label-sheet svg .cls-10 {
    stroke: #231f20;
    stroke-miterlimit: 10;
    fill: none;
}
.label-sheet svg .cls-11,
.label-sheet svg .cls-12 { fill: none; }
.label-sheet svg .cls-12 { clip-path: url(#clippath); }
.label-sheet svg .cls-13 { clip-path: url(#clippath-1); }
.label-sheet svg .cls-14 { clip-path: url(#clippath-5); }
.label-sheet svg .cls-15 { clip-path: url(#clippath-8); }
.label-sheet svg .cls-16 { clip-path: url(#clippath-3); }
.label-sheet svg .cls-17 { fill: #034ea2; }
.label-sheet svg .cls-18 { fill: #010101; }
.label-sheet svg .cls-19 { letter-spacing: -0.06em; }
.label-sheet svg .cls-20 { clip-path: url(#clippath-2); }
.label-sheet svg .cls-21 { fill: #fff200; }
.label-sheet svg .cls-22 { letter-spacing: 0em; }

.label-sheet[data-appearance="black-white"] svg .cls-17 { fill: #010101; }
.label-sheet[data-appearance="black-white"] svg .cls-18 { letter-spacing: -0.06em; }
.label-sheet[data-appearance="black-white"] svg .cls-19 { clip-path: url(#clippath-2); }
.label-sheet[data-appearance="black-white"] svg .cls-20 { letter-spacing: 0em; }

/* Compact Nested Display SVG Styles (Official EU Commission Annex II) */
.label-sheet--compact {
    inline-size: 100%;
    max-inline-size: 100%;
    aspect-ratio: 260 / 52;
    margin: 1.5rem 0 1.25rem;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(16, 19, 34, 0.12);
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.label-sheet--compact:hover,
.label-sheet--compact:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 51, 153, 0.18);
}

.nested-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: -0.5rem auto 1rem;
    color: var(--avery-muted);
    font-size: 0.72rem;
    text-align: center;
}

.nested-hint svg {
    flex-shrink: 0;
    inline-size: 14px;
    block-size: 14px;
    color: var(--eu-blue);
}

.label-sheet svg .compact-bg { fill: #ffffff; stroke: #231f20; stroke-width: 1; }
.label-sheet svg .compact-dur-text { font-family: "GARAN Inter ExtraBold", "Inter Local", Inter, sans-serif; font-size: 34px; font-weight: 800; fill: #231f20; letter-spacing: -0.03em; }
.label-sheet svg .compact-cal-box { fill: #ffffff; stroke: #231f20; stroke-width: 0.75; }
.label-sheet svg .compact-cal-lug { fill: #ffffff; stroke: #231f20; stroke-width: 0.75; }
.label-sheet svg .compact-cal-line { stroke: #231f20; stroke-width: 0.75; }
.label-sheet svg .compact-cal-text { font-family: "GARAN Inter ExtraBold", "Inter Local", Inter, sans-serif; font-size: 7.5px; font-weight: 800; fill: #231f20; letter-spacing: -0.03em; text-anchor: middle; }
.label-sheet svg .compact-divider { stroke: #231f20; stroke-width: 0.75; }
.label-sheet svg .compact-garan-path { fill: #231f20; }
.label-sheet svg .compact-check-circle { fill: #231f20; }
.label-sheet svg .compact-check-path { fill: #ffffff; }
.label-sheet svg .compact-eu-banner { fill: #034ea2; }
.label-sheet svg .compact-star { fill: #fff200; }
.label-sheet svg .compact-shield-g { fill: #ffffff; }

.label-sheet[data-appearance="black-white"] svg .compact-eu-banner { fill: #010101; }
.label-sheet[data-appearance="black-white"] svg .compact-star { fill: #ffffff; }

/* Nested Expansion Modal */
.nested-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.nested-modal[hidden] {
    display: none;
}

.nested-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 19, 34, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: modal-fade-in 180ms ease-out;
}

.nested-modal-card {
    position: relative;
    z-index: 1;
    inline-size: min(100%, 420px);
    background: #ffffff;
    border-radius: var(--radius-md);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
    padding: 1.25rem;
    animation: modal-pop-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nested-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-block-end: 0.75rem;
}

.nested-modal-header h3 {
    margin: 0.15rem 0 0;
    font-size: 1.1rem;
    color: var(--avery-ink);
}

.nested-modal-close {
    border: none;
    background: #f0f2f7;
    border-radius: 50%;
    inline-size: 32px;
    block-size: 32px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    line-height: 1;
    color: #4a5060;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.nested-modal-close:hover {
    background: #e2e6f0;
    color: var(--avery-ink);
}

.nested-modal-body .label-sheet {
    margin: 0.5rem auto;
    max-inline-size: 320px;
}

.nested-modal-legal-note {
    margin: 0.75rem 0 0;
    padding-block-start: 0.65rem;
    border-block-start: 1px solid #eef1f6;
    font-size: 0.68rem;
    color: var(--avery-muted);
    line-height: 1.4;
}

@keyframes modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modal-pop-in {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ==========================================================================
   Pre-Download Instruction Modal
   ========================================================================== */

.download-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: clamp(0.75rem, 3vw, 2rem);
}

.download-modal[hidden] {
    display: none;
}

.download-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 19, 34, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: modal-fade-in 180ms ease-out;
}

.download-modal-drag-handle {
    display: none;
}

.download-modal-card {
    position: relative;
    z-index: 1;
    inline-size: min(100%, 1080px);
    max-block-size: min(92vh, 920px);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32), 0 4px 16px rgba(16, 19, 34, 0.08);
    border: 1px solid var(--avery-line);
    animation: modal-pop-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.download-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2.25rem);
    border-block-end: 1px solid var(--avery-line-subtle);
    background: var(--avery-white);
    flex-shrink: 0;
}

.download-modal-header h2 {
    margin: 0.25rem 0 0;
    font-size: clamp(1.25rem, 2.2vw, 1.65rem);
    color: var(--avery-ink);
    line-height: 1.25;
}

.download-modal-close {
    border: none;
    background: #f0f2f7;
    border-radius: 50%;
    inline-size: 36px;
    block-size: 36px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    line-height: 1;
    color: #4a5060;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.download-modal-close:hover {
    background: #e2e6f0;
    color: var(--avery-ink);
    transform: scale(1.05);
}

.download-modal-close:focus-visible {
    outline: 2px solid var(--avery-blue);
    outline-offset: 2px;
}

.download-modal-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 3vw, 2.25rem);
    background: var(--avery-cream);
}

.download-modal-lead {
    margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
    font-size: clamp(0.95rem, 1.5vw, 1.05rem);
    color: var(--avery-muted);
    max-inline-size: 52rem;
    line-height: 1.55;
}

.guide-card--modal {
    box-shadow: 0 1px 4px rgba(16, 19, 34, 0.04);
}

.guide-card__badge-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.guide-card__status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.5rem;
    background: rgba(0, 56, 165, 0.08);
    border: 1px solid rgba(0, 56, 165, 0.18);
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--avery-blue-deep);
    transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease;
    flex-shrink: 0;
}

.status-dot-pulse {
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background-color: var(--avery-blue);
    box-shadow: 0 0 0 0 rgba(0, 56, 165, 0.5);
    animation: statusPulse 1.6s infinite ease-in-out;
}

@keyframes statusPulse {
    0% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(0, 56, 165, 0.6);
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 6px rgba(0, 56, 165, 0);
    }
    100% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(0, 56, 165, 0);
    }
}

.guide-card__icon--pulse {
    animation: iconFloat 2s ease-in-out infinite;
}

@keyframes iconFloat {
    0%, 100% {
        transform: translateY(0);
        color: var(--avery-blue);
    }
    50% {
        transform: translateY(-2px);
        color: var(--avery-blue-deep);
    }
}

/* Chasing Border Beam Animation on Step 1 */
.guide-card--processing {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--avery-white);
    border: 1.5px solid transparent;
}

.guide-card--processing::before {
    content: '';
    position: absolute;
    inset: -150%;
    z-index: -2;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 280deg,
        var(--avery-blue) 330deg,
        var(--avery-blue-deep) 360deg
    );
    animation: borderBeamRotate 3s linear infinite;
}

.guide-card--processing::after {
    content: '';
    position: absolute;
    inset: 1.5px;
    z-index: -1;
    background: #ffffff;
    border-radius: calc(var(--radius-md) - 1.5px);
    transition: background-color 200ms ease;
}

@keyframes borderBeamRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.guide-card--processing.is-completed {
    border-color: #58b087;
    box-shadow: 0 0 0 1px #58b087, 0 4px 14px rgba(46, 125, 50, 0.08);
}

.guide-card--processing.is-completed::before {
    animation: none;
    display: none;
}

.guide-card--processing.is-completed .guide-card__status-pill {
    background: var(--avery-success-light);
    border-color: rgba(46, 125, 50, 0.3);
    color: var(--avery-success);
}

.guide-card--processing.is-completed .status-dot-pulse {
    background-color: var(--avery-success);
    box-shadow: none;
    animation: none;
}

.guide-card--processing.is-completed .guide-card__icon--pulse {
    animation: none;
    color: var(--avery-success);
}

/* Merged 2/3 Step Card for Bulk Export in Download Guide Modal */
.guide-card--merged-b2b {
    background: linear-gradient(135deg, #f8faff 0%, #f0f5ff 100%);
    border: 1.5px solid #0038a8;
    box-shadow: 0 4px 16px rgba(0, 56, 168, 0.08);
}

@media (min-width: 48rem) {
    .print-guide-grid .guide-card--merged-b2b {
        grid-column: span 2;
    }
}

.guide-card__badge--merged {
    inline-size: auto !important;
    padding-inline: 0.65rem !important;
    background: var(--avery-blue-deep) !important;
    color: var(--avery-yellow) !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.02em;
}

.guide-card__attachment-box {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-block: 0.85rem 0.5rem;
    padding: 0.65rem 0.85rem;
    background: rgba(0, 56, 168, 0.06);
    border: 1px dashed rgba(0, 56, 168, 0.25);
    border-radius: var(--radius-xs);
    font-size: 0.82rem;
    color: var(--avery-blue-deep);
    line-height: 1.45;
}

.guide-card__attachment-box .attachment-icon {
    font-size: 1rem;
    flex-shrink: 0;
    line-height: 1.2;
}

.guide-card__attachment-box .attachment-text strong {
    color: var(--avery-blue-deep);
}

.download-modal-b2b-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.15rem;
    background: var(--avery-blue-deep);
    color: var(--avery-white);
    border: 1px solid var(--avery-blue);
    border-radius: var(--radius-xs);
    font-weight: 700;
    text-decoration: none;
    transition: all 140ms ease;
}

.download-modal-b2b-btn:hover {
    background: #021355;
    color: var(--avery-yellow);
    box-shadow: 0 4px 12px rgba(0, 30, 98, 0.2);
    transform: translateY(-1px);
}

.download-modal-b2b-btn:focus-visible {
    outline: 2px solid var(--avery-yellow);
    outline-offset: 2px;
}

/* Primary Loading Bar Button in Modal */
.button--loading-bar {
    position: relative;
    overflow: hidden;
    min-inline-size: 14rem;
    transition: opacity 200ms ease, box-shadow 200ms ease, transform 150ms ease;
}

.button--loading-bar .btn-progress-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 0%;
    background: linear-gradient(90deg, #00256e 0%, #0038a8 60%, #0056d6 100%);
    z-index: 1;
    pointer-events: none;
    transition: width 80ms linear;
}

.button--loading-bar .btn-label-text {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 700;
}

.button--loading-bar:disabled {
    cursor: wait;
    opacity: 0.95;
    background: #001a4d;
}

.button--loading-bar.is-ready {
    cursor: pointer;
    animation: buttonReadyFlash 450ms ease-out;
}

@keyframes buttonReadyFlash {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 56, 165, 0.7);
        transform: scale(0.98);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(0, 86, 214, 0.3);
        transform: scale(1.02);
    }
    100% {
        box-shadow: var(--shadow-sm);
        transform: scale(1);
    }
}

.download-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 3vw, 2.25rem);
    border-block-start: 1px solid var(--avery-line);
    background: var(--avery-white);
    flex-shrink: 0;
}

.download-modal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.85rem;
}

/* Modal Inline Video Player */
.download-modal-video-box {
    margin-block-start: 1.25rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #08142c;
    border: 1.5px solid var(--avery-blue);
    box-shadow: 0 8px 28px rgba(0, 30, 98, 0.22);
    animation: modalVideoFadeIn 250ms ease-out;
}

.download-modal-video-box[hidden] {
    display: none;
}

@keyframes modalVideoFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.download-modal-video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.download-modal-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #000;
}

button.guide-card--video-btn {
    font-family: inherit;
    text-align: left;
    background: var(--avery-white);
    border: 1px solid #d0dcf5;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

button.guide-card--video-btn:hover {
    transform: translateY(-4px);
    border-color: var(--avery-blue);
    box-shadow: 0 8px 24px rgba(0, 56, 165, 0.12);
}

button.guide-card--video-btn:focus-visible {
    outline: 2px solid var(--avery-blue);
    outline-offset: 3px;
}

/* Mobile-First Download Modal Reflow (<= 48rem / 768px) */
@keyframes modalSheetSlideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 48rem) {
    .download-modal {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding: 0;
    }

    .download-modal-card {
        inline-size: 100%;
        max-inline-size: 100%;
        max-block-size: min(92vh, 92dvh);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border-inline: 0;
        border-block-end: 0;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
        animation: modalSheetSlideUp 260ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .download-modal-drag-handle {
        display: block;
        inline-size: 38px;
        block-size: 4px;
        margin: 0.65rem auto 0.15rem;
        background: #cbd5e1;
        border-radius: 999px;
        flex-shrink: 0;
    }

    .download-modal-header {
        padding: 0.6rem 1.15rem 0.75rem;
    }

    .download-modal-header h2 {
        font-size: 1.15rem;
        margin: 0.15rem 0 0;
    }

    .download-modal-close {
        inline-size: 32px;
        block-size: 32px;
        font-size: 1.35rem;
    }

    .download-modal-body {
        padding: 0.85rem 1.15rem 1rem;
    }

    .download-modal-lead {
        margin: 0 0 0.85rem;
        font-size: 0.84rem;
        line-height: 1.45;
    }

    /* Mobile Compact Stepper Timeline inside Modal */
    .download-modal-body .print-guide-grid {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }

    .download-modal-body .guide-card--modal {
        padding: 0.75rem 0.85rem;
        border-radius: var(--radius-sm);
        border: 1px solid #dbe4f6;
    }

    .download-modal-body .guide-card__header {
        margin-block-end: 0.35rem;
    }

    .download-modal-body .guide-card__badge {
        width: 1.6rem;
        height: 1.6rem;
        font-size: 0.76rem;
    }

    .download-modal-body .guide-card__icon svg {
        width: 22px;
        height: 22px;
    }

    .download-modal-body .guide-card__title {
        font-size: 0.94rem;
        margin: 0 0 0.2rem;
    }

    .download-modal-body .guide-card__desc {
        font-size: 0.78rem;
        line-height: 1.4;
    }

    .download-modal-body .guide-card__footer {
        margin-block-start: 0.45rem;
        padding-block-start: 0.35rem;
    }

    .download-modal-body .guide-card__action-hint {
        font-size: 0.76rem;
    }

    .download-modal-video-box {
        margin-block-start: 0.65rem;
        border-radius: var(--radius-sm);
    }

    /* Mobile Modal Sticky Daumenbereich Footer */
    .download-modal-footer {
        padding: 0.75rem 1.15rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
        background: #ffffff;
        border-block-start: 1px solid var(--avery-line);
    }

    .download-modal-actions {
        display: flex;
        flex-direction: column;
        inline-size: 100%;
        gap: 0.45rem;
    }

    .download-modal-actions .button {
        inline-size: 100%;
        justify-content: center;
        text-align: center;
    }

    .download-modal-actions .button--loading-bar {
        order: 1;
        min-inline-size: 100%;
        min-block-size: 2.85rem;
        font-size: 0.88rem;
        border-radius: var(--radius-xs);
    }

    .download-modal-actions #download-guide-cancel {
        order: 2;
        min-block-size: 2.25rem;
        padding: 0.35rem 0.75rem;
        font-size: 0.8rem;
        background: transparent;
        border-color: transparent;
        color: var(--avery-muted);
    }

    .download-modal-actions #download-guide-cancel:hover {
        background: rgba(16, 19, 34, 0.05);
        color: var(--avery-ink);
    }
}

/* ==========================================================================
   B2B Lead-Magnet Modal (>25 SKUs)
   ========================================================================== */

.b2b-lead-modal {
    position: fixed;
    inset: 0;
    z-index: 1150;
    display: grid;
    place-items: center;
    padding: clamp(0.75rem, 3vw, 2rem);
}

.b2b-lead-modal[hidden] {
    display: none;
}

.b2b-lead-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 12, 34, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: modal-fade-in 180ms ease-out;
}

.b2b-lead-modal__card {
    position: relative;
    z-index: 1;
    inline-size: min(100%, 760px);
    max-block-size: min(92vh, 880px);
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg, #071c6e 0%, #03114d 60%, #010a33 100%);
    color: var(--avery-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.16);
    animation: modal-pop-in 240ms cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.b2b-lead-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: clamp(1rem, 2vw, 1.4rem) clamp(1.25rem, 3vw, 2rem);
    border-block-end: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
}

.b2b-lead-modal__header .b2b-badge {
    margin-block-end: 0;
}

.b2b-lead-modal__close {
    border: none;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    inline-size: 36px;
    block-size: 36px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.b2b-lead-modal__close:hover {
    background: rgba(255, 255, 255, 0.25);
    color: var(--avery-white);
    transform: scale(1.05);
}

.b2b-lead-modal__close:focus-visible {
    outline: 2px solid var(--avery-cyan);
    outline-offset: 2px;
}

.b2b-lead-modal__body {
    flex-grow: 1;
    overflow-y: auto;
    padding: clamp(1.25rem, 2.5vw, 1.85rem) clamp(1.25rem, 3vw, 2rem);
}

.b2b-lead-tag-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-block-end: 0.5rem;
}

.b2b-lead-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.65rem;
    background: var(--avery-magenta);
    color: var(--avery-white);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.b2b-lead-sku-hint {
    font-size: 0.8rem;
    color: var(--avery-cyan);
    font-weight: 700;
}

.b2b-lead-modal__intro h2 {
    margin: 0.3rem 0 0.55rem;
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    color: var(--avery-white);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.b2b-lead-desc {
    margin: 0 0 clamp(1.25rem, 2vw, 1.65rem);
    font-size: clamp(0.88rem, 1.4vw, 0.96rem);
    color: #ced7ee;
    line-height: 1.55;
}

.b2b-trust-bar--modal {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.14);
    margin-block-end: 0;
    padding: 1.15rem 1.25rem;
}

.b2b-lead-view {
    display: flex;
    flex-direction: column;
    animation: modal-fade-in 180ms ease-out;
}

.b2b-lead-view[hidden] {
    display: none !important;
}

.b2b-form-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-block-size: 380px;
    gap: 1rem;
    color: #ced7ee;
    font-size: 0.92rem;
    font-weight: 600;
}

.b2b-form-loader[hidden] {
    display: none !important;
}

.b2b-form-spinner {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-block-start-color: var(--avery-yellow);
    border-radius: 50%;
    animation: b2bSpinner 0.8s linear infinite;
}

@keyframes b2bSpinner {
    to {
        transform: rotate(360deg);
    }
}

.b2b-form-frame {
    inline-size: 100%;
    min-block-size: 560px;
    block-size: 580px;
    border: none;
    border-radius: var(--radius-sm);
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    transition: opacity 160ms ease;
}

.b2b-lead-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: clamp(1rem, 2vw, 1.35rem) clamp(1.25rem, 3vw, 2rem);
    border-block-start: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.28);
    flex-shrink: 0;
}

.b2b-lead-modal__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.85rem;
    inline-size: 100%;
}

.b2b-lead-modal__actions .button--secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--avery-white);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.b2b-lead-modal__actions .button--secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--avery-white);
}

.b2b-lead-modal__actions .button--primary {
    background: linear-gradient(135deg, #ffd20c 0%, #ffbe00 100%);
    color: #1a1600;
    border: 1px solid transparent;
    box-shadow: 0 4px 16px rgba(255, 210, 12, 0.35);
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 150ms ease;
}

.b2b-lead-modal__actions .button--primary:hover {
    background: #1a1600;
    color: #ffd20c;
    border-color: #ffd20c;
    box-shadow: 0 6px 20px rgba(255, 210, 12, 0.45);
}

.label-sheet.is-updating {
    animation: label-confirm 180ms ease-out;
}

@keyframes label-confirm {
    50% { transform: scale(0.99); }
}

.preview-form {
    display: grid;
    gap: 0.75rem;
}

.form-row-grid {
    display: grid;
    grid-template-columns: minmax(140px, 0.55fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 0 0.75rem;
}

.preview-field {
    min-inline-size: 0;
}

.form-row-grid .preview-field {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
}

.field-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    align-self: end;
    margin-block-end: 0.25rem;
}

@supports not (grid-template-rows: subgrid) {
    .form-row-grid {
        grid-template-rows: none;
        gap: 0.75rem;
    }

    .form-row-grid .preview-field {
        display: flex;
        flex-direction: column;
        grid-row: auto;
    }

    .form-row-grid .field-label-row {
        min-block-size: 1.15rem;
    }
}

.preview-field label {
    display: block;
    color: #2b303d;
    font-size: 0.72rem;
    font-weight: 700;
}

.field-char-count {
    font-size: 0.62rem;
    color: var(--avery-muted);
}

.preview-field input {
    inline-size: 100%;
    min-block-size: 2.65rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #9aa0b0;
    border-radius: var(--radius-sm);
    color: var(--avery-ink);
    font-size: 0.88rem;
    background: var(--avery-white);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.preview-field input:focus {
    border-color: var(--avery-blue);
    box-shadow: 0 0 0 3px rgba(0, 56, 165, 0.15);
}

.preview-field input[aria-invalid="true"] {
    border-color: var(--avery-danger);
    box-shadow: 0 0 0 3px rgba(154, 47, 25, 0.15);
}

.field-help {
    margin: -0.15rem 0 0;
    color: var(--avery-muted);
    font-size: 0.65rem;
    line-height: 1.4;
}

.field-error {
    min-block-size: 1.15rem;
    margin: 0.2rem 0 0;
    color: var(--avery-danger);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Segmented Toggle Controls */
.controls-split-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-block: 0.25rem 0.5rem;
}

@media (max-width: 32rem) {
    .controls-split-row {
        grid-template-columns: 1fr;
    }
}

.segmented-control {
    margin: 0;
    padding: 0;
    border: 0;
}

.segmented-legend {
    margin-block-end: 0.35rem;
    color: #2b303d;
    font-size: 0.72rem;
    font-weight: 700;
}

.segmented-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem;
    padding: 0.3rem;
    background: var(--avery-surface-subtle);
    border: 1px solid var(--avery-line);
    border-radius: var(--radius-sm);
}

.segmented-item {
    position: relative;
    cursor: pointer;
}

.segmented-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.segmented-label {
    display: grid;
    align-content: center;
    gap: 0.12rem;
    padding: 0.45rem 0.4rem;
    min-block-size: 2.85rem;
    background: transparent;
    border-radius: calc(var(--radius-sm) - 2px);
    text-align: center;
    line-height: 1.15;
    transition: background-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

.segmented-label strong {
    color: #3b4050;
    font-size: 0.72rem;
    transition: color 180ms ease;
}

.segmented-label small {
    color: var(--avery-muted);
    font-size: 0.58rem;
    line-height: 1.2;
}

.segmented-item input:checked + .segmented-label {
    background: var(--avery-white);
    box-shadow: 0 2px 6px rgba(16, 19, 34, 0.1);
}

.segmented-item input:checked + .segmented-label strong {
    color: var(--avery-blue-deep);
}

.segmented-item:has(input:focus-visible) .segmented-label {
    box-shadow: var(--focus);
}

/* Full-width Horizontal 2-Way Duo-Slider for Ausgabeformat */
.format-choice {
    inline-size: 100%;
    margin-block: 0.25rem 0.65rem;
}

.appearance-choice {
    margin-block: 0.25rem 0.5rem;
}

.appearance-choice[hidden] {
    display: none !important;
}

.segmented-group--duo-slider {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem;
    padding: 0.3rem;
    --thumb-index: 0;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.segmented-group--duo-slider .segmented-slider-thumb {
    position: absolute;
    inset-block-start: 0.3rem;
    inset-block-end: 0.3rem;
    inset-inline-start: 0.3rem;
    inline-size: calc((100% - 0.6rem - 0.35rem) / 2);
    background: var(--avery-white);
    border-radius: calc(var(--radius-sm) - 2px);
    box-shadow: 0 2px 8px rgba(16, 19, 34, 0.12), 0 1px 2px rgba(0, 0, 0, 0.04);
    transform: translateX(calc(var(--thumb-index) * (100% + 0.35rem)));
    transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
    pointer-events: none;
    z-index: 1;
}

.segmented-group--duo-slider.is-dragging .segmented-slider-thumb {
    transition: none;
}

.segmented-group--duo-slider .segmented-item {
    position: relative;
    z-index: 2;
}

.segmented-group--duo-slider .segmented-item[hidden] {
    display: none !important;
}

.segmented-group--duo-slider .segmented-label {
    min-block-size: 3.15rem;
    padding: 0.45rem 0.35rem;
}

.segmented-group--duo-slider .segmented-label strong {
    font-size: 0.76rem;
}

.segmented-group--duo-slider .segmented-label small {
    font-size: 0.59rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.segmented-group--duo-slider .segmented-item input:checked + .segmented-label {
    background: transparent;
    box-shadow: none;
}

.segmented-group--duo-slider .segmented-item input:checked + .segmented-label strong {
    color: var(--avery-blue-deep);
    font-weight: 800;
}

.editor-actions {
    display: grid;
    gap: 0.55rem;
    margin-block-start: 0.4rem;
}

.editor-actions .button {
    inline-size: 100%;
}

.print-service-note {
    margin: 0;
    color: var(--avery-muted);
    font-size: 0.62rem;
    line-height: 1.4;
}

.export-status {
    min-block-size: 1.4rem;
    margin: 0;
    color: var(--avery-muted);
    font-size: 0.68rem;
    font-weight: 650;
    line-height: 1.4;
}

.export-status[data-state="success"] {
    color: var(--avery-success);
}

.export-status[data-state="error"] {
    color: var(--avery-danger);
}

.preview-caption {
    margin: 0.85rem 0 0;
    color: var(--avery-muted);
    font-size: 0.65rem;
    line-height: 1.45;
}

.preview-caption a {
    color: var(--avery-blue-deep);
    font-weight: 700;
}

/* ==========================================================================
   Bulk-Generator Styles (CSV Mode)
   ========================================================================== */

.workbench-preview-wrapper {
    position: relative;
}

.bulk-preview-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-block: 0.25rem 0.5rem;
    padding: 0.35rem 0.65rem;
    background: var(--avery-surface-subtle);
    border: 1px solid var(--avery-line);
    border-radius: var(--radius-sm);
    animation: modal-fade-in 160ms ease-out;
}

.bulk-preview-toolbar[hidden] {
    display: none;
}

.bulk-preview-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--avery-blue-deep);
    letter-spacing: 0.01em;
}

.bulk-preview-badge::before {
    content: "";
    display: inline-block;
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--avery-blue);
}

.bulk-preview-badge.is-csv-loaded {
    color: var(--avery-success);
}

.bulk-preview-badge.is-csv-loaded::before {
    background: var(--avery-success);
}

.bulk-preview-badge.is-error {
    color: var(--avery-danger);
}

.bulk-preview-badge.is-error::before {
    background: var(--avery-danger);
}

.bulk-preview-pager {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--avery-white);
    padding: 0.15rem 0.3rem;
    border: 1px solid var(--avery-line);
    border-radius: calc(var(--radius-sm) - 2px);
    box-shadow: 0 1px 2px rgba(16, 19, 34, 0.05);
}

.bulk-preview-pager[hidden] {
    display: none;
}

.bulk-pager-btn {
    display: inline-grid;
    place-items: center;
    inline-size: 1.45rem;
    block-size: 1.45rem;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    color: var(--avery-ink);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.bulk-pager-btn:hover:not(:disabled) {
    background: var(--avery-blue-light);
    color: var(--avery-blue-deep);
    border-color: #c2d6ff;
}

.bulk-pager-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

.bulk-pager-btn:disabled {
    color: #c0c4d0;
    cursor: not-allowed;
    background: transparent;
    border-color: transparent;
}

.bulk-pager-label {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--avery-ink);
    padding-inline: 0.35rem;
    white-space: nowrap;
    user-select: none;
}

.label-sheet.is-disabled {
    opacity: 0.4;
    filter: grayscale(0.7);
    pointer-events: none;
    transition: opacity 220ms ease, filter 220ms ease;
}

.label-workbench.is-bulk-active #single-fields,
.label-workbench.is-bulk-active [data-print-cta],
.label-workbench.is-bulk-active [data-tracking="cta-scroll-to-print-guide"],
.label-workbench.is-bulk-active .print-service-note {
    display: none !important;
}

.label-workbench.is-bulk-active #bulk-section {
    display: block !important;
}

.label-workbench.is-bulk-active .format-choice {
    opacity: 0.9;
}

.label-workbench.is-bulk-active .format-choice .segmented-item:has(input[value="png"]) {
    pointer-events: none;
    opacity: 0.4;
}

.bulk-section {
    margin-block: 0.25rem 0.5rem;
}

.bulk-header-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    margin-block-end: 0.65rem;
}

.bulk-guide-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    background: var(--avery-blue-light);
    color: var(--avery-blue-deep);
    border-radius: var(--radius-xs);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.sample-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: 1px dashed var(--avery-blue);
    border-radius: var(--radius-xs);
    color: var(--avery-blue);
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 650;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 140ms ease, color 140ms ease;
}

.sample-download-btn:hover {
    background: var(--avery-blue-light);
    color: var(--avery-blue-deep);
}

.sample-download-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

.csv-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.35rem 1rem;
    background: var(--avery-surface-subtle);
    border: 2px dashed var(--avery-line);
    border-radius: var(--radius-md);
    text-align: center;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.csv-dropzone:hover,
.csv-dropzone.is-dragover {
    border-color: var(--avery-blue);
    background: var(--avery-blue-light);
}

.csv-dropzone:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

.csv-dropzone.has-file {
    border-style: solid;
    border-color: var(--avery-success);
    background: var(--avery-success-light);
}

.dropzone-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--avery-blue);
    transition: transform 160ms ease;
}

.csv-dropzone:hover .dropzone-icon,
.csv-dropzone.is-dragover .dropzone-icon {
    transform: translateY(-2px);
}

.csv-dropzone.has-file .dropzone-icon {
    color: var(--avery-success);
}

.dropzone-content {
    display: grid;
    gap: 0.2rem;
}

.dropzone-primary {
    margin: 0;
    color: var(--avery-ink);
    font-size: 0.82rem;
    line-height: 1.3;
}

.dropzone-cta {
    color: var(--avery-blue);
    font-weight: 700;
    text-decoration: underline;
}

.dropzone-secondary {
    margin: 0;
    color: var(--avery-muted);
    font-size: 0.64rem;
    line-height: 1.3;
}

.csv-remove-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-block-start: 0.35rem;
    padding: 0.3rem 0.75rem;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: var(--radius-xs);
    color: #4b5563;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, transform 100ms ease;
}

.csv-remove-btn:hover {
    background: #e5e7eb;
    color: #111827;
    border-color: #9ca3af;
}

.csv-remove-btn:active {
    transform: scale(0.98);
}

.csv-remove-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

.csv-dropzone:not(.has-file) .csv-remove-btn {
    display: none !important;
}

.bulk-feedback {
    margin-block-start: 0.65rem;
    padding: 0.65rem 0.8rem;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    line-height: 1.4;
}

.bulk-feedback--success {
    background: var(--avery-success-light);
    border: 1px solid #a7dfb8;
    color: #065f38;
}

.bulk-feedback--warning {
    background: var(--avery-warning-light);
    border: 1px solid #fed7aa;
    color: #7c2d12;
}

.bulk-feedback--error {
    background: var(--avery-danger-light);
    border: 1px solid #fecaca;
    color: var(--avery-danger);
}

.bulk-feedback-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    gap: 0.5rem;
}

.bulk-feedback-title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.bulk-feedback-meta {
    font-size: 0.65rem;
    opacity: 0.85;
}

.bulk-warnings-details {
    margin-block-start: 0.45rem;
    padding: 0.4rem 0.6rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-xs);
    border: 1px solid rgba(0, 0, 0, 0.08);
    max-block-size: 7.5rem;
    overflow-y: auto;
}

.bulk-warnings-details ul {
    margin: 0;
    padding-inline-start: 1rem;
}

.bulk-warnings-details li {
    margin-block-end: 0.2rem;
}

.bulk-feedback--b2b-lead {
    background: linear-gradient(135deg, #eff5ff 0%, #e6efff 100%);
    border: 1.5px solid #0038a8;
    color: var(--avery-blue-deep);
}

.bulk-feedback-b2b-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-block-start: 0.5rem;
    padding: 0.35rem 0.75rem;
    background: var(--avery-blue-deep);
    color: var(--avery-yellow);
    border: none;
    border-radius: var(--radius-xs);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 140ms ease, transform 140ms ease;
}

.bulk-feedback-b2b-cta:hover {
    background: #021355;
    color: var(--avery-white);
    transform: translateY(-1px);
}

.export-button.is-b2b-lead {
    background: linear-gradient(135deg, #071c6e 0%, #0038a8 100%);
    color: var(--avery-white);
    border: 1px solid rgba(0, 56, 165, 0.4);
    box-shadow: 0 4px 14px rgba(3, 29, 126, 0.22);
    cursor: pointer;
    font-weight: 750;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.export-button.is-b2b-lead:hover {
    background: linear-gradient(135deg, #03114d 0%, #022a80 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(3, 29, 126, 0.35);
}

.export-button.is-b2b-lead:focus-visible {
    outline: 2px solid var(--avery-cyan);
    outline-offset: 2px;
}

/* ==========================================================================
   Section Common & Layout Rules
   ========================================================================== */

.section {
    padding-block: clamp(3.75rem, 6vw, 4.5rem);
}

@media (min-width: 64rem) {
    .section {
        padding-block: clamp(6.5rem, 8.5vw, 9.25rem);
    }
}

.section-intro-top {
    margin-block-end: clamp(2rem, 4vw, 3.5rem);
}

.section-intro-top h2 {
    max-inline-size: 48rem;
    margin-block-end: 0.65rem;
}

.section-subtitle {
    max-inline-size: 42rem;
    margin: 0;
    color: var(--avery-muted);
    font-size: clamp(0.98rem, 1.6vw, 1.12rem);
}

.section-heading-row {
    display: grid;
    gap: 1rem 3rem;
    margin-block-end: clamp(2rem, 4vw, 3.5rem);
}

.section-heading-row h2 {
    max-inline-size: 50rem;
    margin-block-end: 0;
}

.section-heading-row > p {
    max-inline-size: 34rem;
    margin-block-end: 0;
    align-self: end;
    color: var(--avery-muted);
    font-size: 1rem;
}

.section-heading-row--light h2,
.section-heading-row--light .section-number,
.section-heading-row--light > p {
    color: var(--avery-white);
}

.legal-note {
    margin: 1.5rem 0 0;
    padding: 0.75rem 1rem;
    background: #f1f2f4;
    border: 1px solid #d5d8df;
    border-radius: var(--radius-xs);
    color: #555b66;
    font-size: 0.72rem;
    line-height: 1.5;
}

/* ==========================================================================
   Print Guide Section (3-Step Workflow)
   ========================================================================== */

.print-guide-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-block-size: calc(100vh - 4.5rem);
    min-block-size: calc(100svh - 4.5rem);
    background: linear-gradient(180deg, #f0f5ff 0%, #e8f0fe 100%);
    border-block-start: 1px solid #d2e1fc;
    border-block-end: 1px solid #d2e1fc;
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
    scroll-margin-block-start: 4.5rem;
    box-sizing: border-box;
}

.print-guide-section .shell {
    inline-size: min(100% - 2.5rem, var(--shell));
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.print-guide-header {
    text-align: center;
    margin-block-end: clamp(1.75rem, 3vw, 2.5rem);
}

.print-guide-header h2 {
    max-inline-size: 48rem;
    margin-inline: auto;
    margin-block-end: 0;
}

.print-guide-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 48rem) {
    .print-guide-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

.guide-card {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: clamp(1.5rem, 2.2vw, 2rem);
    background: var(--avery-white);
    border: 1px solid #d0dcf5;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 14px rgba(0, 56, 165, 0.05);
    text-decoration: none;
    color: var(--avery-ink);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.2s ease;
}

.guide-card--clickable {
    cursor: pointer;
}

.guide-card--clickable:hover {
    transform: translateY(-4px);
    border-color: var(--avery-blue);
    box-shadow: 0 8px 24px rgba(0, 56, 165, 0.12);
}

.guide-card--clickable:focus-visible {
    outline: 2px solid var(--avery-blue);
    outline-offset: 3px;
}

.guide-card--accent {
    background: linear-gradient(135deg, #001e62 0%, #0038a5 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 6px 24px rgba(0, 30, 98, 0.16);
    color: #ffffff;
}

.guide-card--accent:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 210, 12, 0.45);
    box-shadow: 0 10px 30px rgba(0, 30, 98, 0.28);
}

.guide-card--accent:focus-visible {
    outline: 2px solid var(--avery-yellow);
    outline-offset: 3px;
}

.guide-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-block-end: 1.25rem;
}

.guide-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: var(--avery-blue-light);
    color: var(--avery-blue);
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 800;
    border-radius: var(--radius-xs);
}

.guide-card--accent .guide-card__badge {
    background: var(--avery-yellow);
    color: #001e62;
    box-shadow: 0 2px 10px rgba(255, 210, 12, 0.4);
}

.guide-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--avery-blue);
}

.guide-card--accent .guide-card__icon {
    color: var(--avery-yellow);
}

.guide-card__content {
    flex-grow: 1;
}

.guide-card__title {
    font-family: var(--font-ui);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--avery-ink);
    margin: 0 0 0.65rem;
}

.guide-card--accent .guide-card__title {
    color: #ffffff;
}

.guide-card__desc {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--avery-muted);
}

.guide-card--accent .guide-card__desc {
    color: #ced7ee;
}

.guide-card__price {
    margin: 0.55rem 0 0;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
}

.guide-card__footer {
    margin-block-start: 1.25rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--avery-line-subtle);
}

.guide-card--accent .guide-card__footer {
    border-block-start: 1px solid rgba(255, 255, 255, 0.15);
}

.guide-card__action-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--avery-blue);
    transition: gap 0.15s ease;
}

.guide-card--clickable:hover .guide-card__action-hint {
    gap: 0.55rem;
    color: var(--avery-blue-deep);
}

.guide-card--accent .guide-card__action-hint {
    color: var(--avery-yellow);
}

.guide-card--accent.guide-card--clickable:hover .guide-card__action-hint {
    color: #ffffff;
}

.guide-card__arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

.guide-card--clickable:hover .guide-card__arrow {
    transform: translate(2px, -2px);
}

/* ==========================================================================
   Print Guide Video Accordion (Light by default, Dark on hover / open)
   ========================================================================== */

.print-guide-video-box {
    margin-block-start: 1.75rem;
}

.print-guide-video-accordion {
    background: var(--avery-white);
    border: 1px solid #d0dcf5;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 14px rgba(0, 56, 165, 0.05);
    overflow: hidden;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.print-guide-video-accordion:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #001e62 0%, #0038a5 100%);
    border-color: rgba(255, 210, 12, 0.45);
    box-shadow: 0 10px 30px rgba(0, 30, 98, 0.24);
}

.print-guide-video-accordion[open] {
    transform: none;
    background: #08142c;
    border-color: var(--avery-blue);
    box-shadow: 0 8px 32px rgba(0, 30, 98, 0.28);
}

.print-guide-video-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.25rem 1.65rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 160ms ease;
}

.print-guide-video-toggle::-webkit-details-marker {
    display: none;
}

.print-guide-video-toggle:hover {
    background: rgba(255, 255, 255, 0.05);
}

.print-guide-video-toggle:focus-visible {
    outline: 2px solid var(--avery-blue);
    outline-offset: -2px;
}

.print-guide-video-accordion:hover .print-guide-video-toggle:focus-visible,
.print-guide-video-accordion[open] .print-guide-video-toggle:focus-visible {
    outline-color: var(--avery-yellow);
}

.video-toggle-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.video-toggle-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    background: var(--avery-blue-light);
    color: var(--avery-blue);
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 900;
    box-shadow: none;
    flex-shrink: 0;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
}

.print-guide-video-accordion:hover .video-toggle-badge {
    transform: scale(1.1);
    background: var(--avery-yellow);
    color: #001e62;
    box-shadow: 0 4px 16px rgba(255, 210, 12, 0.6);
}

.print-guide-video-accordion[open] .video-toggle-badge {
    background: var(--avery-yellow);
    color: #001e62;
    box-shadow: 0 2px 10px rgba(255, 210, 12, 0.4);
}

.video-toggle-title {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--avery-ink);
    line-height: 1.3;
    transition: color 180ms ease;
}

.print-guide-video-accordion:hover .video-toggle-title,
.print-guide-video-accordion[open] .video-toggle-title {
    color: #ffffff;
}

.video-toggle-subtitle {
    display: block;
    font-size: 0.82rem;
    color: var(--avery-muted);
    margin-block-start: 0.2rem;
    line-height: 1.35;
    transition: color 180ms ease;
}

.print-guide-video-accordion:hover .video-toggle-subtitle,
.print-guide-video-accordion[open] .video-toggle-subtitle {
    color: #ced7ee;
}

.video-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
    color: var(--avery-blue);
    transition: transform 200ms ease, color 180ms ease;
    flex-shrink: 0;
}

.print-guide-video-accordion:hover .video-toggle-icon,
.print-guide-video-accordion[open] .video-toggle-icon {
    color: var(--avery-yellow);
}

.print-guide-video-accordion[open] .video-toggle-icon {
    transform: rotate(45deg);
}

.print-guide-video-wrapper {
    padding: 0 1.65rem 1.65rem;
    background: #08142c;
    animation: videoFadeIn 220ms ease-out;
}

@keyframes videoFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.print-guide-video {
    display: block;
    width: 100%;
    max-inline-size: 100%;
    aspect-ratio: 16 / 9;
    background: #000000;
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    outline: none;
}

/* Video WebVTT Subtitles (Bottom-Center / Shifted Left) */
.print-guide-video::cue,
.download-modal-video::cue,
video::cue {
    color: #ffffff;
    background-color: rgba(15, 23, 42, 0.90);
    font-family: var(--font-family-base, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: clamp(1.08rem, 2.4vw, 1.4rem);
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
    white-space: pre-line;
}

/* ==========================================================================
   01 / Betroffenheits-Check with Split Context Drawer
   ========================================================================== */

.section--check {
    background: var(--avery-white);
    border-block-end: 1px solid var(--avery-line-subtle);
}

.check-split-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    align-items: start;
}

.check-main-card {
    padding: clamp(1.25rem, 3vw, 2.25rem);
    background: var(--avery-surface-subtle);
    border: 1px solid var(--avery-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.check-progress-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1.5rem;
    padding-block-end: 1rem;
    border-block-end: 1px solid var(--avery-line);
}

.check-steps-indicator {
    display: flex;
    gap: 0.35rem;
    flex: 1;
    max-inline-size: 13rem;
}

.step-dot {
    flex: 1;
    block-size: 0.3rem;
    background: #d8dbe5;
    border-radius: 999px;
    transition: background-color 220ms cubic-bezier(0.16, 1, 0.3, 1), transform 220ms ease;
}

.step-dot.is-active {
    background: var(--avery-blue);
    transform: scaleY(1.25);
}

.step-dot.is-passed {
    background: var(--avery-success);
}

.check-step-counter {
    color: var(--avery-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.check-question {
    display: none;
    margin: 0;
    padding: 0;
    border: 0;
}

.check-question.is-active {
    display: grid;
    gap: 1.25rem;
    animation: checkQuestionFadeIn 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes checkQuestionFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.check-question__header {
    display: grid;
    gap: 0.4rem;
}

.question-text {
    margin: 0;
    color: var(--avery-blue-deep);
    font-size: clamp(1.1rem, 2.2vw, 1.35rem);
    font-weight: 800;
    line-height: 1.3;
}

.choice-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.75rem;
}

.choice-card {
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.choice-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-card__box {
    display: grid;
    gap: 0.25rem;
    padding: 1.1rem 1rem;
    min-block-size: 5.25rem;
    background: var(--avery-white);
    border: 1.5px solid #cbcfdc;
    border-radius: var(--radius-md);
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.choice-card:hover .choice-card__box {
    border-color: var(--avery-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 56, 165, 0.08);
}

.choice-card input:checked + .choice-card__box,
.choice-card.is-selected .choice-card__box {
    background: var(--avery-blue-light);
    border-color: var(--avery-blue);
    box-shadow: 0 0 0 1.5px var(--avery-blue), 0 4px 12px rgba(0, 56, 165, 0.12);
    transform: scale(0.985);
}

.choice-card:has(input:focus-visible) .choice-card__box {
    box-shadow: var(--focus);
}

.choice-card__title {
    color: var(--avery-blue-deep);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
}

.choice-card__desc {
    color: var(--avery-muted);
    font-size: 0.74rem;
    line-height: 1.35;
}

.check-footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-block-start: 1rem;
    min-block-size: 2.25rem;
}

.check-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.75rem;
    margin: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--avery-muted);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.check-reset-btn:hover {
    color: var(--avery-blue-deep);
    background: rgba(0, 56, 165, 0.05);
    border-color: rgba(0, 56, 165, 0.1);
}

.check-reset-btn:hover .icon-svg {
    transform: rotate(-45deg);
}

.check-reset-btn .icon-svg {
    transition: transform 200ms ease;
}

.check-reset-btn:focus-visible {
    outline: 2px solid var(--avery-blue);
    outline-offset: 2px;
}

.check-step-error {
    min-block-size: 1.3rem;
    margin: 0;
    color: var(--avery-danger);
    font-size: 0.76rem;
    font-weight: 700;
}

.check-result {
    display: grid;
    gap: 1.25rem;
    margin-block-start: 1.5rem;
    padding: 1.5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    animation: checkQuestionFadeIn 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.check-result--not-relevant {
    background: var(--avery-white);
    border: 2px solid #8f94a4;
    border-inline-start: 0.6rem solid #555968;
}

.check-result--likely {
    background: var(--avery-success-light);
    border: 2px solid #58b087;
    border-inline-start: 0.6rem solid var(--avery-success);
}

.check-result--review {
    background: var(--avery-warning-light);
    border: 2px solid #dca969;
    border-inline-start: 0.6rem solid var(--avery-warning);
}

.check-result__label {
    margin-block-end: 0.4rem;
    color: var(--avery-blue-deep);
    font-size: 1.15rem;
    font-weight: 800;
}

.check-result__text {
    margin: 0;
    font-size: 0.92rem;
    color: #2b303d;
}

.check-result__actions {
    display: flex;
    justify-content: flex-start;
    padding-block-start: 0.25rem;
}

.button--restart {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.button--restart:hover .icon-svg {
    transform: rotate(-60deg);
}

.button--restart .icon-svg {
    transition: transform 220ms ease;
}

/* Context Side-Drawer */
.check-context-drawer {
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    background: var(--avery-white);
    border: 1px solid var(--avery-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.drawer-header {
    margin-block-end: 1rem;
    padding-block-end: 0.85rem;
    border-block-end: 1px solid var(--avery-line-subtle);
}

.drawer-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    margin-block-end: 0.35rem;
    background: var(--avery-yellow);
    border-radius: var(--radius-xs);
    color: #241d00;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.drawer-header h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.drawer-content {
    display: grid;
    gap: 1rem;
}

.drawer-topic {
    margin-block-end: 0.45rem;
    color: var(--avery-blue);
    font-size: 0.88rem;
    font-weight: 800;
}

.drawer-explanation {
    margin: 0;
    color: var(--avery-muted);
    font-size: 0.82rem;
    line-height: 1.55;
}

.drawer-reference {
    display: grid;
    gap: 0.2rem;
    padding: 0.65rem 0.85rem;
    background: var(--avery-surface-subtle);
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
}

.ref-label {
    color: var(--avery-blue-deep);
    font-weight: 800;
}

.ref-text {
    color: #4a4f5f;
}

.drawer-tip {
    padding: 0.75rem 0.85rem;
    background: #fffcee;
    border: 1px solid #fae69e;
    border-radius: var(--radius-sm);
    color: #574805;
    font-size: 0.74rem;
    line-height: 1.45;
}

/* ==========================================================================
   02 / Alltag (Friction)
   ========================================================================== */

.section--friction {
    background: var(--avery-cream);
}

.friction-grid {
    display: grid;
    gap: 1.25rem;
}

.friction-card {
    padding: clamp(1.5rem, 3.5vw, 2.25rem);
    background: var(--avery-white);
    border: 1px solid #ded7ca;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.friction-card__header {
    margin-block-end: 1rem;
}

.friction-tag {
    display: inline-block;
    margin-block-end: 0.65rem;
    padding: 0.2rem 0.5rem;
    background: #fdf0fa;
    border: 1px solid #f4cceb;
    border-radius: var(--radius-xs);
    color: var(--avery-magenta);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.friction-card h3 {
    margin: 0;
    font-size: 1.2rem;
}

.friction-card p {
    margin: 0;
    color: var(--avery-muted);
    font-size: 0.88rem;
}

/* ==========================================================================
   03 / Rechtliche Einordnung & Comparative Matrix
   ========================================================================== */

.section--classification {
    background: var(--avery-blue-deep);
    color: var(--avery-white);
}

.comparison-matrix {
    margin-block-end: 2.5rem;
}

.matrix-grid {
    display: grid;
    gap: 1.25rem;
}

.matrix-card {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--radius-lg);
}

.matrix-card--statutory {
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.22);
}

.matrix-card--garan {
    background: var(--avery-white);
    color: var(--avery-ink);
    border: 2px solid var(--avery-yellow);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.matrix-card__header {
    margin-block-end: 1.25rem;
    padding-block-end: 1rem;
    border-block-end: 1px solid rgba(255, 255, 255, 0.18);
}

.matrix-card--garan .matrix-card__header {
    border-block-end: 1px solid var(--avery-line);
}

.matrix-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    margin-block-end: 0.4rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-xs);
    color: var(--avery-cyan);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.matrix-badge--accent {
    background: var(--avery-blue);
    color: var(--avery-white);
}

.matrix-card h3 {
    margin-block-end: 0.25rem;
    color: var(--avery-white);
    font-size: 1.35rem;
}

.matrix-card--garan h3 {
    color: var(--avery-blue-deep);
}

.matrix-card__subtitle {
    margin: 0;
    color: #ced6ee;
    font-size: 0.82rem;
}

.matrix-card--garan .matrix-card__subtitle {
    color: var(--avery-muted);
}

.matrix-features {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
}

.matrix-features li {
    padding-inline-start: 1.25rem;
    position: relative;
}

.matrix-features li::before {
    content: "•";
    position: absolute;
    inset-inline-start: 0;
    color: var(--avery-cyan);
    font-weight: 800;
}

.matrix-card--garan .matrix-features li::before {
    color: var(--avery-blue);
}

.classification-grid {
    display: grid;
    gap: 1rem;
}

.classification-grid article {
    min-block-size: 14rem;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
}

.classification-grid h3,
.classification-grid p {
    color: var(--avery-white);
}

.classification-grid h3 {
    font-size: 1.1rem;
}

.classification-grid p {
    font-size: 0.82rem;
}

.classification-index {
    margin-block-end: auto;
    color: var(--avery-cyan);
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1;
}

.classification-grid .classification-featured {
    background: var(--avery-white);
    border: 2px solid var(--avery-blue);
    box-shadow: 0 4px 16px rgba(0, 56, 165, 0.15);
}

.classification-featured h3 {
    color: var(--avery-blue-deep);
}

.classification-featured p {
    color: #2b303d;
}

.classification-featured .classification-index {
    color: var(--avery-blue);
}

.classification-featured .classification-note {
    color: var(--avery-blue-deep);
}

.matrix-anchor-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--avery-cyan);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    transition: color 150ms ease;
}

.matrix-anchor-link:hover {
    color: var(--avery-white);
}

.classification-subpage-banner {
    margin-block-start: 2rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.classification-subpage-banner__info h4 {
    margin: 0 0 0.25rem;
    color: var(--avery-white);
    font-size: 1.05rem;
}

.classification-subpage-banner__info p {
    margin: 0;
    color: #ced6ee;
    font-size: 0.88rem;
}

.button--comparison-yellow {
    background: var(--avery-yellow);
    color: #101322;
    font-weight: 800;
    font-size: 0.95rem;
    padding: 0.85rem 1.5rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--avery-yellow);
    box-shadow: 0 4px 14px rgba(255, 210, 12, 0.35);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 160ms ease;
    cursor: pointer;
}

.button--comparison-yellow:hover {
    background: #ffe043;
    border-color: #ffe043;
    color: #000000;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 210, 12, 0.45);
}

@media (max-width: 48rem) {
    .classification-subpage-banner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .button--comparison-yellow {
        justify-content: center;
    }
}

/* ==========================================================================
   04 / Rollen & Verantwortung
   ========================================================================== */

.section--roles {
    background: var(--avery-white);
}

.role-list {
    display: grid;
    gap: 1rem;
}

.role-card {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.5rem;
    background: var(--avery-surface-subtle);
    border: 1px solid var(--avery-line);
    border-radius: var(--radius-md);
}

.role-card__index {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    display: grid;
    place-items: center;
    background: var(--avery-blue-deep);
    border-radius: 50%;
    color: var(--avery-yellow);
    font-size: 0.8rem;
    font-weight: 800;
}

.role-card h3 {
    margin-block-end: 0.35rem;
    font-size: 1.1rem;
}

.role-card p {
    margin: 0;
    color: var(--avery-muted);
    font-size: 0.88rem;
}

/* ==========================================================================
   05 / Mechanismus (Ablauf & EU-Regeln)
   ========================================================================== */

.section--mechanism {
    background: var(--avery-surface-subtle);
}

.mechanism-grid {
    display: grid;
    gap: 2.5rem 5rem;
}

.large-copy {
    max-inline-size: 40rem;
    font-size: 1.05rem;
    color: #353a49;
}

.mechanism-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.85rem;
}

.mechanism-list li {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 1.15rem;
    padding: 1.25rem;
    background: var(--avery-white);
    border: 1px solid var(--avery-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.mechanism-list li > span {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    display: grid;
    place-items: center;
    background: var(--avery-blue);
    border-radius: 50%;
    color: var(--avery-white);
    font-size: 0.95rem;
    font-weight: 800;
}

.mechanism-list h3 {
    margin-block-end: 0.25rem;
    font-size: 1.05rem;
}

.mechanism-list p {
    margin: 0;
    color: var(--avery-muted);
    font-size: 0.82rem;
}

.eu-rule-strip {
    grid-column: 1 / -1;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--avery-white);
    border: 1px solid var(--avery-line);
    border-inline-start: 0.5rem solid var(--avery-yellow);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.eu-rule-strip h3 {
    margin-block-end: 1rem;
    font-size: 1.15rem;
}

.eu-rule-strip ul {
    display: grid;
    gap: 0.85rem 2rem;
    margin: 0;
    padding-inline-start: 1.25rem;
    font-size: 0.82rem;
    color: #313645;
}

/* ==========================================================================
   06 / Nutzen & Vergleich
   ========================================================================== */

.section--outcomes {
    background: var(--avery-white);
}

.outcome-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.25rem;
    margin: 0;
}

.outcome-card {
    padding: 1.5rem;
    background: var(--avery-surface-subtle);
    border: 1px solid var(--avery-line);
    border-radius: var(--radius-md);
}

.outcome-card dt {
    color: var(--avery-blue-deep);
    font-size: 1.02rem;
    font-weight: 800;
    margin-block-end: 0.5rem;
}

.outcome-card dd {
    margin: 0;
    color: var(--avery-muted);
    font-size: 0.85rem;
}

.comparison {
    display: grid;
    gap: 1.25rem;
    margin-block-start: clamp(2.5rem, 5vw, 4rem);
}

.comparison-card {
    padding: clamp(1.5rem, 3.5vw, 2.25rem);
    background: var(--avery-cream);
    border: 1px solid #ddd5c6;
    border-radius: var(--radius-md);
}

.comparison-standard {
    background: var(--avery-blue-light);
    border-color: #bad3ff;
}

.comparison-card h3 {
    font-size: 1.25rem;
    margin-block-end: 0.85rem;
}

.comparison-card ul {
    margin: 0;
    padding-inline-start: 1.25rem;
    font-size: 0.85rem;
    color: #3b4050;
}

.comparison-card li + li {
    margin-block-start: 0.45rem;
}

/* ==========================================================================
   04 / GARAN-Label in der Praxis (Industry Verticals)
   ========================================================================== */

.section--industries {
    background: var(--avery-surface, #f5f3ee);
    border-block: 1px solid var(--avery-line, #e2dcd0);
}

.industry-grid {
    display: grid;
    gap: 0.85rem;
}

.industry-card {
    background: var(--avery-white);
    border: 1px solid var(--avery-line, #e2dcd0);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.industry-card:hover {
    border-color: var(--avery-blue);
    box-shadow: 0 4px 12px rgba(0, 56, 165, 0.08);
}

.industry-card summary {
    min-block-size: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    font-weight: 800;
    list-style: none;
}

.industry-card summary::-webkit-details-marker,
.objection-list summary::-webkit-details-marker,
.faq-list summary::-webkit-details-marker {
    display: none;
}

.industry-name {
    min-inline-size: 0;
    flex: 1;
    font-size: 1.05rem;
    color: var(--avery-blue-deep);
    font-family: var(--font-display);
    font-weight: 800;
}

.industry-tag {
    display: inline-block;
    flex: none;
    padding: 0.2rem 0.55rem;
    background: rgba(0, 56, 165, 0.08);
    color: var(--avery-blue-deep);
    border: 1px solid rgba(0, 56, 165, 0.28);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
}

.industry-toggle {
    flex: none;
    color: var(--avery-blue);
    font-size: 1.35rem;
    font-style: normal;
    font-weight: 700;
    transition: transform 180ms ease;
}

.industry-card[open] .industry-toggle {
    transform: rotate(45deg);
}

.industry-body {
    padding: 0 1.25rem 1.25rem;
    border-block-start: 1px solid #f0ecdf;
    padding-block-start: 0.85rem;
}

.industry-body p {
    margin: 0;
    color: var(--avery-dark);
    font-size: 0.9rem;
    line-height: 1.6;
}

@media (max-width: 64rem) {
    .industry-card summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.45rem 0.75rem;
    }

    .industry-name {
        grid-column: 1;
        grid-row: 1;
    }

    .industry-tag {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    .industry-toggle {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }
}

/* ==========================================================================
   05 / Sonderlösungen & Beratung
   ========================================================================== */

.section--b2b-banner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--avery-blue-deep) 0%, #0623a8 60%, #031566 100%);
    color: var(--avery-white);
    min-block-size: 100vh;
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(4rem, 7vw, 6.5rem);
    box-sizing: border-box;
    scroll-margin-block-start: 0;
}

.section--b2b-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 15%, rgba(59, 207, 229, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 10% 85%, rgba(255, 210, 12, 0.08) 0%, transparent 45%);
    pointer-events: none;
}

.section--b2b-banner .shell {
    inline-size: min(100% - 2.5rem, 90rem);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 2.5vw, 2.25rem);
}

.b2b-banner-header {
    max-inline-size: 58rem;
    margin-block-end: 0;
}

.b2b-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.85rem;
    margin-block-end: 0.85rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: var(--avery-yellow);
    font-size: 0.72rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.section-number--light {
    color: var(--avery-cyan) !important;
}

.b2b-banner-header h2 {
    color: var(--avery-white);
    font-size: clamp(2.1rem, 4.5vw, 3.2rem);
    line-height: 1.08;
    margin-block-end: 0;
    letter-spacing: -0.03em;
}

.b2b-trust-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: 1.25rem;
    padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-md);
    margin-block-end: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.b2b-trust-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.b2b-trust-icon {
    font-size: 1.65rem;
    flex-shrink: 0;
}

.b2b-trust-item strong {
    display: block;
    color: var(--avery-white);
    font-size: 0.88rem;
    line-height: 1.25;
}

.b2b-trust-item span {
    display: block;
    color: #9eb1df;
    font-size: 0.75rem;
    line-height: 1.35;
}

.b2b-banner-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
    padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3.5vw, 2.5rem);
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-inline-start: 0.5rem solid var(--avery-yellow);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.b2b-banner-cta__text h3 {
    color: var(--avery-white);
    margin: 0 0 0.45rem;
    font-size: clamp(1.2rem, 2vw, 1.45rem);
}

.b2b-banner-cta__text p {
    color: #ced6ee;
    margin: 0;
    font-size: clamp(0.92rem, 1.2vw, 1.02rem);
    max-inline-size: 48rem;
    line-height: 1.55;
}

.b2b-banner-cta__action {
    flex-shrink: 0;
}

.button--yellow,
.button--b2b-cta {
    background: var(--avery-yellow);
    color: var(--avery-ink);
    font-weight: 800;
    border: 2px solid transparent;
    box-shadow: 0 4px 16px rgba(255, 210, 12, 0.35);
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.button--yellow:hover,
.button--b2b-cta:hover {
    background: var(--avery-white);
    color: var(--avery-blue-deep);
    border-color: var(--avery-white);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
    transform: translateY(-2px);
}

.button--yellow:focus-visible,
.button--b2b-cta:focus-visible {
    box-shadow: 0 0 0 0.22rem var(--avery-white), 0 0 0 0.4rem var(--avery-blue-deep);
}

@media (max-width: 768px) {
    .b2b-banner-cta {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* ==========================================================================
   06 / E-Commerce & Online-Kennzeichnung
   ========================================================================== */

.section--ecommerce {
    background: var(--avery-white);
    border-block-end: 1px solid var(--avery-line, #e2dcd0);
}

.ecommerce-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

@media (max-width: 64rem) {
    .ecommerce-grid {
        grid-template-columns: 1fr;
    }
}

.ecommerce-rules__heading {
    margin: 0 0 1.25rem;
    font-size: 1.2rem;
    color: var(--avery-blue-deep);
}

.ecommerce-rules-list {
    display: grid;
    gap: 1rem;
    margin-block-end: 1.5rem;
}

.ecommerce-rule-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    background: var(--avery-cream);
    border: 1px solid #e2dcd0;
    border-radius: var(--radius-md);
}

.ecommerce-rule-number {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    background: var(--avery-blue);
    color: var(--avery-white);
    font-weight: 800;
    font-size: 0.9rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.ecommerce-rule-content h4 {
    margin: 0 0 0.3rem;
    color: var(--avery-blue-deep);
    font-size: 0.95rem;
}

.ecommerce-rule-content p {
    margin: 0;
    color: var(--avery-dark);
    font-size: 0.85rem;
    line-height: 1.5;
}

.ecommerce-shop-tips {
    padding: 0.9rem 1.1rem;
    background: rgba(0, 56, 165, 0.05);
    border: 1px solid rgba(0, 56, 165, 0.15);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: var(--avery-blue-deep);
    line-height: 1.5;
}

.ecommerce-shop-tips strong {
    display: block;
    margin-block-end: 0.25rem;
}

.ecommerce-shop-tips p {
    margin: 0;
}

.ecommerce-shop-tips code {
    background: rgba(0, 56, 165, 0.1);
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    font-size: 0.78rem;
    font-family: Consolas, monospace;
}

/* E-Commerce Snippet Box */
.ecommerce-snippet-box {
    margin-block-start: 0;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: #111422;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    color: var(--avery-white);
}

.ecommerce-snippet-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 0.85rem;
}

.ecommerce-snippet-title {
    display: grid;
    gap: 0.25rem;
}

.ecommerce-snippet-badge {
    display: inline-block;
    align-self: start;
    padding: 0.2rem 0.55rem;
    background: rgba(59, 207, 229, 0.2);
    color: var(--avery-cyan);
    border: 1px solid var(--avery-cyan);
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ecommerce-snippet-title h3 {
    margin: 0;
    color: var(--avery-white);
    font-size: 1.15rem;
}

.snippet-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    color: var(--avery-white);
    border-color: rgba(255, 255, 255, 0.3);
    font-size: 0.82rem;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    transition: all 160ms ease;
}

.snippet-copy-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: var(--avery-yellow);
    color: var(--avery-yellow);
}

.snippet-copy-btn.is-copied {
    background: var(--avery-success) !important;
    border-color: var(--avery-success) !important;
    color: var(--avery-white) !important;
}

.ecommerce-snippet-desc {
    margin: 0 0 1rem;
    color: #c0c7dc;
    font-size: 0.86rem;
    line-height: 1.5;
}

.code-container {
    background: #090b14;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    overflow-x: auto;
}

.code-container pre {
    margin: 0;
    font-family: Consolas, Monaco, 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #7ee787;
    white-space: pre-wrap;
    word-break: break-all;
}

.ecommerce-snippet-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-block-start: 1rem;
    padding-block-start: 0.85rem;
    border-block-start: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.84rem;
}

.preview-label {
    color: #9aa4bf;
    font-weight: 700;
}

.preview-link {
    color: var(--avery-cyan);
    text-decoration: underline;
    text-underline-offset: 3px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 140ms ease;
}

.preview-link:hover {
    color: var(--avery-yellow);
}

/* ==========================================================================
   08 / Audit & Vorbereitung (Readiness)
   ========================================================================== */

.section--readiness {
    background: var(--avery-cream);
}

.readiness-grid {
    display: grid;
    gap: 2.5rem 5rem;
}

.readiness-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.75rem;
}

.readiness-list li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--avery-white);
    border: 1px solid #ded7cb;
    border-radius: var(--radius-md);
}

.readiness-check-icon {
    color: var(--avery-success);
    font-size: 1.15rem;
    font-weight: 800;
}

.readiness-list strong {
    color: var(--avery-blue-deep);
    font-size: 0.92rem;
}

.readiness-list p {
    margin: 0.15rem 0 0;
    color: var(--avery-muted);
    font-size: 0.8rem;
}

.review-cases {
    grid-column: 1 / -1;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: var(--avery-white);
    border: 1px solid #ded7cb;
    border-inline-start: 0.45rem solid var(--avery-magenta);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.review-cases h3 {
    margin-block-end: 0.75rem;
    font-size: 1.1rem;
}

.review-cases ul {
    display: grid;
    gap: 0.5rem 2rem;
    margin: 0;
    padding-inline-start: 1.25rem;
    color: var(--avery-muted);
    font-size: 0.82rem;
}

.readiness-note {
    grid-column: 1 / -1;
}

.readiness-note .legal-note {
    margin-block-start: 0;
}

/* ==========================================================================
   09 / Einwandbehandlung (Objections - Legacy Compat)
   ========================================================================== */

.section--objections {
    background: var(--avery-white);
}

.objections-grid {
    display: grid;
    gap: 2.5rem 5rem;
}

.objection-list {
    display: grid;
    gap: 0.75rem;
}

.objection-list details {
    background: var(--avery-surface-subtle);
    border: 1px solid var(--avery-line);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.objection-list summary {
    min-block-size: 4.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    color: var(--avery-blue-deep);
    cursor: pointer;
    font-weight: 800;
    font-size: 0.95rem;
    list-style: none;
}

.objection-list details p {
    margin: 0;
    padding: 0 1.25rem 1.25rem;
    color: var(--avery-muted);
    font-size: 0.86rem;
    line-height: 1.55;
}

/* ==========================================================================
   10 / FAQ
   ========================================================================== */

.section--faq {
    background: #f4f7fd;
}

.faq-grid {
    display: grid;
    gap: 2.5rem 5rem;
}

.section-intro--sticky {
    align-self: start;
}

.faq-category-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.25rem 0.35rem;
}

.faq-category-header--margin {
    margin-block-start: 1.5rem;
}

.faq-category-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    background: var(--avery-blue-deep);
    color: var(--avery-white);
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.faq-category-badge--accent {
    background: var(--avery-magenta);
}

.faq-category-header h3 {
    margin: 0;
    color: var(--avery-blue-deep);
    font-size: 1.05rem;
    font-weight: 800;
}

.section-intro--center {
    text-align: center;
    max-inline-size: 46rem;
    margin-inline: auto;
    margin-block-end: clamp(2rem, 4vw, 3rem);
}

.section-intro--center .section-number {
    justify-content: center;
}

.section-intro--center h2 {
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
    letter-spacing: -0.02em;
}

.section-intro--center p {
    font-size: clamp(0.95rem, 1.6vw, 1.1rem);
    color: var(--avery-muted);
    line-height: 1.6;
}

.faq-columns-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}

.faq-column,
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-inline-size: 0;
}

.faq-column details,
.faq-list details {
    background: var(--avery-white);
    border: 1px solid #d3d9e8;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.faq-column details:hover,
.faq-list details:hover {
    border-color: #b0bbd6;
}

.faq-column details[open],
.faq-list details[open] {
    border-color: var(--avery-blue);
    box-shadow: 0 4px 16px rgba(0, 56, 165, 0.08);
}

.faq-column summary,
.faq-list summary {
    min-block-size: 4.25rem;
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr) 1.5rem;
    align-items: center;
    gap: 0.65rem;
    padding: 1rem 1.25rem;
    color: var(--avery-blue-deep);
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.35;
    list-style: none;
}

.faq-column summary > span,
.faq-list summary > span {
    color: var(--avery-magenta);
    font-size: 0.68rem;
    font-weight: 800;
}

.faq-column summary i,
.faq-list summary i {
    font-size: 1.35rem;
    font-style: normal;
    color: var(--avery-blue);
    transition: transform 180ms ease;
}

.faq-column details[open] summary i,
.faq-list details[open] summary i {
    transform: rotate(45deg);
}

@media (max-width: 56rem) {
    .faq-columns-grid {
        grid-template-columns: 1fr;
    }
}

.faq-answer {
    padding: 0 1.25rem 1.25rem 3.85rem;
}

.faq-answer > p:first-child {
    margin: 0;
    color: #414755;
    font-size: 0.86rem;
    line-height: 1.55;
}

.faq-answer .legal-note {
    margin-block-start: 0.75rem;
}

/* ==========================================================================
   11 / Quellen & Rechtsgrundlagen (Strukturierte Referenz-Tabelle)
   ========================================================================== */

.section--sources {
    background: #ffffff;
    border-block-start: 1px solid #e2e8f4;
}

.sources-container {
    display: flex;
    flex-direction: column;
    gap: clamp(1.75rem, 3.5vw, 2.5rem);
}

.section-intro-top {
    max-inline-size: 52rem;
}

.section-intro-top h2 {
    margin: 0.35rem 0 0.65rem;
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    color: var(--avery-blue-deep);
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.section-subtitle {
    margin: 0;
    font-size: clamp(0.92rem, 1.4vw, 1.02rem);
    color: var(--avery-muted);
    line-height: 1.6;
}

.sources-table {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #d6deec;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 56, 165, 0.04);
}

.sources-table__header {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr) 11rem;
    gap: 1.5rem;
    padding: 0.85rem 1.5rem;
    background: #f4f7fc;
    border-block-end: 1px solid #d6deec;
    font-size: 0.75rem;
    font-weight: 800;
    color: #55627a;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sources-table__row {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr) 11rem;
    gap: 1.5rem;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-block-end: 1px solid #e7ecf5;
    text-decoration: none;
    color: inherit;
    transition: background-color 140ms ease, border-color 140ms ease;
}

.sources-table__row:last-child {
    border-block-end: none;
}

.sources-table__row:hover {
    background: #f8faff;
}

.sources-table__row:focus-visible {
    outline: 2px solid var(--avery-blue);
    outline-offset: -2px;
}

.source-cell-meta {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.source-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--avery-blue);
    letter-spacing: 0.02em;
}

.source-badge--ihk {
    color: #a30046;
}

.source-date {
    font-size: 0.76rem;
    color: #6b7890;
    font-weight: 600;
}

.source-cell-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.source-cell-info strong {
    font-size: 0.94rem;
    color: var(--avery-blue-deep);
    font-weight: 700;
    line-height: 1.4;
    transition: color 140ms ease;
}

.sources-table__row:hover .source-cell-info strong {
    color: var(--avery-blue);
}

.source-cell-info p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--avery-muted);
    line-height: 1.5;
}

.source-cell-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    color: var(--avery-blue);
    font-size: 0.82rem;
    font-weight: 700;
}

.source-link-icon {
    transition: transform 140ms ease;
}

.sources-table__row:hover .source-link-icon {
    transform: translate(2px, -2px);
}

@media (max-width: 58rem) {
    .sources-table__header {
        display: none;
    }

    .sources-table__row {
        grid-template-columns: 1fr;
        gap: 0.85rem;
        padding: 1.15rem 1.25rem;
    }

    .source-cell-action {
        justify-content: flex-start;
        padding-block-start: 0.25rem;
        border-block-start: 1px dashed #e7ecf5;
    }
}

/* ==========================================================================
   Final CTA & Footer
   ========================================================================== */

.final-cta {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3.5rem, 6vw, 4.5rem);
    background: linear-gradient(135deg, var(--avery-blue-deep) 0%, #0623a8 100%);
    color: var(--avery-white);
}

@media (min-width: 64rem) {
    .final-cta {
        padding-block: clamp(6rem, 8vw, 8.5rem);
    }
}

.final-cta-grid {
    display: grid;
    align-items: end;
    gap: 2rem 4rem;
}

.final-cta h2,
.eyebrow--light {
    color: var(--avery-white);
}

.final-cta h2 {
    margin: 0;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
}

.final-cta-desc {
    max-inline-size: 38rem;
    margin: 0.75rem 0 0;
    color: #ced6ee;
    font-size: 0.95rem;
}

.final-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.button--light {
    background: var(--avery-white);
    color: var(--avery-blue-deep);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.button--light:hover {
    background: var(--avery-yellow);
    color: #1a1600;
}

.site-footer {
    padding-block: 3.5rem 1.5rem;
    background: #090c17;
    color: #cbd0e2;
}

.footer-grid {
    display: grid;
    gap: 2rem 5rem;
}

.footer-desc {
    max-inline-size: 32rem;
    margin: 0.35rem 0 0;
    color: #9299b0;
    font-size: 0.76rem;
}

.footer-product {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--avery-white);
    text-transform: uppercase;
}

.footer-nav {
    display: grid;
    align-content: start;
    gap: 0.65rem;
}

.footer-nav a,
.footer-cookie-trigger {
    color: var(--avery-white);
    font-size: 0.82rem;
    text-decoration: none;
    background: transparent;
    border: none;
    padding: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.footer-nav a:hover,
.footer-cookie-trigger:hover {
    color: var(--avery-cyan);
    text-decoration: underline;
}

.footer-nav a:focus-visible,
.footer-cookie-trigger:focus-visible {
    outline: 2px solid var(--avery-yellow);
    outline-offset: 2px;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    margin-block-start: 2.5rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid #202538;
    color: #7b8298;
    font-size: 0.68rem;
}

.footer-bottom p {
    margin: 0;
}

.footer-llm-links {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.62rem;
    font-family: var(--font-ui);
    color: #484f66;
    opacity: 0.45;
    transition: opacity 160ms ease, color 160ms ease;
}

.footer-llm-links:hover {
    opacity: 0.85;
    color: #7b8298;
}

.footer-llm-link {
    color: inherit;
    text-decoration: none;
    transition: color 140ms ease;
}

.footer-llm-link:hover {
    text-decoration: underline;
    color: var(--avery-cyan);
}

.footer-llm-link:focus-visible {
    outline: 1px solid var(--avery-yellow);
    outline-offset: 2px;
}

.footer-llm-divider {
    user-select: none;
    opacity: 0.6;
}

/* ==========================================================================
   Sticky Floating Action Banner (3-Element Dock)
   ========================================================================== */

.sticky-cta {
    position: fixed;
    z-index: 90;
    inset-inline: clamp(0.5rem, 2.5vw, 1.25rem);
    inset-block-end: clamp(0.5rem, 2.5vw, 1rem);
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.75rem;
    max-inline-size: 50rem;
    margin-inline: auto;
    padding: 0.65rem 0.85rem;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid #b2b8ca;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-floating);
    animation: sticky-slide-up 240ms cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

@keyframes sticky-slide-up {
    from {
        opacity: 0;
        transform: translateY(1.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sticky-cta[hidden] {
    display: none !important;
}

.sticky-cta__center {
    min-width: 0;
    overflow: hidden;
    text-align: center;
    padding-inline: 0.25rem;
}

.sticky-cta__label {
    display: block;
    color: var(--avery-blue-deep);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky-cta .button--sm {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.45rem 0.85rem;
    font-size: 0.76rem;
    border-radius: var(--radius-xs);
    min-block-size: 2.25rem;
}

.sticky-cta .button--primary {
    box-shadow: none;
}

.sticky-close {
    inline-size: 1.85rem;
    block-size: 1.85rem;
    flex-shrink: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--avery-muted);
    cursor: pointer;
    font-size: 1.35rem;
    display: grid;
    place-items: center;
    transition: color 140ms ease, background-color 140ms ease;
}

.sticky-close:hover {
    color: var(--avery-blue-deep);
    background: var(--avery-surface-subtle);
}

/* ==========================================================================
   Responsive Breakpoints & Layout Shifts
   ========================================================================== */

@media (min-width: 48rem) {
    .shell {
        inline-size: min(100% - 3.5rem, var(--shell));
    }

    .check-split-layout {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
    }

    .matrix-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .friction-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .classification-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .role-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .comparison {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .industry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eu-rule-strip ul,
    .review-cases ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .final-cta-grid,
    .footer-grid {
        grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 0.7fr);
    }
}

@media (min-width: 64rem) {
    .hero-grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        align-items: start;
    }

    .section-heading-row {
        grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 0.6fr);
    }

    .classification-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .mechanism-grid,
    .readiness-grid,
    .objections-grid,
    .sources-grid,
    .faq-grid {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }

    .section-intro--sticky {
        position: sticky;
        inset-block-start: 6.5rem;
    }
}

/* Mobile & Tablet (< 64rem / 1024px): Hero ordering & generator prioritization */
@media (max-width: 63.99rem) {
    .hero-grid {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .label-workbench {
        order: -1;
        margin-inline: 0;
        max-inline-size: 100%;
        box-sizing: border-box;
    }

    .hero-copy {
        order: 1;
    }

    .hero .trust-bar {
        display: none !important;
    }

    .hero {
        padding-block: clamp(1.5rem, 4vw, 3rem);
    }
}

/* Tablet / Mobile Navigation Breakpoint (< 54rem / 864px) */
@media (max-width: 54rem) {
    :root {
        --site-header-height: 3.75rem;
    }

    .site-nav {
        display: none;
    }

    .header-action {
        display: none;
    }

    .burger-btn {
        display: flex;
    }

    .header-inner {
        min-block-size: 3.75rem;
        padding-block: 0.45rem;
    }
}

/* Phone Viewports (< 40rem / 640px): Usability & Overflow Protection */
@media (max-width: 40rem) {
    .shell {
        inline-size: calc(100% - 1.5rem);
    }

    .label-workbench {
        padding: 0.85rem 0.75rem;
        border-radius: var(--radius-md);
    }

    .workbench-topline {
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-block-end: 0.65rem;
    }

    .workbench-header-left,
    .workbench-header-right {
        flex: 1 1 auto;
    }

    .workbench-mode-switch {
        inline-size: 100%;
        justify-content: center;
        padding: 0.2rem;
    }

    .mode-toggle {
        flex: 1;
        text-align: center;
        padding: 0.35rem 0.45rem;
        font-size: 0.66rem;
    }

    .label-sheet {
        margin: 0.5rem auto 0.75rem;
        max-inline-size: min(100%, 280px);
    }

    .label-sheet--compact {
        margin: 0.85rem 0 0.65rem;
    }

    .form-row-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 0.65rem;
    }

    .form-row-grid .preview-field {
        display: block;
        grid-row: auto;
    }

    .preview-field label {
        font-size: 0.76rem;
    }

    .preview-field input {
        font-size: 0.88rem;
        padding: 0.55rem 0.75rem;
    }

    .segmented-group {
        flex-direction: column;
        gap: 0.35rem;
    }

    .segmented-group--duo-slider {
        position: relative;
    }

    .segmented-slider-thumb {
        display: none; /* fallback to individual checked style on vertical stack */
    }

    .editor-actions {
        flex-direction: column;
        gap: 0.6rem;
    }

    .editor-actions .button {
        inline-size: 100%;
    }

    .choice-cards-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .choice-card__box {
        padding: 0.75rem 0.9rem;
        min-block-size: auto;
    }

    .choice-card__title {
        font-size: 0.98rem;
    }

    .choice-card__desc {
        font-size: 0.76rem;
    }

    .sticky-cta {
        grid-template-columns: 1fr 1fr auto;
        gap: 0.4rem;
        padding: 0.45rem 0.55rem;
        border-radius: var(--radius-sm);
    }

    .sticky-cta__center {
        display: none !important;
    }

    .sticky-cta .button--sm {
        inline-size: 100%;
        justify-content: center;
        text-align: center;
        padding: 0.45rem 0.4rem;
        font-size: 0.72rem;
        min-block-size: 2.1rem;
    }
}

/* Very narrow screens (< 23.5rem / 375px) */
@media (max-width: 23.5rem) {
    .text-lockup__logo {
        height: 1.55rem;
    }

    .text-lockup__product {
        font-size: 0.95rem;
    }

    .text-lockup__brand {
        font-size: 0.64rem;
    }

    .sticky-cta {
        grid-template-columns: 1fr 1fr auto;
        gap: 0.25rem;
        padding: 0.35rem 0.4rem;
    }

    .sticky-cta__center {
        display: none !important;
    }

    .sticky-cta .button--sm {
        padding: 0.32rem 0.25rem;
        font-size: 0.65rem;
    }

    .sticky-close {
        inline-size: 1.5rem;
        block-size: 1.5rem;
        font-size: 1.15rem;
    }
}

/* ==========================================================================
   Accessibility, High Contrast & Print Modes
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .button:hover:not(.button--disabled):not(:disabled) {
        transform: none;
    }
}

@media (forced-colors: active) {
    .button,
    .choice-card__box,
    .segmented-item input:checked + .segmented-label,
    .check-result,
    .legal-note {
        border: 2px solid ButtonText;
    }
}

@media print {
    .site-header,
    .hero-actions,
    .sticky-cta,
    .preview-form,
    .check-actions,
    .cookie-consent-container {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
    }

    .section,
    .hero,
    .final-cta {
        padding-block: 2rem;
        break-inside: avoid;
    }
}

/* ==========================================================================
   Cookie Consent System (Slim Banner & Expandable Settings Drawer)
   ========================================================================== */

.cookie-consent-container {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
}

.cookie-consent-container[hidden] {
    display: none !important;
}

.cookie-consent-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 19, 34, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
}

.cookie-consent-container.is-drawer-open .cookie-consent-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.cookie-consent-sheet {
    position: relative;
    inline-size: 100%;
    max-inline-size: 56rem;
    margin-inline: auto;
    background: #ffffff;
    border-top: 1px solid rgba(0, 56, 165, 0.15);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
    overflow: hidden;
    animation: cookieSheetSlideUp 260ms cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

@keyframes cookieSheetSlideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slim Initial Banner View */
.cookie-banner-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(1.2rem, 2.5vw, 1.65rem) clamp(1.25rem, 3vw, 2.25rem);
}

.cookie-banner-body {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.cookie-title {
    margin: 0;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 800;
    color: #111827;
    line-height: 1.25;
}

.cookie-text {
    margin: 0;
    color: #374151;
    font-size: 0.86rem;
    line-height: 1.48;
}

.cookie-text--legal {
    font-size: 0.84rem;
    color: #4b5563;
}

.cookie-legal-link {
    color: var(--avery-blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 140ms ease;
}

.cookie-legal-link:hover {
    color: var(--avery-blue-deep);
}

.cookie-banner-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding-block-start: 0.75rem;
    border-block-start: 1px solid #f3f4f6;
}

/* Button Variants for Cookie Consent */
.button--consent-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.6rem;
    background: #0038a5;
    color: #ffffff;
    border: 2px solid #0038a5;
    border-radius: 9999px;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 120ms ease;
}

.button--consent-primary:hover {
    background: #002b80;
    border-color: #002b80;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 56, 165, 0.25);
}

.button--consent-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.6rem;
    background: transparent;
    color: #0038a5;
    border: 2px solid #0038a5;
    border-radius: 9999px;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.button--consent-outline:hover {
    background: #f0f4ff;
    color: #002b80;
}

.button--consent-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1rem;
    background: transparent;
    border: 0;
    color: #0038a5;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: color 140ms ease, text-decoration 140ms ease;
}

.button--consent-text:hover {
    color: #002b80;
    text-decoration: underline;
}

.button--consent-primary:focus-visible,
.button--consent-outline:focus-visible,
.button--consent-text:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

/* Detailed Settings Drawer View */
.cookie-settings-view {
    display: flex;
    flex-direction: column;
    max-block-size: min(85vh, 48rem);
    animation: modal-fade-in 180ms ease-out;
}

.cookie-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem clamp(1.25rem, 3vw, 2.25rem);
    border-block-end: 1px solid #e5e7eb;
}

.cookie-settings-close {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: #4b5563;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}

.cookie-settings-close:hover {
    background: #f3f4f6;
    color: #111827;
}

.cookie-settings-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.15rem clamp(1.25rem, 3vw, 2.25rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cookie-category-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-block-end: 1.15rem;
    border-block-end: 1px solid #f3f4f6;
}

.cookie-category-card--master {
    padding-block-start: 0.5rem;
    border-block-end: 0;
}

.cookie-category-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.cookie-category-title-group {
    font-size: 0.96rem;
    color: #111827;
}

.cookie-category-desc {
    margin: 0;
    font-size: 0.80rem;
    color: #4b5563;
    line-height: 1.45;
    padding-inline-start: calc(44px + 0.85rem);
}

/* Custom Accessible Toggle Switch (iOS / Avery Style) */
.cookie-switch {
    position: relative;
    display: inline-block;
    inline-size: 44px;
    block-size: 24px;
    flex-shrink: 0;
    cursor: pointer;
}

.cookie-switch input {
    position: absolute;
    opacity: 0;
    inline-size: 0;
    block-size: 0;
}

.cookie-slider {
    position: absolute;
    inset: 0;
    background-color: #cbd5e1;
    border-radius: 24px;
    transition: background-color 200ms ease;
}

.cookie-slider::before {
    position: absolute;
    content: "";
    block-size: 18px;
    inline-size: 18px;
    inset-inline-start: 3px;
    inset-block-end: 3px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 200ms ease;
}

.cookie-switch input:checked + .cookie-slider {
    background-color: #0038a5;
}

.cookie-switch input:checked + .cookie-slider::before {
    transform: translateX(20px);
}

.cookie-switch input:focus-visible + .cookie-slider {
    box-shadow: 0 0 0 3px rgba(0, 56, 165, 0.25);
}

.cookie-slider.is-locked {
    background-color: #7b9cdb !important;
    cursor: not-allowed;
}

.cookie-settings-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 1rem clamp(1.25rem, 3vw, 2.25rem);
    border-block-start: 1px solid #e5e7eb;
    background: #fafafa;
}

@media (max-width: 48rem) {
    .cookie-category-desc {
        padding-inline-start: 0;
    }

    .cookie-banner-actions,
    .cookie-settings-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .button--consent-primary,
    .button--consent-outline,
    .button--consent-text {
        inline-size: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   Editorial Guide & Comparison Page Styles
   (gewaehrleistungslabel-vs-garan-label.html)
   ========================================================================== */

.breadcrumb-nav {
    background: var(--avery-surface-subtle);
    border-block-end: 1px solid var(--avery-line-subtle);
    padding-block: 0.75rem;
    font-size: 0.85rem;
}

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

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    color: var(--avery-muted);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    margin-inline-end: 0.5rem;
    color: var(--avery-line);
    font-weight: 700;
}

.breadcrumb-link {
    color: var(--avery-blue);
    text-decoration: none;
    transition: color 150ms ease;
}

.breadcrumb-link:hover,
.breadcrumb-link:focus-visible {
    color: var(--avery-blue-deep);
    text-decoration: underline;
}

.breadcrumb-current {
    color: var(--avery-ink);
    font-weight: 600;
}

/* Editorial Hero */
.editorial-hero {
    background: linear-gradient(180deg, var(--avery-surface-subtle) 0%, var(--avery-white) 100%);
    padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
    border-block-end: 1px solid var(--avery-line-subtle);
}

.editorial-hero__inner {
    max-inline-size: 52rem;
    margin-inline: auto;
}

.editorial-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-block-end: 1rem;
}

.editorial-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 4vw, 2.75rem);
    line-height: 1.18;
    color: var(--avery-blue-deep);
    margin-block-end: 1.25rem;
    letter-spacing: -0.02em;
}

.editorial-lead {
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    line-height: 1.6;
    color: var(--avery-ink);
    margin-block-end: 1.5rem;
}

/* Disclaimer Callout */
.disclaimer-card {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: var(--avery-surface-subtle);
    border: 1px solid var(--avery-line);
    border-inline-start: 4px solid var(--avery-blue);
    border-radius: var(--radius-xs);
    padding: 0.85rem 1.15rem;
    margin-block-end: 2rem;
    font-size: 0.88rem;
    color: var(--avery-muted);
    line-height: 1.5;
}

.disclaimer-card--warning {
    background: var(--avery-warning-light);
    border-color: #ffd699;
    border-inline-start-color: var(--avery-warning);
    color: #5c3100;
}

.disclaimer-card__icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    line-height: 1;
    margin-block-start: 0.1rem;
}

/* Official EU Source Callout Card */
.official-source-card {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: #f0f4fc;
    border: 1px solid #c9d8f5;
    border-inline-start: 4px solid var(--eu-blue, #003399);
    border-radius: var(--radius-xs);
    padding: 0.85rem 1.15rem;
    margin-block: 1.25rem;
    font-size: 0.88rem;
    color: var(--avery-ink);
    line-height: 1.5;
}

.official-source-card__icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    line-height: 1;
    margin-block-start: 0.1rem;
}

.official-source-card p {
    margin: 0;
}

.official-source-card a {
    color: #003399;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.official-source-card a:hover {
    color: #002266;
}

.official-source-card__meta {
    margin-block-start: 0.3rem !important;
    font-size: 0.78rem;
    color: var(--avery-muted);
}

/* Editorial Body Layout */
.editorial-body {
    padding-block: clamp(2rem, 4vw, 3.5rem);
}

.editorial-content {
    max-inline-size: 52rem;
    margin-inline: auto;
}

.editorial-section {
    margin-block-end: clamp(2.5rem, 5vw, 4rem);
}

.editorial-section:last-child {
    margin-block-end: 0;
}

.editorial-section h2 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.8vw, 1.85rem);
    color: var(--avery-blue-deep);
    line-height: 1.25;
    margin-block: 0 1rem;
    padding-block-end: 0.5rem;
    border-block-end: 2px solid var(--avery-blue-light);
}

.editorial-section h3 {
    font-size: 1.2rem;
    color: var(--avery-ink);
    margin-block: 1.75rem 0.65rem;
}

.editorial-section p,
.editorial-section li {
    font-size: 1rem;
    line-height: 1.68;
    color: #2b2f3e;
}

.editorial-section ul,
.editorial-section ol {
    padding-inline-start: 1.4rem;
    margin-block: 0.75rem 1.25rem;
}

.editorial-section li + li {
    margin-block-start: 0.4rem;
}

/* Comparison Table (Editorial) */
.comparison-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-block: 1.5rem 2rem;
    border: 1px solid var(--avery-line);
    border-radius: var(--radius-md);
    background: var(--avery-white);
    box-shadow: var(--shadow-card);
}

.comparison-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    text-align: start;
    min-inline-size: 640px;
}

.comparison-table th,
.comparison-table td {
    padding: 1rem 1.15rem;
    border-block-end: 1px solid var(--avery-line-subtle);
    vertical-align: top;
}

.comparison-table thead th {
    background: var(--avery-blue-deep);
    color: var(--avery-white);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

.comparison-table thead th:first-child {
    inline-size: 24%;
}

.comparison-table thead th:nth-child(2) {
    inline-size: 38%;
    background: #0b2272;
}

.comparison-table thead th:nth-child(3) {
    inline-size: 38%;
    background: var(--avery-blue);
    border-inline-start: 2px solid var(--avery-yellow);
}

.comparison-table tbody tr:last-child td {
    border-block-end: none;
}

.comparison-table tbody tr:hover {
    background-color: #fafbfe;
}

.comparison-table td:first-child {
    font-weight: 700;
    color: var(--avery-ink);
    background: var(--avery-surface-subtle);
}

.comparison-table td:nth-child(3) {
    border-inline-start: 1px solid var(--avery-line-subtle);
    background: rgba(232, 240, 254, 0.25);
}

.badge-pill {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-xs);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-pill--static {
    background: #e2e8f0;
    color: #334155;
}

.badge-pill--dynamic {
    background: var(--avery-blue-light);
    color: var(--avery-blue-deep);
}

.badge-pill--free {
    background: var(--avery-success-light);
    color: var(--avery-success);
}

/* Feature & Download Cards */
.feature-box-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-block: 1.5rem;
}

.feature-box {
    background: var(--avery-surface-subtle);
    border: 1px solid var(--avery-line-subtle);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

.feature-box h4 {
    margin: 0 0 0.5rem;
    color: var(--avery-blue-deep);
    font-size: 1rem;
}

.feature-box p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--avery-muted);
}

/* Resource / Download Action Box */
.resource-download-card {
    background: var(--avery-cream);
    border: 1.5px solid #ebd9b8;
    border-radius: var(--radius-md);
    padding: 1.35rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block: 1.5rem;
}

.resource-download-card__text h4 {
    margin: 0 0 0.25rem;
    color: var(--avery-ink);
    font-size: 1.05rem;
}

.resource-download-card__text p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--avery-muted);
}

/* Decision Flow / Case Study Cards */
.decision-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-block: 1.5rem 2rem;
}

.decision-card {
    background: var(--avery-white);
    border: 1.5px solid var(--avery-line);
    border-radius: var(--radius-md);
    padding: 1.35rem 1.5rem;
    position: relative;
    box-shadow: var(--shadow-card);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.decision-card:hover {
    box-shadow: var(--shadow-paper);
}

.decision-card--highlight {
    border-color: var(--avery-blue);
    border-inline-start: 6px solid var(--avery-blue);
    background: linear-gradient(180deg, #fafcff 0%, var(--avery-white) 100%);
}

.decision-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-block-end: 0.75rem;
}

.decision-card__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 50%;
    background: var(--avery-blue);
    color: var(--avery-white);
    font-weight: 800;
    font-size: 0.85rem;
}

.decision-card__title {
    margin: 0;
    font-size: 1.15rem;
    color: var(--avery-ink);
}

.decision-card__result {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-xs);
    font-size: 0.82rem;
    font-weight: 700;
    margin-block: 0.75rem;
}

.decision-card__result--both {
    background: var(--avery-blue-light);
    color: var(--avery-blue-deep);
    border: 1px solid #bfd3fa;
}

.decision-card__result--single {
    background: var(--avery-surface-subtle);
    color: #334155;
    border: 1px solid var(--avery-line);
}

.decision-card p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--avery-muted);
}

/* Legal Risk Alert Boxes */
.risk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-block: 1.5rem;
}

.risk-card {
    background: var(--avery-danger-light);
    border: 1px solid #fedcd5;
    border-radius: var(--radius-md);
    padding: 1.25rem 1.35rem;
}

.risk-card h4 {
    margin: 0 0 0.5rem;
    color: var(--avery-danger);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.risk-card p {
    margin: 0;
    font-size: 0.88rem;
    color: #5c190a;
}

/* Static FAQ List (Editorial) */
.faq-editorial-list {
    display: grid;
    gap: 1.25rem;
    margin-block: 1.5rem 2rem;
}

.faq-editorial-item {
    background: var(--avery-surface-subtle);
    border: 1px solid var(--avery-line);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
}

.faq-editorial-q {
    margin: 0 0 0.65rem;
    color: var(--avery-blue-deep);
    font-size: 1.08rem;
    font-weight: 700;
}

.faq-editorial-a {
    margin: 0;
    font-size: 0.95rem;
    color: #2b2f3e;
    line-height: 1.6;
}

/* Conversion Banner Box (Avery Print / Generator) */
.conversion-banner-box {
    background: linear-gradient(135deg, var(--avery-blue-deep) 0%, var(--avery-blue) 100%);
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 4vw, 2.75rem);
    color: var(--avery-white);
    margin-block: 2.5rem 1.5rem;
    box-shadow: var(--shadow-floating);
}

.conversion-banner-box h3 {
    color: var(--avery-white);
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
    margin: 0 0 0.75rem;
}

.conversion-banner-box p {
    color: #dbe4f8;
    margin: 0 0 1.5rem;
    font-size: 1rem;
    max-inline-size: 44rem;
}

.conversion-banner-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

@media (max-width: 48rem) {
    .editorial-hero__meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .conversion-banner-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .conversion-banner-actions .button {
        inline-size: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   Download Hub Styles
   (gewaehrleistungslabel-download.html)
   ========================================================================== */

.download-hero-card {
    background: var(--avery-white);
    border: 1.5px solid var(--avery-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    display: grid;
    grid-template-columns: minmax(200px, 280px) 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    margin-block: 1.5rem 2.5rem;
    align-items: center;
}

.download-hero-preview {
    background: var(--avery-surface-subtle);
    border: 1px solid var(--avery-line-subtle);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.download-hero-preview img {
    inline-size: 100%;
    max-inline-size: 240px;
    block-size: auto;
    border-radius: var(--radius-xs);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.download-hero-info h3 {
    margin: 0 0 0.5rem;
    color: var(--avery-blue-deep);
    font-size: 1.35rem;
    font-family: var(--font-display);
}

.download-hero-info p {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    color: var(--avery-muted);
}

.download-specs-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: grid;
    gap: 0.55rem;
    font-size: 0.88rem;
    color: var(--avery-ink);
    line-height: 1.5;
}

.download-specs-list li {
    position: relative;
    padding-inline-start: 1.35rem;
    margin: 0;
    display: block;
    text-align: start;
}

.download-specs-list li::before {
    content: "✓";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    color: var(--avery-success);
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.5;
}

.download-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-block-start: 1.25rem;
}

.download-hero-actions .button {
    white-space: nowrap;
}

.download-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-block: 1.5rem 2rem;
    border: 1px solid var(--avery-line);
    border-radius: var(--radius-md);
    background: var(--avery-white);
    box-shadow: var(--shadow-card);
}

.table-download {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    text-align: start;
    min-inline-size: 580px;
}

.table-download th,
.table-download td {
    padding: 0.85rem 1.15rem;
    border-block-end: 1px solid var(--avery-line-subtle);
    vertical-align: middle;
}

.table-download thead th {
    background: var(--avery-blue-deep);
    color: var(--avery-white);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
}

.table-download thead th:first-child {
    inline-size: 40%;
}

.table-download thead th:nth-child(2),
.table-download thead th:nth-child(3) {
    inline-size: 30%;
    text-align: center;
}

.table-download tbody tr:last-child td {
    border-block-end: none;
}

.table-download tbody tr:hover {
    background-color: #fafbfe;
}

.table-download td:nth-child(2),
.table-download td:nth-child(3) {
    text-align: center;
}

.lang-cell {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.lang-cell__native {
    font-weight: 700;
    color: var(--avery-ink);
}

.lang-cell__german {
    font-size: 0.8rem;
    color: var(--avery-muted);
}

.btn-download-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 150ms ease;
    min-inline-size: 110px;
}

.btn-download-pill--pdf {
    background: var(--avery-surface-subtle);
    border: 1px solid var(--avery-line);
    color: var(--avery-ink);
}

.btn-download-pill--pdf:hover,
.btn-download-pill--pdf:focus-visible {
    background: #e9ecf2;
    border-color: #b8c0d1;
    color: var(--avery-blue-deep);
}

.btn-download-pill--png {
    background: var(--avery-blue-light);
    border: 1px solid #bfd3fa;
    color: var(--avery-blue-deep);
}

.btn-download-pill--png:hover,
.btn-download-pill--png:focus-visible {
    background: #d4e3fc;
    border-color: var(--avery-blue);
}

/* Rules Grid (2x2 on Desktop) */
.rules-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-block: 1.5rem;
}

@media (min-width: 48rem) {
    .rules-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.rule-card {
    background: var(--avery-surface-subtle);
    border: 1px solid var(--avery-line-subtle);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    border-inline-start: 4px solid var(--avery-blue);
}

.rule-card h4 {
    margin: 0 0 0.5rem;
    color: var(--avery-blue-deep);
    font-size: 1.02rem;
}

.rule-card p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--avery-muted);
}

/* Mistakes Grid (2x2 on Desktop) */
.mistakes-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-block: 1.5rem;
}

@media (min-width: 48rem) {
    .mistakes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.mistake-card {
    background: var(--avery-danger-light);
    border: 1px solid #fedcd5;
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

.mistake-card h4 {
    margin: 0 0 0.5rem;
    color: var(--avery-danger);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.mistake-card p {
    margin: 0;
    font-size: 0.88rem;
    color: #5c190a;
}

@media (max-width: 48rem) {
    .download-hero-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .download-hero-preview {
        margin-inline: auto;
    }

    .download-specs-list li {
        justify-content: center;
    }

    .download-hero-actions {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* ==========================================================================
   2-Tier Sticky Sub-Header Bar (Sub-Navigation for Subpages)
   ========================================================================== */

/* Subpages: Guarantee permanently sticky header & sub-header */
body.has-sub-header .site-header {
    position: sticky;
    inset-block-start: 0;
    transform: none !important;
    box-shadow: 0 1px 4px rgba(16, 19, 34, 0.04);
}

.sub-header-bar {
    position: sticky;
    inset-block-start: var(--site-header-height, 4.25rem);
    z-index: 95;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--avery-line-subtle);
    box-shadow: 0 2px 8px rgba(16, 19, 34, 0.04);
    transition: inset-block-start 200ms ease;
}

.site-header.is-hidden ~ .sub-header-bar,
.site-header.is-hidden + .sub-header-bar {
    inset-block-start: 0;
}

.sub-header-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-block-size: 2.85rem;
    padding-block: 0.25rem;
}

.sub-header-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding-block: 0.15rem;
    inline-size: 100%;
}

.sub-header-nav::-webkit-scrollbar {
    display: none;
}

.sub-header-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--avery-muted);
    text-decoration: none;
    border-radius: 9999px;
    background: transparent;
    border: 1px solid transparent;
    transition: all 140ms ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.sub-header-link:hover {
    color: var(--avery-blue-deep);
    background: var(--avery-surface-subtle);
    border-color: var(--avery-line);
}

.sub-header-link.is-active {
    color: var(--avery-blue-deep);
    background: var(--avery-blue-light);
    border-color: #bfd3fa;
    font-weight: 700;
}

/* Compensate anchor scroll offsets on pages with 2-tier sticky headers */
body.has-sub-header [id] {
    scroll-margin-block-start: calc(var(--site-header-height, 4.25rem) + 3.25rem + 1rem);
}

@media (max-width: 48rem) {
    .sub-header-inner {
        padding-inline: 0;
    }

    .sub-header-nav {
        padding-inline: 1rem;
    }
}

/* ==========================================================================
   Notice Download Teaser Section (Home Page below 02)
   ========================================================================== */

.section--notice-teaser {
    background: #f4f8fd;
    border-block-start: 1px solid #dce9f8;
    border-block-end: 1px solid #dce9f8;
    padding-block: clamp(3rem, 5vw, 4.5rem);
}

.notice-teaser-card {
    background: var(--avery-white);
    border: 1.5px solid #d0e1fd;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 28px rgba(0, 56, 165, 0.08);
    display: grid;
    grid-template-columns: minmax(200px, 280px) 1fr;
    gap: clamp(1.75rem, 3.5vw, 3rem);
    padding: clamp(1.75rem, 3.5vw, 2.75rem);
    align-items: center;
}

.notice-teaser-preview {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}

.notice-teaser-preview img {
    max-inline-size: 190px;
    block-size: auto;
    border-radius: var(--radius-xs);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.notice-teaser-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    background: var(--avery-blue-light);
    color: var(--avery-blue-deep);
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.notice-teaser-content h3 {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
    color: var(--avery-blue-deep);
    margin: 0.5rem 0 0.75rem;
    line-height: 1.25;
}

.notice-teaser-content p {
    color: var(--avery-muted);
    font-size: 0.96rem;
    line-height: 1.6;
    margin: 0 0 1.25rem;
}

.notice-teaser-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    display: grid;
    gap: 0.55rem;
    font-size: 0.9rem;
    color: var(--avery-ink);
    line-height: 1.5;
}

.notice-teaser-features li {
    position: relative;
    padding-inline-start: 1.35rem;
    margin: 0;
    display: block;
    text-align: start;
}

.notice-teaser-features li::before {
    content: "✓";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    color: var(--avery-blue);
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.5;
}

.notice-teaser-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

@media (max-width: 48rem) {
    .notice-teaser-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .notice-teaser-preview {
        margin-inline: auto;
    }

    .notice-teaser-features li {
        justify-content: center;
    }

    .notice-teaser-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .notice-teaser-actions .button {
        inline-size: 100%;
        text-align: center;
    }
}