/* GENERATED by tools/critical-css/generate.py - DO NOT EDIT.
   Sources (edit these, then regenerate): styles.css, legal.css */
:root {
    /* Primary Colors */
    --color-green: rgb(76, 175, 80);
    --color-green-dark: #45a049;
    --color-green-light: rgba(76, 175, 80, 0.1);
    
    --color-blue: rgb(59, 180, 196);
    --color-blue-dark: #2f8f9d;
    --color-blue-light: rgba(59, 180, 196, 0.1);

    --color-yellow: rgb(196, 171, 59);
    --color-yellow-dark: #b39a2a;
    --color-yellow-light: rgba(196, 171, 59, 0.1);

    /* Accessible (WCAG AA) variants — used for interactive UI (button
       backgrounds with white text, body links, focus outlines) where the
       bright brand hues fail contrast. The bright hues above stay for
       decorative fills, icon tints and gradients. */
    /* Each is the LIGHTEST tint of the brand hue that still passes WCAG AA
       (≈4.5:1) with white text / on white — i.e. as close to the original
       brand color as the contrast test allows. */
    --color-green-accessible: #3a863d;   /* white text ≈ 4.5:1 (brand green, min-darkened) */
    --color-blue-accessible: #2a818d;    /* white text / link ≈ 4.5:1 (brand blue, min-darkened) */
    --color-yellow-accessible: #6b5d16;  /* white text ≈ 6.9:1 (dark olive, for small text on white) */
    --color-yellow-button: #877629;      /* darkest-passing tint of the brand yellow — white text ≈ 4.5:1 */
    --color-link: #277884;               /* body link text ≥ 4.5:1 on white AND the
                                            tinted section backgrounds (--color-bg,
                                            --color-bg-alt, blue-light) */

    /* Hover shades — all buttons darken by the same amount on hover so the
       interaction is consistent (bases are already the darkened accessible
       values, so the old *-dark vars would read as lighter). */
    --color-green-hover: #306e32;
    --color-blue-hover: #226a74;
    --color-yellow-hover: #6f6122;
    
    --color-red: rgb(196, 59, 59);
    --color-red-dark: #a52f2f;
    --color-red-light: rgba(196, 59, 59, 0.1);
    
    /* Neutrals */
    --color-white: #ffffff;
    --color-bg: #f8f9fa;
    --color-bg-alt: #f2f2f2;
    --color-border: #e1e1e1;
    --color-border-light: #eee;
    
    --color-text-primary: #2c3e50;
    --color-text-secondary: #555;
    --color-text-muted: #6b7280; /* darkened from #888 for WCAG AA on small print */
    --color-text-light: #767676; /* darkened from #999 - 4.5:1 on white (WCAG AA) */
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.15);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.2);
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-pill: 999px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    
    /* Container */
    --container-max: 1200px;
    --container-wide: 1400px;
}
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    /* Disable mobile-Chrome font boosting: it re-inflates text on the long
       article pages shortly after load, reflowing the whole page (CLS ~0.15
       measured on the four longest guides). */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-white);
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover {
    color: var(--color-blue-dark);
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-primary);
}
h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.3rem, 3vw, 1.75rem); }
p {
    margin-bottom: 1rem;
    color: var(--color-text-secondary);
}
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
}
.btn-primary {
    background: var(--color-green-accessible);
    color: var(--color-white);
}
.btn-primary:hover {
    background: var(--color-green-hover);
    color: var(--color-white);
    transform: translateY(-2px);
    /* glow derived from the accessible button green (#3a863d), not the bright brand hue */
    box-shadow: 0 8px 20px rgba(58, 134, 61, 0.35);
}
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border-light);
    transition: all var(--transition-normal);
}
.header.scrolled {
    box-shadow: var(--shadow-md);
}
.topbar {
    background: var(--color-text-primary);
}
.topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 24px;
}
.topbar-social {
    display: flex;
    gap: 4px;
}
.topbar-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 6px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
    transition: color var(--transition-fast);
}
.topbar-social a:hover {
    color: var(--color-white);
}
.topbar-login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 2px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}
.topbar-login:hover {
    color: var(--color-white);
    text-decoration: underline;
}
.topbar-login i {
    font-size: 0.75rem;
}
.topbar-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    transition: color var(--transition-fast);
}
.topbar-phone:hover {
    color: var(--color-white);
}
.topbar-phone i {
    font-size: 0.75rem;
}
@media (max-width: 900px) {
.topbar-phone {
        display: none;
    }
}
@media (max-width: 768px) {
.topbar {
        display: none;
    }
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    max-width: var(--container-wide);
    margin: 0 auto;
}
.logo {
    display: flex;
    align-items: center;
}
.logo-img {
    height: 60px;
    width: auto;
}
.nav {
    display: flex;
    align-items: center;
    gap: 40px;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
}
.nav-links a {
    color: var(--color-text-secondary);
    font-weight: 500;
    transition: color var(--transition-fast);
}
.nav-links a:hover {
    color: var(--color-blue-accessible);
}
.nav-links > li {
    position: relative;
}
.nav-links .has-dropdown > a {
    display: inline-flex;
    align-items: center;
}
.nav-caret {
    font-size: 0.65rem;
    margin-left: 6px;
    opacity: 0.7;
    transition: transform var(--transition-fast);
}
.has-dropdown:hover .nav-link-btn,
.has-dropdown.open .nav-link-btn {
    color: var(--color-blue);
}
.has-dropdown:hover .nav-caret,
.has-dropdown:focus-within .nav-caret,
.has-dropdown.open .nav-caret {
    transform: rotate(180deg);
}
.has-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -20px;
    right: -20px;
    height: 22px;
}
.nav-dropdown {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    transform: translate(-50%, 8px);
    min-width: 300px;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    z-index: 200;
}
.nav-dropdown::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 26px;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown,
.has-dropdown.open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}
.nav-dropdown-item:hover {
    background: var(--color-bg);
    color: var(--color-text-primary);
}
.nav-dropdown-item > i {
    color: var(--color-blue);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.nav-dropdown-compact {
    font-size: 0.95rem;
    font-weight: 500;
    padding: 9px 12px;
    gap: 9px;
}
.nav-dropdown-compact > i {
    width: 16px;
    font-size: 0.9em;
}
.nav-dropdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}
.nav-dropdown-mega {
    min-width: 820px;
    max-width: min(820px, calc(100vw - 32px));
    left: 50%;
    transform: translate(-42%, 8px);
}
.has-dropdown:hover .nav-dropdown-mega,
.has-dropdown:focus-within .nav-dropdown-mega,
.has-dropdown.open .nav-dropdown-mega {
    transform: translate(-42%, 0);
}
.nav-links .has-dropdown.force-closed .nav-dropdown,
.nav-links .has-dropdown.force-closed .nav-dropdown-mega {
    opacity: 0;
    visibility: hidden;
}
.nav-dropdown-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.nav-dropdown-col {
    display: flex;
    flex-direction: column;
}
.nav-dropdown-col + .nav-dropdown-col {
    border-left: 1px solid var(--color-border-light);
    padding-left: 20px;
}
.nav-dropdown-heading {
    display: block;
    padding: 4px 14px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}
.nav-dropdown-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 4px 2px;
    padding: 10px 14px 4px;
    border-top: 1px solid var(--color-border-light);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-blue-accessible);
}
.nav-dropdown-footer i:last-child {
    margin-left: auto;
    font-size: 0.75rem;
    transition: transform var(--transition-fast);
}
.nav-dropdown-footer:hover i:last-child {
    transform: translateX(4px);
}
.nav-cta {
    display: flex;
    align-items: center;
    gap: 12px;
}
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-primary);
    cursor: pointer;
    z-index: 1002;
    position: relative;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 999;
}
.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(280px, 85vw);
    max-width: 280px;
    height: 100vh;
    height: 100dvh;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    /* visibility is toggled (with a delay) alongside the slide so the ~25
       links are NOT focusable / announced to screen readers while the menu
       is closed — at every viewport width. */
    visibility: hidden;
    transition: right 0.3s ease, visibility 0s linear 0.3s;
    z-index: 1001;
    /* Fixed close button (top) + scrollable link region + pinned CTA footer.
       The drawer itself no longer scrolls; .mobile-menu-scroll does.
       Top padding = close button bottom edge (20px + 44px) so all 8 nav rows
       plus the pinned footer fit without scrolling on 667px-tall phones (SE). */
    padding: 64px 24px max(24px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mobile-menu.active {
    right: 0;
    visibility: visible;
    transition: right 0.3s ease, visibility 0s;
}
.mobile-menu-close {
    position: absolute;
    /* Keep the close button clear of notches/rounded corners */
    top: max(20px, env(safe-area-inset-top));
    right: max(20px, env(safe-area-inset-right));
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-primary);
    cursor: pointer;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
}
.mobile-menu-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* fade the lower edge so users see the list continues when scrollable */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
    padding-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mobile-menu-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mobile-menu-links li a {
    display: block;
    /* Tight 44px rows (10+24+10) so the full menu fits short phone screens */
    padding: 10px 16px;
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 1rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.mobile-menu-links li a:hover {
    background: var(--color-bg);
    color: var(--color-blue-accessible);
}
.mobile-menu-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mobile-menu-group.open {
    background: var(--color-bg);
    border-radius: 10px;
    padding-bottom: 6px;
}
.mobile-menu-group.open .mobile-menu-group-toggle:hover,
.mobile-menu-group.open a:hover {
    background: #fff;
}
.mobile-menu-group .mobile-menu-group-links > a {
    padding-left: 24px;
}
.mobile-menu-group a.mobile-menu-group-all {
    font-weight: 600;
    color: var(--color-blue-accessible);
}
.mobile-menu-group-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2px;
}
.mobile-menu-group .mobile-menu-group-grid a {
    font-size: 0.9rem;
    /* Same 24px text inset as the "Se alle"/single-column sub-links so the
       first grid column aligns with the rows above it */
    padding: 10px 12px 10px 24px;
}
.mobile-menu-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-secondary);
    padding: 10px 16px;
    min-height: 44px;
    text-align: left;
    transition: all 0.2s ease;
}
.mobile-menu-group-toggle:hover {
    background: var(--color-bg);
    color: var(--color-blue-accessible);
}
.mobile-menu-group-toggle i {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}
.mobile-menu-group.open .mobile-menu-group-toggle i {
    transform: rotate(180deg);
}
html.js .mobile-menu-group-links {
    display: none;
}
html.js .mobile-menu-group.open .mobile-menu-group-links {
    display: block;
}
.mobile-menu-group a {
    display: block;
    padding: 10px 16px;
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.mobile-menu-group a:hover {
    background: var(--color-bg);
    color: var(--color-blue-accessible);
}
.mobile-menu-social {
    display: flex;
    gap: 8px;
    padding: 8px 4px 0;
    /* Bottom-aligned in the scroll region (flex column): auto margin absorbs
       the free space on tall screens so the icons sit just above the pinned
       footer's divider instead of hanging under the last nav link. When the
       list overflows there is no free space and the 8px top padding keeps a
       gap under Kontakt instead. No margin-bottom: the scroll region's 12px
       padding + the 44px icon boxes' internal whitespace already visually
       match the divider→phone/Kundelogin gap below (16px + 8px padding). */
    margin-top: auto;
    margin-bottom: 0;
}
.mobile-menu-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    font-size: 1.3rem;
    color: var(--color-text-secondary);
    transition: all 0.2s ease;
}
.mobile-menu-social a:hover {
    background: var(--color-bg);
    color: var(--color-blue-accessible);
}
@media (max-height: 700px) {
.mobile-menu-social {
        display: none;
    }
}
.mobile-menu-cta {
    flex: 0 0 auto;
    padding-top: 16px;
    border-top: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mobile-menu-login {
    display: flex;
    align-items: center;
    /* Left-aligned to match the nav rows above (icon + label read as a normal
       left-aligned utility row, not a centered button). */
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 16px;
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.mobile-menu-login:hover {
    background: var(--color-bg);
    color: var(--color-blue-accessible);
}
.mobile-menu-cta .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
}
.mobile-menu-utils {
    display: flex;
    flex-wrap: nowrap;
    /* number pinned left, Kundelogin pinned right — all spare width becomes
       the gap between them */
    justify-content: space-between;
    gap: 6px;
}
.mobile-menu-utils .mobile-menu-login {
    flex: 0 1 auto;
    min-width: 0;
    padding: 8px 6px;
    gap: 6px;
    font-size: 0.9rem;
    white-space: nowrap;
}
body.mobile-menu-open {
    overflow: hidden;
}
section[id] {
    scroll-margin-top: 80px;
}
.hero-slideshow-wrapper .slideshow-container {
    width: 100%;
    height: 100%;
    border-radius: 0;
}
.hero-slideshow-wrapper .slideshow-canvas {
    border-radius: 0;
}
.hero-slideshow-wrapper .slideshow-controls {
    opacity: 1;
}
.hero-slide.active {
    opacity: 1;
}
.feature-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}
.feature-modal-overlay.active .feature-modal {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}
.feature-modal-slideshow-wrapper .slideshow-container {
    border-radius: 0;
    box-shadow: none;
}
.feature-modal-slideshow-wrapper .slideshow-canvas {
    border-radius: 0;
}
.feature-modal-slideshow-wrapper .slideshow-controls {
    display: none !important;
}
.feature-modal-slideshow-wrapper .slideshow-progress-bar {
    display: none !important;
}
.feature-modal-dynamic-info.is-collapsible {
    padding: 12px 14px;
    margin-bottom: 16px;
}
.feature-modal-dynamic-info.is-collapsible strong {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 0;
}
.feature-modal-dynamic-info.is-collapsible strong::after {
    content: '\f078'; /* fa-chevron-down */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.7rem;
    color: var(--color-blue);
    transition: transform var(--transition-fast);
}
.feature-modal-dynamic-info.is-collapsible.is-open strong::after {
    transform: rotate(180deg);
}
.feature-modal-dynamic-info.is-collapsible p {
    display: none;
    margin-top: 8px;
}
.feature-modal-dynamic-info.is-collapsible.is-open p {
    display: block;
}
.js .features-toggle-wrapper {
    display: flex;
}
.features-toggle-wrapper.hidden {
    opacity: 0;
    max-height: 0;
    margin: 0;
    pointer-events: none;
}
.js #featuresGrid:not(.features-expanded) > .feature-card:nth-child(n+10) {
    display: none;
}
.showcase-slide.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
.showcase-dot.active {
    background: var(--color-white);
    border-color: var(--color-white);
    transform: scale(1.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.showcase-slide.active .showcase-slide-more {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    transition-delay: 0.4s;
}
.diagonal-split-container:hover .diagonal-split-image:not(:hover) .diagonal-split-label {
    opacity: 0.4;
}
@keyframes pulse-ring {
    0% {
        width: 120px;
        height: 120px;
        opacity: 0.5;
    }
    100% {
        width: 350px;
        height: 350px;
        opacity: 0;
    }
}
@keyframes line-flow {
    0% {
        stroke-dashoffset: 24;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes float-subtle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}
@media (max-width: 768px) {
@keyframes pulse-ring {
        0% {
            width: 80px;
            height: 80px;
            opacity: 0.8;
        }
        100% {
            width: 200px;
            height: 200px;
            opacity: 0;
        }
    }
}
@keyframes comparison-scroll-nudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}
.faq-heading {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}
.faq-item.active .faq-question i {
    transform: rotate(180deg);
}
.js .faq-answer {
    display: none;
}
.js .faq-item.active .faq-answer {
    display: block;
}
.cta-pricing-view:not(.active) {
    display: none;
}
.cta-form-view:not(.active) {
    display: none;
}
.cta-view.exiting {
    opacity: 0;
    pointer-events: none;
}
.cta-view.entering {
    opacity: 0;
}
.contact-form input.input-error {
    border-color: var(--color-red);
    box-shadow: 0 0 0 3px var(--color-red-light);
}
.cf-turnstile {
    display: flex;
    justify-content: center;
    margin: 0;
}
@keyframes turnstileSlideIn {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: 80px;
        opacity: 1;
    }
}
.contact-form-message {
    margin-top: 14px;
    padding: 16px 20px;
    border-radius: var(--radius-md);
    text-align: center;
    font-weight: 500;
    overflow: hidden;
    animation: messageSlideIn 0.35s ease forwards;
}
@keyframes messageSlideIn {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
    }
    to {
        opacity: 1;
        max-height: 100px;
        padding-top: 16px;
        padding-bottom: 16px;
        margin-top: 14px;
    }
}
.contact-form-message.success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}
.contact-form-message.error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes scaleIn {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
.cta-fading {
    opacity: 0 !important;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.cta-hidden {
    display: none !important;
}
html.js .contact-inline {
    display: none;
    opacity: 0;
}
html.js .contact-inline.active {
    display: block;
}
html.js .contact-inline.visible {
    opacity: 1;
}
.footer {
    background: var(--color-text-primary);
    color: white;
    padding: 60px 0 30px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.28fr 0.6fr 0.7fr 1.1fr;
    gap: 64px;
    margin-bottom: 40px;
}
.footer-links a.footer-see-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    /* Brand teal nudged lighter: --color-blue is 4.45:1 on the #2c3e50 footer,
       just under the 4.5:1 AA minimum. */
    color: #44bccc;
    transition: gap var(--transition-fast), color var(--transition-fast);
}
.footer-see-all i {
    font-size: 0.8em;
}
.footer-links a.footer-see-all:hover {
    gap: 11px;
    color: #fff;
}
.footer-brand-links {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.footer-brand-links li {
    margin-bottom: 0;
}
.footer-brand-links a {
    display: inline-block;
    padding: 5px 12px;
    font-size: 0.8rem;
    line-height: 1.2;
    /* 0.75 alpha: ≥4.5:1 AA on the chip's lightened translucent background
       (matches .footer-link-btn — 0.6 only clears AA on plain footer navy) */
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.footer-brand-links a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}
.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.1rem;
    /* 0.75 alpha: ≥4.5:1 AA on the lightened translucent background
       (same rationale as .footer-brand-links a) */
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.footer-social a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}
.footer-brand .logo {
    margin-bottom: 16px;
}
.footer-brand p {
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
}
.footer-title {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 20px;
}
.footer-links {
    list-style: none;
}
.footer-links li {
    margin-bottom: 12px;
}
.footer-links a {
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
    transition: color var(--transition-fast);
}
.footer-links:not(.footer-brand-links) a {
    display: inline-block;
    padding: 4px 0;
}
.footer-links a:hover {
    color: white;
}
.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
}
.footer-contact-item i {
    color: var(--color-blue);
    width: 20px;
}
.footer-contact-item-stack {
    align-items: flex-start;
}
.footer-contact-item-stack i {
    margin-top: 4px;
}
.footer-contact-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.footer-contact-value {
    white-space: nowrap;
}
.footer-contact-item a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.footer-contact-item a:hover {
    color: var(--color-white);
}
.footer-bottom {
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.footer-copyright {
    /* 0.5 alpha lands at 4.05:1 on the footer navy; 0.6 passes 4.5:1 AA. */
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
}
@media (max-width: 1024px) {
.footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}
@media (min-width: 1120px) and (max-width: 1200px) {
.nav-links {
        gap: 22px;
    }
}
@media (min-width: 926px) and (max-width: 1119px) {
.logo-img {
        height: 48px;
    }
.nav {
        gap: 12px;
    }
.nav-links {
        /* 10px is the fit-minimum at 926px; grow toward 20px as room appears */
        gap: clamp(10px, 5vw - 36px, 20px);
    }
.nav-links a {
        font-size: 0.875rem;
    }
.nav-cta .btn {
        padding: 10px 14px;
        font-size: 0.875rem;
    }
}
@media (max-width: 1199px) {
.nav-links .has-dropdown {
        position: static;
    }
.nav-dropdown-mega {
        left: 16px;
        right: 16px;
        min-width: 0;
        max-width: none;
        transform: translate(0, 8px);
    }
.has-dropdown:hover .nav-dropdown-mega,
    .has-dropdown:focus-within .nav-dropdown-mega,
    .has-dropdown.open .nav-dropdown-mega {
        transform: translate(0, 0);
    }
}
@media (max-width: 925px) {
.nav-links {
        display: none;
    }
.nav-cta .btn {
        padding: 10px 18px;
        font-size: 0.9rem;
        min-height: 44px;
    }
.mobile-menu-toggle {
        display: block;
    }
.nav {
        gap: 16px;
    }
html:not(.js) .nav-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px 16px;
        row-gap: 8px;
    }
html:not(.js) .mobile-menu-toggle {
        display: none;
    }
}
@media (max-width: 600px) {
.nav-cta {
        display: none;
    }
html:not(.js) .nav-cta {
        display: flex;
    }
}
@media (max-width: 420px) {
.header-inner {
        padding: 12px 16px;
    }
.logo-img {
        height: 45px;
    }
.mobile-menu-toggle {
        font-size: 1.25rem;
    }
.nav-cta .btn {
        padding: 8px 14px;
        font-size: 0.85rem;
        /* keep the compact look but preserve the 44px min tap target
           (.btn is inline-flex with centered content) */
        min-height: 44px;
    }
.container,
    .container-wide {
        padding: 0 14px;
    }
h1 {
        font-size: 1.8rem;
    }
}
@media (max-width: 480px) {
.btn {
        width: 100%;
    }
}
@media (max-width: 320px) {
.container,
    .container-wide {
        padding: 0 10px;
    }
.header-inner {
        padding: 10px 10px;
    }
h1 {
        font-size: 1.5rem;
    }
h2 {
        font-size: 1.3rem;
    }
h3 {
        font-size: 1.1rem;
    }
.btn {
        padding: 10px 16px;
        font-size: 0.85rem;
        /* keep a 44px tap target even with the tighter padding */
        min-height: 44px;
    }
.logo-img {
        height: 36px;
    }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.js .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}
.js .reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.skip-link {
    position: fixed;
    top: -100px;
    left: 16px;
    z-index: 4000;
    padding: 12px 20px;
    background: var(--color-blue-dark);
    color: #fff;
    font-weight: 600;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: top var(--transition-fast);
}
.skip-link:focus {
    top: 12px;
}
.skip-link:hover,
.skip-link:focus {
    color: #fff;
}
#main-content {
    outline: none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--color-blue-accessible);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
html {
        scroll-behavior: auto;
    }
*,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
.js .reveal {
        opacity: 1;
        transform: none;
    }
}
.features-badge.tooltip-visible::after,
.features-badge.tooltip-visible::before,
.features-badge:focus-visible::after,
.features-badge:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.mobile-sticky-cta.visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s;
}
@media (max-width: 600px) {
.footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
.footer-grid > .footer-brand { order: 1; }
.footer-grid > .footer-column:nth-child(4) { order: 2; }
.footer-grid > .footer-column:nth-child(2) { order: 3; }
.footer-grid > .footer-column:nth-child(3) { order: 4; }
.footer-bottom {
        flex-direction: column;
        text-align: center;
    }
.footer-brand,
    .footer-column {
        text-align: center;
    }
.footer-brand .logo img {
        margin: 0 auto;
    }
.footer-brand-links,
    .footer-social {
        justify-content: center;
    }
.footer-contact-item {
        justify-content: center;
        /* wrapped lines (the address) stay flush against their icon instead
           of centering away from it under the inherited text-align */
        text-align: left;
    }
.footer {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }
.footer-links:not(.footer-brand-links) a {
        padding: 8px 0;
    }
}
@media (max-width: 768px) {
.js #featuresGrid:not(.features-expanded) > .feature-card:nth-child(n+5) {
        display: none;
    }
}
@media (max-width: 480px) {
.nav-cta .btn,
    .mobile-sticky-cta .btn {
        width: auto;
    }
}
@media (max-width: 768px) {
.js .faq-grid:not(.faq-expanded) .faq-item.faq-mobile-hidden {
        display: none;
    }
.js .faq-toggle-wrapper {
        display: flex;
    }
.faq-toggle-wrapper.hidden {
        display: none;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
.js #featuresGrid:not(.features-expanded) > .feature-card:nth-child(n+9) {
        display: none;
    }
}
@media (min-width: 601px) and (max-width: 1024px) {
.footer-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px 32px;
    }
.footer-brand {
        grid-column: 1 / -1;
        max-width: 560px;
    }
}
.kk-feedback-vote:hover:not(:disabled) {
    background: var(--color-green-light);
    border-color: var(--color-green-accessible);
    color: var(--color-green-accessible);
}
.kk-feedback-vote.selected {
    opacity: 1;
    background: var(--color-green-light);
    border-color: var(--color-green-accessible);
    color: var(--color-green-accessible);
}
.kk-feedback-error {
    margin: 10px 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-red);
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
[data-tooltip].tooltip-suppressed::before,
[data-tooltip].tooltip-suppressed::after {
    display: none !important;
}
.lead-survey-pill:hover:not(:disabled) {
    background: var(--color-blue-light);
    border-color: var(--color-blue);
    color: var(--color-link);
}
.guide-follow-links .fa-facebook,
.success-follow-links .fa-facebook {
    color: #1877f2;
}
.guide-follow-links .fa-instagram,
.success-follow-links .fa-instagram {
    color: #d62976;
}
@media (min-width: 1025px) {
.js .features-catalog #featuresGrid:not(.features-expanded) > .feature-card:nth-child(n+10) {
        display: flex;
    }
}
@media (max-width: 1024px) {
.js #featuresGrid.solutions-grid:not(.features-expanded) > .solution-card:nth-child(n+5) {
        display: none;
    }
}
.footer-brand-links .footer-link-btn {
    display: inline-block;
    padding: 5px 12px;
    font-size: 0.8rem;
    line-height: 1.2;
    font-family: inherit;
    /* 0.75 alpha: ≥4.5:1 AA on the chip's lightened translucent background
       (0.6 only clears AA on the plain footer navy) */
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.footer-brand-links .footer-link-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}
.consent-banner[hidden] {
    display: none;
}
.consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Below the mobile menu and feature modal (1001) so it can't swallow taps
       on their bottom-pinned CTAs; still above all page content. */
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding: 14px 20px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    animation: consent-banner-in 0.35s ease;
}
@keyframes consent-banner-in {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.consent-banner {
        animation: none;
    }
}
.consent-banner p {
    margin: 0;
    max-width: 640px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-primary);
}
.consent-banner p a {
    color: var(--color-link);
    text-decoration: underline;
}
.consent-banner-actions {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
}
.consent-banner-btn {
    padding: 8px 20px;
    font-size: 0.9rem;
}
.consent-banner-decline {
    background: var(--color-white);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}
.consent-banner-decline:hover {
    background: var(--color-bg-alt);
}
@media (max-width: 600px) {
.consent-banner-actions {
        width: 100%;
    }
.consent-banner-btn {
        flex: 1;
        justify-content: center;
    }
}
.cta-slideup.visible {
    transform: translateY(0);
}
.header-solid {
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}
.legal-page {
    padding: 170px 0 80px;
    min-height: 100vh;
    background: var(--color-bg);
}
.legal-header {
    margin-bottom: 40px;
}
.legal-breadcrumb {
    display: flex;
    align-items: center;
    /* long trails (Forside > Losninger > Infoskaerm til idraetscentre...)
       must wrap tidily on narrow phones instead of overflowing */
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}
@media (max-width: 480px) {
.legal-breadcrumb {
        gap: 4px 8px;
        font-size: 0.85rem;
    }
}
.legal-breadcrumb a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.legal-breadcrumb a:hover {
    color: var(--color-blue);
}
.legal-breadcrumb i.fa-chevron-right {
    font-size: 0.7rem;
}
.legal-header h1 {
    font-size: 2.5rem;
    margin-bottom: 8px;
}
.legal-updated {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin: 0;
}
.legal-content {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 48px;
    /* Cap the reading measure and centre the column so long legal/guide prose
       doesn't run to unreadable line-lengths on tablet/desktop. Wide enough
       that the 2-col grids and tables inside still breathe. */
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
}
.legal-section p,
.legal-section li,
.legal-info-box p,
.legal-highlight p,
.contact-method a,
.contact-method span {
    overflow-wrap: break-word;
    word-break: break-word;
}
.legal-toc {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    padding: 24px 32px;
    margin-bottom: 40px;
    border-left: 4px solid var(--color-blue);
}
.legal-toc h2 {
    font-size: 1.1rem;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-primary);
}
.legal-toc h2 i {
    color: var(--color-blue);
}
.legal-toc ol {
    columns: 2;
    column-gap: 40px;
    padding-left: 20px;
    margin: 0;
}
.legal-toc li {
    margin-bottom: 8px;
    break-inside: avoid;
}
.legal-toc a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color var(--transition-fast);
}
.legal-toc a:hover {
    color: var(--color-blue);
}
.legal-section {
    margin-bottom: 48px;
    padding-bottom: 27px;
    border-bottom: 1px solid var(--color-border-light);
}
.legal-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.legal-section h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
}
.legal-section h2 .section-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    /* accessible variant: white on bright brand blue is only 2.46:1 */
    background: var(--color-blue-accessible);
    color: white;
    border-radius: 50%;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.legal-section h3 {
    font-size: 1.15rem;
    margin: 28px 0 12px;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}
.legal-section h3 i {
    color: var(--color-blue);
    font-size: 1rem;
}
.legal-section p {
    margin-bottom: 16px;
    line-height: 1.7;
}
.legal-section ul,
.legal-section ol {
    margin-bottom: 20px;
    padding-left: 24px;
}
.legal-section li {
    margin-bottom: 10px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}
.legal-section li strong {
    color: var(--color-text-primary);
}
.legal-info-box {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin: 20px 0;
    border: 1px solid var(--color-border);
}
.legal-info-box p {
    margin-bottom: 8px;
}
.legal-info-box p:last-child {
    margin-bottom: 0;
}
.legal-info-box i {
    color: var(--color-blue);
    margin-right: 8px;
}
.legal-highlight {
    background: var(--color-blue-light);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin: 20px 0;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border-left: 4px solid var(--color-blue);
}
.legal-highlight i {
    color: var(--color-blue);
    font-size: 1.2rem;
    margin-top: 2px;
}
.legal-highlight p {
    margin: 0;
    flex: 1;
    /* Explicit color: contexts like .section-header set muted gray on p,
       which is only 4.4:1 on the highlight tints - secondary passes on all. */
    color: var(--color-text-secondary);
}
.legal-highlight.green {
    background: var(--color-green-light);
    border-left-color: var(--color-green);
}
.legal-highlight.green i {
    color: var(--color-green);
}
.legal-table-wrapper {
    overflow-x: auto;
    margin: 20px 0;
    /* Anchor for the mobile right-edge scroll fade (::after) below. */
    position: relative;
}
.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.legal-table-wrapper .legal-table {
    min-width: 560px;
}
.legal-table thead {
    background: var(--color-text-primary);
    color: white;
}
.legal-table th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
}
.legal-table thead th:first-child {
    border-radius: var(--radius-md) 0 0 0;
}
.legal-table thead th:last-child {
    border-radius: 0 var(--radius-md) 0 0;
}
.legal-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text-secondary);
}
.legal-table tr:last-child td,
.legal-table tr:last-child th {
    border-bottom: none;
}
.legal-table tr:nth-child(even) {
    background: var(--color-bg);
}
.legal-basis-list {
    margin: 24px 0;
}
.legal-basis-item {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin-bottom: 16px;
    border: 1px solid var(--color-border-light);
}
.legal-basis-item:last-child {
    margin-bottom: 0;
}
.basis-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}
.basis-article {
    /* accessible variant: white on bright brand blue is only 2.46:1 */
    background: var(--color-blue-accessible);
    color: white;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
}
.basis-header h3,
.basis-header h4 {
    margin: 0;
    font-size: 1.05rem;
}
.legal-basis-item p {
    margin: 0;
    color: var(--color-text-secondary);
}
.legal-contact-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 24px;
}
.contact-method {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
}
.contact-method i {
    font-size: 1.3rem;
    color: var(--color-blue);
    margin-top: 2px;
}
.contact-method strong {
    display: block;
    margin-bottom: 4px;
    color: var(--color-text-primary);
}
.contact-method a,
.contact-method span {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
}
.contact-method a:hover {
    color: var(--color-blue);
}
@media (max-width: 768px) {
.legal-page {
        padding: 120px 0 60px;
    }
.legal-content {
        padding: 32px 24px;
    }
.legal-header h1 {
        font-size: 2rem;
    }
.legal-toc ol {
        columns: 1;
    }
.legal-contact-box {
        grid-template-columns: 1fr;
    }
.legal-section h2 {
        font-size: 1.3rem;
    }
.legal-table {
        font-size: 0.9rem;
    }
.legal-table th,
    .legal-table td {
        padding: 10px 12px;
    }
.legal-table-wrapper .legal-table {
        min-width: 460px;
    }
.legal-table-wrapper {
        scrollbar-width: thin;
        scrollbar-color: var(--color-border) transparent;
        -webkit-overflow-scrolling: touch;
    }
.legal-table-wrapper::-webkit-scrollbar {
        height: 6px;
    }
.legal-table-wrapper::-webkit-scrollbar-thumb {
        background: var(--color-border);
        border-radius: 3px;
    }
.legal-table-wrapper::-webkit-scrollbar-track {
        background: transparent;
    }
.legal-table-wrapper {
        -webkit-mask-image: linear-gradient(to right, #000 90%, transparent 100%);
                mask-image: linear-gradient(to right, #000 90%, transparent 100%);
    }
.legal-table tbody th,
    .legal-table tbody td:first-child,
    .legal-table thead th:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
    }
.legal-table tbody th,
    .legal-table tbody td:first-child {
        background: var(--color-white);
    }
.legal-table tr:nth-child(even) th,
    .legal-table tr:nth-child(even) td:first-child {
        background: var(--color-bg);
    }
.legal-table thead th:first-child {
        background: var(--color-text-primary);
        z-index: 2;
    }
.legal-section p,
    .legal-section li {
        line-height: 1.75;
    }
.legal-section p {
        margin-bottom: 18px;
    }
.legal-toc a {
        display: block;
        padding: 8px 0;
        min-height: 44px;
    }
.legal-toc li {
        margin-bottom: 0;
    }
}
@media (max-width: 480px) {
.legal-content {
        padding: 24px 20px;
    }
.legal-table-wrapper .legal-table {
        min-width: 420px;
    }
.legal-toc {
        padding: 20px;
    }
.basis-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
.legal-section h2 {
        align-items: center;
        gap: 10px;
    }
.legal-section h2 .section-number {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
}
@media print {
.header,
    .footer,
    .legal-breadcrumb,
    .mobile-menu-toggle,
    .nav-cta {
        display: none !important;
    }
.legal-page {
        padding: 0;
        min-height: auto;
        background: white;
    }
.legal-content {
        box-shadow: none;
        padding: 20px;
        max-width: 100%;
    }
.legal-section {
        page-break-inside: avoid;
        break-inside: avoid;
    }
.legal-section h2,
    .legal-section h3,
    .legal-section h4 {
        page-break-after: avoid;
        break-after: avoid;
    }
.legal-info-box,
    .legal-highlight,
    .legal-contact-box,
    .legal-basis-item,
    .right-item,
    .security-item,
    .legal-purpose-card {
        page-break-inside: avoid;
        break-inside: avoid;
    }
.legal-table-wrapper {
        page-break-inside: avoid;
        break-inside: avoid;
    }
.legal-table tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }
.legal-section {
        padding-top: 15px;
    }
.legal-security-grid,
    .legal-purpose-grid,
    .legal-rights-list,
    .legal-basis-list {
        page-break-inside: avoid;
        break-inside: avoid;
    }
.legal-toc {
        page-break-after: avoid;
        break-after: avoid;
    }
a {
        text-decoration: none;
        color: inherit;
    }
body {
        font-size: 11pt;
        line-height: 1.5;
    }
.legal-header h1 {
        font-size: 24pt;
    }
.legal-section h2 {
        font-size: 14pt;
    }
.legal-section h3 {
        font-size: 12pt;
    }
}
.legal-content p a,
.legal-content li a,
.legal-section p a,
.legal-section li a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.legal-toc li a {
    text-decoration: none;
}
@media (max-width: 900px) {
.legal-breadcrumb {
        justify-content: center;
    }
.legal-header .legal-breadcrumb {
        justify-content: flex-start;
    }
}
@media (max-width: 600px) {
.legal-table-wrapper::before {
        content: "Stryg til siden for at se hele skemaet →";
        display: block;
        text-align: center;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--color-text-muted);
        margin-bottom: 10px;
    }
}