/*
Theme Name: Twenty Twenty
Text Domain: twentytwenty
Version: 3.1
Tested up to: 7.0
Requires at least: 4.7
Requires PHP: 5.2.4
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-patterns, block-styles, wide-blocks, accessibility-ready
Author: the WordPress team
Author URI: https://wordpress.org/
Theme URI: https://wordpress.org/themes/twentytwenty/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned
with others.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

	0. 	CSS Reset
	1. 	Document Setup
	2. 	Element Base
	3. 	Helper Classes
	4. 	Site Header
	5. 	Menu Modal
	6. 	Search Modal
	7. 	Page Templates
		a. 	Template: Cover Template
		c. 	Template: Full Width
	8.  Post: Archive
	9.  Post: Single
	10. Blocks
	11. Entry Content
	12. Comments
	13. Site Pagination
	14. Error 404
	15. Widgets
	16. Site Footer
	17. Media Queries

----------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- */

/*	0. CSS Reset
/* -------------------------------------------------------------------------- */


:root {
       color-scheme: light dark;
       --brand-navy: #14264E;
       --brand-navy-deep: #0E1B38;
       --brand-steel: #4A75B1;
       --brand-steel-soft: #7E93BC;

       --navy-scale-50: rgb(238, 241, 247);
       --navy-scale-100: rgb(214, 222, 236);
       --navy-scale-200: rgb(174, 189, 215);
       --navy-scale-300: rgb(126, 147, 188);
       --navy-scale-400: rgb(74, 117, 177);
       --navy-scale-500: rgb(46, 78, 134);
       --navy-scale-600: rgb(33, 60, 104);
       --navy-scale-700: rgb(26, 48, 89);
       --navy-scale-800: rgb(20, 38, 78);
       --navy-scale-900: rgb(14, 27, 56);
       --navy-scale-950: rgb(8, 15, 34);

       --teal-scale-50: rgb(230, 247, 244);
       --teal-scale-100: rgb(192, 235, 228);
       --teal-scale-300: rgb(95, 211, 197);
       --teal-scale-500: rgb(20, 184, 166);
       --teal-scale-600: rgb(14, 155, 140);
       --teal-scale-700: rgb(11, 125, 114);

       --gray-scale-0: rgb(255, 255, 255);
       --gray-scale-50: rgb(247, 248, 250);
       --gray-scale-100: rgb(238, 240, 244);
       --gray-scale-200: rgb(224, 228, 235);
       --gray-scale-300: rgb(200, 207, 218);
       --gray-scale-400: rgb(151, 161, 178);
       --gray-scale-500: rgb(107, 117, 133);
       --gray-scale-600: rgb(76, 85, 99);
       --gray-scale-700: rgb(53, 60, 72);
       --gray-scale-800: rgb(33, 38, 47);
       --gray-scale-900: rgb(18, 21, 27);

       --success: #16A34A;
       --warning: #E0A100;
       --danger: #DC2626;
       --info: #4A75B1;

       --font-display: 'Space Grotesk', sans-serif;
       --font-body: 'Manrope', sans-serif;
       --font-mono: 'JetBrains Mono', monospace;

       --radius-sm: 6px;
       --radius-md: 10px;
       --radius-lg: 16px;
       --radius-xl: 24px;

       --shadow-sm: 0 1px 2px rgba(20, 38, 78, .8);
       --shadow-md: 0 4px 12px rgba(20, 38, 78, .16);
       --shadow-lg: 0 12px 28px rgba(20, 38, 78, .24);
       --shadow-xl: 0 24px 56px rgba(20, 38, 78, .30);
       --shadow-xxl: 0 24px 56px rgba(20, 38, 78, .60);

       --header-shadow: var(--shadow-lg);
       --header-bg: var(--gray-scale-0);
       --header-border: var(--gray-scale-0);
       --header-padding-block: 0.5rem;
       --header-ease: 220ms cubic-bezier(0.4, 0, 0.2, 1);

       --ink-muted: var(--gray-scale-400);
       /* Default body-copy ink, shared by .text and .acc-body. Overridden in the
          dark @media :root so both stay legible on the dark background. */
       --text-color: var(--gray-scale-800);
       --maxw: 1200px;

       /* Height of the fixed sticky header. Reused for the body's top padding
          and for section scroll offsets so anchor jumps land below the header. */
       --header-height: 100px;
       /* Breathing room below the fixed header — shared by the body's top padding
          and anchor scroll offsets so the top-of-page and jumped-to gaps match. */
       --header-gap: 20px;
       --header-offset: calc(var(--header-height) + var(--header-gap));
       --process-height: 400px;

       --btn-height: 44px;
       --btn-radius: var(--radius-md);
       --btn-lift: transform 0.2s ease;
       --btn-lift-distance: -1px;
       --btn-press-distance: 1px;

       --display-font-size: 52px;
       --display-font-weight: 600;
       --display-letter-spacing: -0.02em;
       --display-line-height: 1.05;

       --h2-font-size: 36px;
       --h2-font-weight: 600;
       --h2-letter-spacing: -0.01em;
       --h2-line-height: 1.1;

       --h4-font-size: 22px;
       --h4-font-weight: 600;
       --h4-letter-spacing: 0em;
       --h4-line-height: 1.1;

       --text-font-size: 16px;
       --text-font-weight: 400;
       --text-letter-spacing: 0.02em;
       --text-line-height: 1.7;

       --overline-font-size: 12px;
       --overline-font-weight: 600;
       --overline-letter-spacing: 0.14em;
       --overline-line-height: 1.7;

       --tag-size: 16px;
       --tag-weight: 700;

       /* Browser mockup — light values. Overridden in the dark @media :root so the
          .browser* classes reference these tokens and never change themselves.
          (The red/amber/green traffic lights are constant, so they stay literal.) */
       --browser-bg: var(--gray-scale-0);
       --browser-shadow:
              0 25px 70px rgba(15, 23, 42, .12),
              0 10px 30px rgba(15, 23, 42, .08);
       --browser-border: var(--gray-scale-100);
       --browser-toolbar-bg: var(--gray-scale-200);
       --browser-dot-idle: #d1d5db;
       --browser-url-bg: var(--gray-scale-50);
       --browser-url-text: var(--ink-muted);
       --browser-content-bg: var(--gray-scale-0);

       /* Inner website mockup — light values. Overridden in the dark @media :root.
          card bg/border are shared by .website__card/__section/__small.
          Gaps widened (page gray-200, white cards, gray-300 borders) so the layers
          stay distinguishable on bright panels / Edge, where the old near-identical
          greys (gray-100 page + white cards + gray-50 borders) merged into one. */
       --website-bg: var(--gray-scale-200);
       --website-border: var(--gray-scale-300);
       --website-hero: linear-gradient(135deg, var(--teal-scale-700), var(--teal-scale-300));
       --website-card-bg: var(--gray-scale-0);
       --website-card-border: var(--gray-scale-300);

       /* Pill/chip — light values; overridden in the dark @media :root. */
       --pill-bg: var(--navy-scale-100);
       --pill-text: var(--brand-navy);

       /* Card — light values. Border is intentionally darker than the fill so the
          card edge stays visible on bright panels / Edge, where the old gray-50
          border (lighter than the gray-100 fill) was invisible. */
       --card-bg: var(--gray-scale-200);
       --card-border: var(--gray-scale-300);
       --card-hover-bg: var(--gray-scale-300);

       /* Tier — white boxes nested inside .card (gray-200), with a defined darker
          border so each reads as a distinct box on bright panels / Edge. */
       --tier-bg: var(--gray-scale-0);
       --tier-border: var(--gray-scale-300);

       /* Price cards reuse the --card-* surface tokens; only the big amount needs
          its own ink so it can flip to light in dark mode. */
       --price-amount: var(--brand-navy-deep);
       /* Base text inside a price card (plan name + feature list). Plain text
          otherwise inherits the light-mode body ink, which is unreadable on the
          dark card, so this token carries a light value in dark mode. */
       --price-text: var(--gray-scale-800);

       /* FAQ accordion — summary (question) ink and the row divider. */
       --faq-summary: var(--brand-navy-deep);
       --faq-border: var(--brand-navy-deep);

       --footer-background-color: var(--brand-navy-deep);
       --footer-logo-width: 16vw;

       /* .input__verbose fields — every theme-varying property is funneled through
          these tokens so the dark theme only reassigns the vars (see the dark
          :root), never the rules. height/padding are layout, not theme. */
       --input-verbose-bg: var(--gray-scale-0);
       --input-verbose-border: 1px solid var(--gray-scale-300);
       --input-verbose-border-focused: 1px solid var(--navy-scale-400);
       --input-verbose-border-invalid: 1px solid var(--danger);
       --input-verbose-box-shadow-focused: rgba(74, 117, 177, 0.25) 0px 0px 0px 3px;
       --input-verbose-box-shadow-invalid: 0 0 0 3px rgba(220, 38, 38, .16);
       --input-verbose-color: var(--gray-scale-900);
       --input-verbose-label-color: var(--gray-scale-900);
       --input-verbose-height: 44px;
       --input-verbose-padding: 0px 14px;

       /* .checkbox__singular-selection pills — every theme-varying property is
          funneled through these tokens so the dark theme only reassigns the vars
          (see the dark :root), never the rules. */
       --select-pill-bg: var(--gray-scale-0);
       --select-pill-text: var(--navy-scale-800);
       --select-pill-border: var(--gray-scale-300);
       --select-pill-hover-bg: var(--gray-scale-0);
       --select-pill-hover-border: var(--navy-scale-400);
       --select-pill-hover-shadow: var(--shadow-md);
       --select-pill-checked-bg: var(--navy-scale-800);
       --select-pill-checked-text: var(--gray-scale-0);
       --select-pill-checked-border: var(--navy-scale-700);
       --select-pill-checked-hover-bg: var(--navy-scale-500);
       --select-pill-checked-hover-border: var(--navy-scale-400);
       --select-pill-checked-hover-text: var(--gray-scale-0);
       --select-pill-focus-ring: var(--input-verbose-box-shadow-focused);

       /* #privacy consent checkbox — the unchecked box surface reuses the shared
          --input-verbose-* field tokens (bg/border/focus ring); only the accent
          (checked fill, checkmark, hover) needs its own theme-swappable tokens. */
       --checkbox-checked-bg: var(--navy-scale-800);
       --checkbox-checked-border: var(--navy-scale-700);
       --checkbox-mark: var(--gray-scale-0);
       --checkbox-hover-border: var(--navy-scale-400);
       --checkbox-link: var(--brand-steel);
}

html {
       scroll-behavior: smooth;
       overflow-x: clip;
}

body {
       font-family: var(--font-body);
       background: var(--gray-scale-0);
       color: var(--gray-scale-800);
       line-height: 1.6;
       overflow-x: clip;
       /* not hidden — clip doesn't create a scroll container that would trap the fixed header */
       /* The header is position:fixed (out of flow), so reserve space at the top
         so the hero isn't hidden behind it. Sized to the expanded header height;
         the header shrinks on scroll but this padding sits at the very top and
         scrolls away, so the larger value is harmless. */
       padding-top: var(--header-offset);
}

.body {
       font-family: var(--font-body);
       font-size: 16px;
       line-height: 1.65;
       color: var(--gray-scale-800);
}

/* Teal-tinted icon + teal glow. Add to any inline <svg>. The glow colour is
   configurable per element via a data-shadow-color attribute, defaulting to
   teal-500.  color: sets currentColor, which the icon sprite's fill/stroke use.

   The two filter lines are a progressive-enhancement pair: the first is the
   plain teal glow that works everywhere; the second reads data-shadow-color via
   typed attr() (CSS Values 5 — Chromium 133+). Browsers without typed attr()
   treat the second line as invalid and drop it, keeping the teal fallback. */
.svg-shadow {
       color: var(--teal-scale-500);
       filter: drop-shadow(0px 0px 8px var(--teal-scale-500));
       filter: drop-shadow(0px 0px 8px attr(data-shadow-color, var(--teal-scale-500)));
}

.display {
       font-size: var(--display-font-size);
       font-weight: var(--display-font-weight);
       letter-spacing: var(--display-letter-spacing);
       line-height: var(--display-line-height);
       color: var(--navy-scale-800);
       font-family: var(--font-display);
}

.h2 {
       font-size: var(--h2-font-size);
       font-weight: var(--h2-font-weight);
       letter-spacing: var(--h2-letter-spacing);
       line-height: var(--h2-line-height);
       color: var(--navy-scale-800);
       font-family: var(--font-display);
}

.h4 {
       margin-top: 8px;
       font-size: var(--h4-font-size);
       font-weight: var(--h4-font-weight);
       letter-spacing: var(--h4-letter-spacing);
       line-height: var(--h4-line-height);
       color: var(--navy-scale-800);
       font-family: var(--font-mono);
}

.text {
       margin-top: 8px;
       font-size: var(--text-font-size);
       font-weight: var(--text-font-weight);
       letter-spacing: var(--text-letter-spacing);
       line-height: var(--text-line-height);
       color: var(--text-color);
       font-family: var(--font-body);
}

.overline {
       font-size: var(--overline-font-size);
       font-weight: var(--overline-font-weight);
       letter-spacing: var(--overline-letter-spacing);
       line-height: var(--overline-line-height);
       color: var(--navy-scale-400);
       font-family: var(--font-body);
       text-transform: uppercase;
}

.btn--primary {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 0.5em;
       height: var(--btn-height);
       border-radius: var(--btn-radius);
       border: 1px solid var(--navy-scale-700);
       background-color: var(--navy-scale-800);
       color: var(--gray-scale-0);
       cursor: pointer;
       text-decoration: none;
       font-size: 0.9rem;
       font-weight: 600;
       letter-spacing: 0.06em;
       white-space: nowrap;
       padding: 0.55rem 1.25rem;
       font-family: var(--font-body);
       transition: var(--btn-lift);
}

.btn--primary svg {
       --icon-size: calc(var(--btn-height) * 0.15 + 0.75em);
       width: var(--icon-size);
       height: var(--icon-size);
       flex-shrink: 0;
}

.btn--primary:hover {
       background: var(--navy-scale-500);
       color: var(--gray-scale-0);
       border-color: var(--navy-scale-400);
       box-shadow: var(--shadow-lg);
       transform: translateY(var(--btn-lift-distance));
}

.btn--primary:active {
       background: var(--navy-scale-300);
       color: var(--gray-scale-0);
       border-color: var(--navy-scale-500);
       transform: translateY(var(--btn-press-distance));
}

.btn--secondary {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 0.5em;
       height: var(--btn-height);
       border-radius: var(--btn-radius);
       border: 1px solid var(--navy-scale-800);
       background-color: var(--gray-scale-0);
       color: var(--navy-scale-800);
       cursor: pointer;
       text-decoration: none;
       font-size: 0.9rem;
       font-weight: 700;
       letter-spacing: 0.06em;
       white-space: nowrap;
       padding: 0.55rem 1.25rem;
       font-family: var(--font-body);
       transition: var(--btn-lift);
}

.btn--secondary svg {
       --icon-size: calc(var(--btn-height) * 0.15 + 0.75em);
       width: var(--icon-size);
       height: var(--icon-size);
       flex-shrink: 0;
}

.btn--secondary:hover {
       background: var(--navy-scale-500);
       color: var(--gray-scale-0);
       border-color: var(--navy-scale-400);
       box-shadow: var(--shadow-lg);
       transform: translateY(var(--btn-lift-distance));
}

.btn--secondary:active {
       background: var(--navy-scale-300);
       color: var(--gray-scale-0);
       border-color: var(--navy-scale-500);
       transform: translateY(var(--btn-press-distance));
}

.btn--tertiary {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 0.5em;
       height: var(--btn-height);
       border-radius: var(--btn-radius);
       border: 1px solid var(--teal-scale-300);
       background-color: var(--teal-scale-500);
       color: var(--navy-scale-800);
       cursor: pointer;
       text-decoration: none;
       font-size: 0.9rem;
       font-weight: 700;
       letter-spacing: 0.06em;
       white-space: nowrap;
       padding: 0.55rem 1.25rem;
       font-family: var(--font-body);
       transition: var(--btn-lift);
}

.btn--tertiary svg {
       --icon-size: calc(var(--btn-height) * 0.15 + 0.75em);
       width: var(--icon-size);
       height: var(--icon-size);
       flex-shrink: 0;
}

.btn--tertiary:hover {
       background: var(--teal-scale-300);
       color: var(--gray-scale-0);
       border-color: var(--teal-scale-100);
       box-shadow: var(--shadow-lg);
       transform: translateY(var(--btn-lift-distance));
}

.btn--tertiary:active {
       background: var(--teal-scale-300);
       color: var(--gray-scale-0);
       border-color: var(--teal-scale-100);
       transform: translateY(var(--btn-press-distance));
}

.btn--ghost {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 0.5em;
       height: var(--btn-height);
       border-radius: var(--btn-radius);
       border: 1px solid attr(data-background-color, var(--gray-scale-0));
       background-color: attr(data-background-color, var(--gray-scale-0));
       color: var(--navy-scale-800);
       cursor: pointer;
       text-decoration: none;
       font-size: 0.9rem;
       font-weight: 700;
       letter-spacing: 0.06em;
       white-space: nowrap;
       padding: 0.55rem 1.25rem;
       font-family: var(--font-body);
       transition: var(--btn-lift);
}

.btn--ghost svg {
       --icon-size: calc(var(--btn-height) * 0.15 + 0.75em);
       width: var(--icon-size);
       height: var(--icon-size);
       flex-shrink: 0;
}

.btn--ghost:hover {
       background: attr(data-background-color, var(--gray-scale-0));
       color: var(--navy-scale-800);
       border-color: attr(data-background-color, var(--gray-scale-0));
       box-shadow: var(--shadow-xxl);
       transform: translateY(var(--btn-lift-distance));
}

.btn--ghost:active {
       background: attr(data-background-color, var(--gray-scale-0));
       color: var(--navy-scale-800);
       border-color: attr(data-background-color, var(--gray-scale-0));
       box-shadow: var(--shadow-xxl);
       transform: translateY(var(--btn-press-distance));
}

/* Disabled look — the .btn--disabled class (usable on <a> or <button>) AND any
   button variant that carries the native `disabled` attribute, e.g.
   <button class="btn--primary" disabled>. Prefer the attribute on <button>. */
.btn--disabled,
[class*="btn--"]:disabled {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 0.5em;
       height: var(--btn-height);
       border-radius: var(--btn-radius);
       border: 1px solid var(--gray-scale-200);
       background-color: var(--gray-scale-200);
       color: var(--gray-scale-400);
       cursor: not-allowed;
       text-decoration: none;
       font-size: 0.9rem;
       font-weight: 700;
       letter-spacing: 0.06em;
       white-space: nowrap;
       padding: 0.55rem 1.25rem;
       font-family: var(--font-body);
}

/* An <a> has no `disabled` attribute, so block the mouse click in CSS.
   A native <button disabled> is already inert, so this is scoped to anchors —
   which also lets the not-allowed cursor keep showing on disabled buttons. */
a.btn--disabled {
       pointer-events: none;
}

.btn-disabled-wrap {
       display: inline-flex;
       cursor: not-allowed;
}

.btn--disabled svg {
       --icon-size: calc(var(--btn-height) * 0.15 + 0.75em);
       width: var(--icon-size);
       height: var(--icon-size);
       flex-shrink: 0;
}

.input {
       height: 44px;
       padding: 0px 14px;
       border: 1px solid var(--gray-scale-300);
       border-radius: var(--radius-md);
       font: 400 15px var(--font-body);
       color: var(--gray-scale-800);
       outline: none;
}

/* Native <select>. Matches .input, but leads the font stack with the flag
   color font so the option flags render even on Windows (whose system emoji
   font ships no flag glyphs). Text characters fall through to Manrope. */
.input_dropdown {
       /* Fill the field column instead of sizing to the widest <option> (the country
          list has very long entries), and min-width:0 lets it shrink below that
          intrinsic width inside the grid so it can't overflow on small screens; the
          selected value truncates with an ellipsis rather than pushing the box wider. */
       width: 100%;
       max-width: 100%;
       min-width: 0;
       text-overflow: ellipsis;
       height: var(--input-verbose-height);
       padding: var(--input-verbose-padding);
       border: var(--input-verbose-border);
       border-radius: var(--radius-md);
       background-color: var(--input-verbose-bg);
       font: 400 15px 'Twemoji Country Flags', var(--font-body);
       color: var(--input-verbose-color);
       outline: none;
}

/* Focus parity with .input__verbose input — the select had no visible focus
   indicator before (outline:none with nothing to replace it). */
.input_dropdown:focus,
.input_dropdown:focus-visible {
       border: var(--input-verbose-border-focused);
       box-shadow: var(--input-verbose-box-shadow-focused);
}

/* Contact form: one column with a single, uniform vertical rhythm. The gap is the
   only spacing knob between every field — text inputs, the pill groups, the consent
   row and the submit button alike — so the field wrappers below no longer carry
   their own vertical padding (which used to space rows back when <br>s separated
   them, and would now double up unevenly across the different field types). */
#contact_fromular form {
       display: flex;
       flex-direction: column;
       gap: 20px;
}

.input__verbose {
       display: grid;
       max-width: calc(var(--maxw) - 24px);
}

.input__verbose input {
       height: var(--input-verbose-height);
       padding: var(--input-verbose-padding);
       border: var(--input-verbose-border);
       border-radius: var(--radius-md);
       background-color: var(--input-verbose-bg);
       font: var(--font-body);
       color: var(--input-verbose-color);
       outline: none;
}

.input__verbose label {
       padding-bottom: 4px;
       font: var(--font-body);
       color: var(--input-verbose-label-color);
       outline: none;
}

.input__verbose input:focus,
.input__verbose input:focus-visible,
.input__verbose input:focus-within {
       border: var(--input-verbose-border-focused);
       box-shadow: var(--input-verbose-box-shadow-focused);
}

.input__verbose input:invalid:not(:placeholder-shown) {
       border: var(--input-verbose-border-invalid);
       box-shadow: var(--input-verbose-box-shadow-invalid);
}

/* ---- #contact_fromular — validation feedback (:user-invalid) ----
   :user-invalid matches a failing field only AFTER the user has edited it or
   attempted to submit (unlike :invalid, which flags pristine fields on load).
   Two things hang off it: a red outline on the field itself, and the inline
   .field-hint that follows it in the markup (revealed via the ~ sibling). */
#contact_fromular .input:user-invalid,
#contact_fromular .input_dropdown:user-invalid {
       border-color: var(--input-verbose-border-invalid);
       box-shadow: var(--input-verbose-box-shadow-invalid);
}

#contact_fromular .field-hint {
       display: none;
       margin-top: 6px;
       font-size: 13px;
       color: var(--danger);
}

#contact_fromular .input:user-invalid ~ .field-hint,
#contact_fromular .input_dropdown:user-invalid ~ .field-hint,
#contact_fromular input[type="checkbox"]:user-invalid ~ .field-hint {
       display: block;
}

/* The hCaptcha widget isn't a form control, so it has no :user-invalid state —
   its hint (#captcha-error) is toggled from JS by adding .is-visible instead.
   margin-top: 0 lets the form's own 20px flex gap set the spacing (the default
   6px would otherwise stack on top of it and read as loose). */
#contact_fromular .field-hint.is-visible {
       display: block;
       margin-top: 0;
}

/* ---- .checkbox__singular-selection — radio group rendered as pressable pills ----
   Each option is a radio whose native control is visually hidden (but kept in the
   focus/a11y tree); its <label> is the whole pill, so a click anywhere on the pill
   selects that option via the label's `for`. The checked look is painted through the
   input:checked + label adjacent-sibling selector (the input precedes its label). */
.checkbox__singular-selection {
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
}

/* Visually hide the native radio without dropping it from tab order / a11y. */
.checkbox__singular-selection input[type="radio"] {
       position: absolute;
       width: 1px;
       height: 1px;
       margin: -1px;
       padding: 0;
       border: 0;
       overflow: hidden;
       clip: rect(0 0 0 0);
       clip-path: inset(50%);
       white-space: nowrap;
}

/* Only the pill <label>s (always inside .input__checkbox) get pill styling — this
   keeps an optional group caption (a direct child of the group) pill-free. */
.checkbox__singular-selection .input__checkbox label {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       min-height: var(--btn-height);
       padding: 0.5rem 1.15rem;
       border: 1px solid var(--select-pill-border);
       border-radius: 999px;
       background-color: var(--select-pill-bg);
       color: var(--select-pill-text);
       font-family: var(--font-body);
       font-size: 0.9rem;
       font-weight: 600;
       line-height: 1.1;
       cursor: pointer;
       user-select: none;
       transition: var(--btn-lift), background-color .2s ease, border-color .2s ease, color .2s ease;
}

.checkbox__singular-selection .input__checkbox label:hover {
       background-color: var(--select-pill-hover-bg);
       border-color: var(--select-pill-hover-border);
       box-shadow: var(--select-pill-hover-shadow);
       transform: translateY(var(--btn-lift-distance));
}

/* Optional caption for the whole group. As a full-width flex child it takes its
   own row, so the pills wrap onto the line(s) below it. Kept as a non-pill element
   (e.g. <span>); pair it with role="group" + aria-labelledby on the container so
   assistive tech announces it as the group's name. */
.checkbox__singular-selection > .selection-label {
       flex: 0 0 100%;
       font-family: var(--font-body);
       font-weight: 400;
       color: var(--input-verbose-label-color);
}

/* Selected pill — filled, mirroring the .btn--primary treatment. */
.checkbox__singular-selection input[type="radio"]:checked + label {
       background-color: var(--select-pill-checked-bg);
       border-color: var(--select-pill-checked-border);
       color: var(--select-pill-checked-text);
}

.checkbox__singular-selection input[type="radio"]:checked + label:hover {
       background-color: var(--select-pill-checked-hover-bg);
       border-color: var(--select-pill-checked-hover-border);
       color: var(--select-pill-checked-hover-text);
}

/* Keyboard focus lands on the hidden radio — surface a ring on its pill. */
.checkbox__singular-selection input[type="radio"]:focus-visible + label {
       box-shadow: var(--select-pill-focus-ring);
}

/* ---- #privacy consent checkbox ----------------------------------------------
   Scoped via :has(#privacy) so only this .input__checkbox is affected — the other
   .input__checkbox wrappers hold the radio pills. The block has four children in
   source order: a prompt label, the checkbox, the consent sentence (label), and a
   .field-hint. Laid out on a 2-col grid: the box in col 1, the sentence in col 2,
   and the prompt + hint spanning the full row above/below. */
.input__checkbox:has(#privacy) {
       display: grid;
       grid-template-columns: auto 1fr;
       align-items: center;
       column-gap: 10px;
       row-gap: 8px;
       max-width: calc(var(--maxw) - 24px);
}

/* Prompt line ("Bitte bestätigen Sie: *") — full-width, styled like a field label. */
.input__checkbox:has(#privacy) > label:first-of-type {
       grid-column: 1 / -1;
       font: var(--font-body);
       font-weight: 400;
       color: var(--input-verbose-label-color);
}

/* Consent sentence next to the box; its inline link tracks the accent. */
.input__checkbox:has(#privacy) > input + label {
       grid-column: 2;
       font: var(--font-body);
       line-height: 1.4;
       color: var(--input-verbose-label-color);
       cursor: pointer;
}

.input__checkbox:has(#privacy) > input + label a {
       color: var(--checkbox-link);
       text-decoration: underline;
       text-underline-offset: 2px;
}

/* The .field-hint (revealed on :user-invalid) spans the full row under the box,
   so it isn't squeezed into the narrow checkbox column by grid auto-placement. */
.input__checkbox:has(#privacy) > .field-hint {
       grid-column: 1 / -1;
}

/* Custom checkbox: native box replaced, surface reuses the shared field tokens. */
.input__checkbox:has(#privacy) > input[type="checkbox"] {
       grid-column: 1;
       appearance: none;
       -webkit-appearance: none;
       width: 20px;
       height: 20px;
       margin: 0;
       border: var(--input-verbose-border);
       border-radius: var(--radius-sm);
       background-color: var(--input-verbose-bg);
       display: grid;
       place-content: center;
       cursor: pointer;
       transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* The tick — a rotated open corner, hidden until :checked. */
.input__checkbox:has(#privacy) > input[type="checkbox"]::after {
       content: "";
       width: 5px;
       height: 10px;
       border: solid var(--checkbox-mark);
       border-width: 0 2px 2px 0;
       transform: rotate(45deg) translate(-0.5px, -1px);
       opacity: 0;
       transition: opacity .12s ease;
}

.input__checkbox:has(#privacy) > input[type="checkbox"]:hover {
       border-color: var(--checkbox-hover-border);
}

.input__checkbox:has(#privacy) > input[type="checkbox"]:checked {
       background-color: var(--checkbox-checked-bg);
       border-color: var(--checkbox-checked-border);
}

.input__checkbox:has(#privacy) > input[type="checkbox"]:checked::after {
       opacity: 1;
}

.input__checkbox:has(#privacy) > input[type="checkbox"]:focus-visible {
       box-shadow: var(--input-verbose-box-shadow-focused);
}

/* Failed-required feedback, matching the text inputs' :user-invalid treatment.
   Uses the shared border token (not raw --danger) so it also picks up the dark
   theme's lightened invalid border. */
.input__checkbox:has(#privacy) > input[type="checkbox"]:user-invalid {
       border: var(--input-verbose-border-invalid);
       box-shadow: var(--input-verbose-box-shadow-invalid);
}

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

/* Add to any <section> that an anchor link targets, so the jump stops
   below the fixed header instead of hiding the section's heading behind it.
   Uses scroll-margin (not margin) — no visible whitespace, only the
   scroll landing point is offset. */
.section-anchor {
       scroll-margin-top: var(--header-offset);
}

header {
       font-family: var(--font-mono);
}

header a {
       text-decoration: none;
}

header ul {
       list-style: none;
}

.sticky-header {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       z-index: 100;
       height: auto;
       padding-block: var(--header-padding-block);
       box-shadow: var(--header-shadow);
       border-bottom: 1px solid var(--header-border);
}

.sticky-header::before {
       content: '';
       position: absolute;
       inset: 0;
       z-index: -1;
       background-color: var(--header-bg);
       backdrop-filter: blur(16px);
       -webkit-backdrop-filter: blur(16px);
}

/* Progressive enhancement — scroll-driven shrink, desktop only.
       Mobile gets a plain solid sticky header: no animation, no blur,
       no per-frame compositing cost on the 120Hz ProMotion display. */
@supports (animation-timeline: scroll()) {
       @media (min-width: 641px) {

              /* Paint-only: shadow + border fade in. No box-model change,
                 so no reflow and no layout shift (CLS). */
              @keyframes header-settle {
                     from {
                            box-shadow: none;
                            border-bottom-color: transparent;
                     }

                     to {
                            box-shadow: var(--header-shadow);
                            border-bottom-color: var(--header-border);
                     }
              }

              @keyframes header-bg-in {
                     from {
                            opacity: 0;
                     }

                     to {
                            opacity: 1;
                     }
              }

              .sticky-header {
                     box-shadow: none;
                     border-bottom-color: transparent;
                     animation: header-settle linear both;
                     animation-timeline: scroll(root);
                     animation-range: 0px 140px;
              }

              .sticky-header::before {
                     animation: header-bg-in linear both;
                     animation-timeline: scroll(root);
                     animation-range: 0px 140px;
              }
       }
}

.sticky-header__inner {
       max-width: 1200px;
       margin-inline: auto;
       padding-inline: 2rem;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 2rem;
}

.sticky-header__nav {
       display: flex;
       align-items: center;
       gap: 0.125rem;
}

/* .logo--dark is styled exactly like .logo, but its markup always loads the
   dark-theme image (the icon) regardless of the OS theme — for use on
   always-dark surfaces like the footer. */
.logo {
       display: block;
       flex-shrink: 0;
       border-radius: var(--radius-md);
       display: flex;
       align-items: flex-start;
       overflow: hidden;
}

.logo img {
       display: block;
       /* 60% of the header height — tracks --header-height (100px → 60px). */
       height: calc(var(--header-height) * 0.8);
       width: auto;
       transform: scale(1.6);
       transform-origin: center;
       border-radius: var(--radius-md);
}

/* Hamburger icon — hidden on desktop, shown on mobile */
.burger {
       display: none;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 6px;
       width: 52px;
       height: 52px;
       padding: 0;
       flex-shrink: 0;
}

/* Three plain block spans — no box-shadow, compositor-safe */
.burger span {
       display: block;
       width: 32px;
       height: 4px;
       background: var(--brand-navy);
       border-radius: var(--radius-md);
}

.burger:hover span,
.burger:active span {
       background: var(--gray-scale-0);
}

/* Smooth bar recolor + the transforms used for the open (X) state below. */
.burger span {
       transition: transform 0.2s var(--header-ease), opacity 0.2s var(--header-ease), background 0.2s var(--header-ease);
}

/* The toggle checkbox: visually hidden but NOT display:none, so it stays in the
   tab order and Space still flips it. It must precede <nav> for the ~ selectors. */
.nav-toggle {
       position: absolute;
       width: 1px;
       height: 1px;
       opacity: 0;
       pointer-events: none;
}

/* Keyboard focus lands on the invisible checkbox — surface it on the burger,
   which is a later sibling of the checkbox. */
.nav-toggle:focus-visible~.burger {
       outline: 3px solid var(--navy-scale-400);
       outline-offset: 2px;
}

/* Open state: morph the three bars into an X. gap(6) + height(4) = 10px shift. */
.nav-toggle:checked~.burger span:nth-child(1) {
       transform: translateY(10px) rotate(45deg);
}

.nav-toggle:checked~.burger span:nth-child(2) {
       opacity: 0;
}

.nav-toggle:checked~.burger span:nth-child(3) {
       transform: translateY(-10px) rotate(-45deg);
}

section {
       display: block;
       unicode-bidi: isolate;
}

.container {
       max-width: var(--maxw);
       margin-inline: auto;
       padding-inline: 24px;
       border-radius: var(--radius-xl);
}

/* Contact form wrapper rendered as one big elevated card — overrides the plain,
   layout-only .container for this section only (other .containers are untouched).
   Card chrome reuses the shared --card-* / --shadow-* tokens, so it tracks the
   light/dark themes automatically. `width` caps the panel at a comfortable form
   measure and keeps a gutter on narrow screens (margin-inline: auto from the base
   centres it); border-radius is also inherited from the base. */
#contact_fromular .container {
       width: min(820px, 100% - 48px);
       padding: clamp(28px, 5vw, 56px);
       margin-block: 0 clamp(64px, 10vw, 120px);
       background: var(--card-bg);
       border: 1px solid var(--card-border);
       box-shadow: var(--shadow-lg);
}

/* Give the "Kontakt" heading room from the first field inside the card. */
#contact_fromular .container .display {
       margin-bottom: clamp(20px, 3vw, 32px);
}

.hero {
       position: relative;
       /* Clip only the x-axis so the overhanging badges can't cause a
          horizontal scrollbar, while leaving y visible so the browser
          mockup's box-shadow isn't cut off top and bottom. */
       overflow-x: clip;
       overflow-y: visible;
}

.hero__grid {
       display: grid;
       grid-template-columns: 1.05fr .95fr;
       align-items: center;
       gap: clamp(32px, 5vw, 64px);
}

.tags {
       display: flex;
       flex-wrap: wrap;
       gap: 10px 20px;
       margin: 26px 0 30px;
}

.tag {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       font-weight: var(--tag-weight);
       font-size: var(--tag-size);
       color: var(--navy-scale-800);
}

.tag svg {
       --icon-size: calc(var(--tag-size) * 0.15 + 1em);
       width: var(--icon-size);
       height: var(--icon-size);
       flex-shrink: 0;
       display: grid;
       place-items: center;
       color: var(--teal-scale-500);
       filter: drop-shadow(0px 0px 8px attr(data-shadow-color, var(--teal-scale-500)));
}

.hero__cta {
       display: flex;
       flex-wrap: wrap;
       gap: 12px;
}

.hero__note {
       margin-top: 22px;
       font-size: 14px;
       color: var(--ink-muted);
       display: flex;
       align-items: center;
       gap: 8px;
}

.hero__note svg {
       width: 16px;
       height: 16px;
       color: var(--brand-navy-deep);
}

.hero__visual {
       display: flex;
       justify-content: center;
       align-items: center;
       position: relative;
       min-height: 560px;
}

.browser-wrap {
       position: relative;
       width: min(540px, 100%);
}

.browser {
       width: 100%;
       background: var(--browser-bg);
       border-radius: var(--radius-xl);
       overflow: hidden;
       box-shadow: var(--browser-shadow);
       border: 1px solid var(--browser-border);
}

.browser__top {
       height: 58px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 0 20px;
       background: var(--browser-toolbar-bg);
}

.browser__dots {
       display: flex;
       gap: .5rem;
}

.browser__dots span {
       width: 12px;
       height: 12px;
       border-radius: 50%;
       background: var(--browser-dot-idle);
}

.browser__dots span:nth-child(1) {
       background: #ff5f57;
}

.browser__dots span:nth-child(2) {
       background: #febc2e;
}

.browser__dots span:nth-child(3) {
       background: #28c840;
}

.browser__url {
       padding: .45rem 1rem;
       border-radius: 999px;
       background: var(--browser-url-bg);
       color: var(--browser-url-text);
       font-size: .82rem;
       font-weight: 500;
}

.browser__content {
       position: relative;
       padding: 28px;
       background: var(--browser-content-bg);
}

/* ---------------- Website Preview ---------------- */

.website {
       background: var(--website-bg);
       border-radius: 16px;
       padding: 20px;
       border: 1px solid var(--website-border);
}

.website__hero {
       height: 150px;
       border-radius: 12px;
       margin-bottom: 20px;
       background: var(--website-hero);
}

.website__row {
       display: flex;
       gap: 14px;
       margin-bottom: 18px;
}

.website__card {
       flex: 1;
       height: 80px;
       border-radius: 12px;
       background: var(--website-card-bg);
       border: 1px solid var(--website-card-border);
}

.website__section {
       height: 110px;
       border-radius: 12px;
       margin-bottom: 18px;
       background: var(--website-card-bg);
       border: 1px solid var(--website-card-border);
}

.website__small {
       flex: 1;
       height: 60px;
       border-radius: 10px;
       background: var(--website-card-bg);
       border: 1px solid var(--website-card-border);
}

/* ---------------- Floating Badges ---------------- */

.badge {
       position: absolute;
       display: flex;
       align-items: center;
       gap: .8rem;

       padding: .9rem 1rem;

       backdrop-filter: blur(2px);

       border: 1px solid rgba(255, 255, 255, .7);
       border-radius: var(--radius-lg);

       box-shadow:
              0 20px 45px rgba(15, 23, 42, .12);

       animation: float 6s ease-in-out infinite;
}

.badge strong {
       display: block;
       font-size: 1rem;
       color: var(--brand-navy-deep);
}

.badge span {
       display: block;
       font-size: .78rem;
       color: var(--ink-muted);
}

/* Horizontal offsets are clamped so a badge is never closer than 10px to a
   viewport edge. 50% - 50vw is the (negative) gap between the badge's containing
   block (.browser-wrap, centered) and the viewport edge; +10px sets the minimum
   inset. max() keeps the design overhang on wide screens, pulls in on narrow ones. */
.badge--performance {
       top: 45px;
       left: max(-45px, 50% - 50vw + 10px);
}

.badge--seo {
       top: 220px;
       right: max(-24px, 50% - 50vw + 10px);
       animation-delay: 1.2s;
}

.badge--responsive {
       bottom: 180px;
       left: max(-60px, 50% - 50vw + 10px);
       animation-delay: 2.4s;
}

.badge--code {
       bottom: 40px;
       right: max(-12px, 50% - 50vw + 10px);
       animation-delay: 3.6s;
}

/* ---------------- Animation ---------------- */

@keyframes float {
       0% {
              transform: translateY(0px);
       }

       50% {
              transform: translateY(-10px);
       }

       100% {
              transform: translateY(0px);
       }
}

.section {
       padding-top: 120px;
}

.section__head {
       max-width: 60ch;
       margin-bottom: clamp(32px, 5vw, 56px);
}

.section__lead {
       margin-top: 16px;
       font-size: clamp(16px, 2.1vw, 19px);
       color: var(--ink-muted);
       max-width: 46ch;
       line-height: 1.7;
}

/* #process: present the section as one narrower, centred column. Scoped to
   #process so the shared .container (also used by the hero) is untouched.
   The heading + intro are centred; the timeline sits centred beneath, its
   steps still left-aligned within the column for readability. */
#process .container {
       max-width: 600px;
}

#process .section__head {
       max-width: none;
       text-align: center;
}

#process .section__lead {
       margin-inline: auto;
}

/* #services: centre only the heading + intro; the card grid and tiers keep the
   full .container width (already centred on the page via margin-inline: auto). */
#services .section__head {
       max-width: none;
       text-align: center;
}

#services .section__lead {
       margin-inline: auto;
}

#extras .section__head {
       max-width: none;
       text-align: center;
}

#extras .section__lead {
       margin-inline: auto;
}

#pricing .section__head {
       max-width: none;
       text-align: center;
}

#pricing .section__lead {
       margin-inline: auto;
}

#contact {
       padding-bottom: 120px;
}

#contact .section__head {
       max-width: none;
       text-align: center;
}

#contact .section__lead {
       margin-inline: auto;
}

/* ---- Legal prose pages (privacy.html + legal.html + accessibility.html) ---
   These pages reuse the shared type classes (.display / .h2 / .text). The
   rules only add page-level spacing and a comfortable reading measure; all
   colours come from those classes/tokens, so light/dark is handled already.
   Scoped to the section ids so nothing else on the site is affected. */
#privacy_section,
#legal_section,
#accessibility_section {
       padding-bottom: clamp(80px, 12vw, 140px);
}

/* Cap the line length — full 1200px container is too wide to read as prose. */
#privacy_section .container,
#legal_section .container,
#accessibility_section .container {
       max-width: var(--maxw);
}

/* Space each section apart (the .h2 class carries no margin). */
#privacy_section .h2,
#legal_section .h2,
#accessibility_section .h2 {
       margin-top: clamp(40px, 6vw, 64px);
}

/* A touch more air between paragraphs than the base .text (8px). */
#privacy_section .text,
#legal_section .text,
#accessibility_section .text {
       margin-top: 16px;
}

/* The global reset zeroes list padding, so default outside markers hang left
   of the text column. `inside` puts each bullet at the content edge (x=0) so
   it lines up with the paragraph text above; items here are short one-liners.
   Markers inherit the theme-aware .text colour, so no colour override needed. */
#privacy_section ul.text,
#accessibility_section ul.text {
       list-style-position: inside;
}

#privacy_section li,
#accessibility_section li {
       margin-top: 6px;
}

/* Push the "Stand:" line clear of the last paragraph. */
#privacy_section .overline,
#legal_section .overline,
#accessibility_section .overline {
       margin-top: clamp(48px, 8vw, 80px);
}

/* --- Small-screen safety ---------------------------------------------------
   body uses overflow-x: clip, so anything wider than the viewport is clipped
   (cut off), not scrollable. The two things that overflow here are long single-
   word German headings (e.g. „Datenschutzerklärung", „Barrierefreiheitserklärung")
   and the long URLs shown as link text. Let the headings scale down fluidly
   (capped at the existing token) and break; let URLs wrap. */
#privacy_section .display,
#legal_section .display,
#accessibility_section .display {
       font-size: clamp(34px, 8vw, var(--display-font-size));
       overflow-wrap: break-word;
       -webkit-hyphens: auto;
       hyphens: auto;
}

#privacy_section .h2,
#legal_section .h2,
#accessibility_section .h2 {
       font-size: clamp(24px, 5.5vw, var(--h2-font-size));
       overflow-wrap: break-word;
       -webkit-hyphens: auto;
       hyphens: auto;
}

/* Long URLs break at any point instead of forcing horizontal overflow. */
#privacy_section .text a,
#legal_section .text a,
#accessibility_section .text a {
       overflow-wrap: anywhere;
}

/* ---- Thank-you page (thanks.html) ------------------------------------------
   Reuses the shared type classes (.display / .text / .btn--primary). Only adds
   the same reading measure + page spacing as the legal pages, a teal glowing
   check above the heading (colour + glow come from .svg-shadow), and a little
   air above the "back" button. Colours are token-driven, so dark mode is free. */
#thanks_section {
       padding-bottom: clamp(80px, 12vw, 140px);
}

#thanks_section .container {
       max-width: var(--maxw);
}

#thanks_section .text {
       margin-top: 16px;
}

/* Symbols carry no intrinsic size here, so set it explicitly. */
#thanks_section .thanks-check {
       width: clamp(48px, 9vw, 64px);
       height: clamp(48px, 9vw, 64px);
       margin-bottom: 20px;
}

#thanks_section .btn--primary {
       margin-top: 32px;
}

.timeline {
       position: relative;
}

.step {
       position: relative;
       display: grid;
       grid-template-columns: 48px 1fr;
       gap: 22px;
       padding-bottom: 34px;
}

.step:not(:last-child)::before {
       content: "";
       position: absolute;
       top: 48px;
       bottom: 0;
       left: 23px;
       width: 2px;
       background: var(--navy-scale-200);
}

.step__num {
       width: 48px;
       height: 48px;
       border-radius: var(--radius-xl);
       z-index: 1;
       display: grid;
       place-items: center;
       font-family: var(--font-mono);
       font-size: 15px;
       font-weight: 500;
       background: var(--navy-scale-300);
       border: 2px solid var(--navy-scale-200);
       color: var(--gray-scale-0);
}

/* ---- Scroll-driven "light up" — pure CSS, no JS ----
   The whole timeline reads as ONE light that fills top -> bottom, synced to
   scroll: everything above the trigger line is teal, everything below is gray,
   and the boundary sits exactly on that line — set 300px ABOVE the viewport's
   vertical centre.

   How: every node AND every connector runs the same self-tracking view()
   timeline, but the scrollport is collapsed to a ~2px band at the trigger line.
   The asymmetric insets place that band 300px above centre: the top inset is
   300px smaller and the bottom inset 300px larger than a symmetric 50%/50%,
   which keeps the band 2px tall but shifted up. Across that band an element's
   progress equals the fraction of itself above the trigger line, mapped onto a
   top-anchored teal fill (background-size height 0% -> 100%). Since each line's
   bottom meets the next node's top, the fills hand off with no gap and no
   overlap — a single continuous front. fill-mode: both keeps everything below
   the line empty and everything above it fully lit. */
@supports (animation-timeline: view()) {

       /* Connector line: teal gradient layered over the gray base, filling down. */
       .step:not(:last-child)::before {
              background:
                     linear-gradient(var(--teal-scale-500), var(--teal-scale-300)) top / 100% 0% no-repeat,
                     var(--navy-scale-200);
              animation: step-line-fill linear both;
              animation-timeline: view(block calc(42%) calc(58%));
       }

       /* Node: same top-anchored teal fill, plus text -> white and a teal glow as
       the front sweeps through. Its top meets the line above's bottom, so it
       ignites exactly as that line finishes — one uninterrupted sweep. */
       .step__num {
              background:
                     linear-gradient(var(--teal-scale-500), var(--teal-scale-300)) top / 100% 0% no-repeat,
                     var(--navy-scale-300);
              animation: step-node-fill linear both;
              animation-timeline: view(block calc(42%) calc(58%));
       }

}

/* Keyframes live at the top level (NOT inside an @supports block) so both the
   scroll-driven path above and the no-support fallback below can reference them.
   Keyframes declared inside a failing @supports rule are never registered. */
@keyframes step-line-fill {
       from {
              background-size: 100% 0%;
       }

       to {
              background-size: 100% 100%;
       }
}

@keyframes step-node-fill {
       from {
              background-size: 100% 0%;
              border-color: var(--navy-scale-200);
              color: var(--gray-scale-0);
              box-shadow: 0 0 0 0 rgba(20, 184, 166, 0);
       }

       to {
              background-size: 100% 100%;
              border-color: var(--teal-scale-300);
              color: var(--gray-scale-0);
              box-shadow:
                     0 0 0 4px rgba(20, 184, 166, .15), a 0 6px 18px rgba(20, 184, 166, .35);
       }
}

/* ---- Fallback: browsers WITHOUT scroll-driven animations (e.g. older Safari) ----
   Without animation-timeline, pure CSS can't react to scroll position (and the
   brief is HTML/CSS only — no JS/IntersectionObserver). So instead of a
   scroll-linked front we play the SAME fill once on load, staggered top ->
   bottom. Duration == stagger (220ms), so segments run back-to-back as one
   continuous sweep and every connector still finishes before the next node
   ignites. animation-fill-mode: both holds the lit end state afterwards, so a
   visitor who scrolls past before the cascade reaches a step still sees the
   intended lit result — the animation doubles as the static end state. */
@supports not (animation-timeline: view()) {

       .step:not(:last-child)::before {
              background:
                     linear-gradient(var(--teal-scale-500), var(--teal-scale-300)) top / 100% 0% no-repeat,
                     var(--navy-scale-200);
              animation: step-line-fill 220ms ease both;
       }

       .step__num {
              background:
                     linear-gradient(var(--teal-scale-500), var(--teal-scale-300)) top / 100% 0% no-repeat,
                     var(--navy-scale-300);
              animation: step-node-fill 220ms ease both;
       }

       /* Cascade in document order: each node, then the connector beneath it. */
       .step:nth-child(1) .step__num {
              animation-delay: 0ms;
       }

       .step:nth-child(1)::before {
              animation-delay: 220ms;
       }

       .step:nth-child(2) .step__num {
              animation-delay: 440ms;
       }

       .step:nth-child(2)::before {
              animation-delay: 660ms;
       }

       .step:nth-child(3) .step__num {
              animation-delay: 880ms;
       }

       .step:nth-child(3)::before {
              animation-delay: 1100ms;
       }

       .step:nth-child(4) .step__num {
              animation-delay: 1320ms;
       }

       .step:nth-child(4)::before {
              animation-delay: 1540ms;
       }

       .step:nth-child(5) .step__num {
              animation-delay: 1760ms;
       }

       .step:nth-child(5)::before {
              animation-delay: 1980ms;
       }

       .step:nth-child(6) .step__num {
              animation-delay: 2200ms;
       }

       .step:nth-child(6)::before {
              animation-delay: 2420ms;
       }

       .step:nth-child(7) .step__num {
              animation-delay: 2640ms;
       }

       /* Reduced motion: skip the auto-playing cascade. With no animation the
       gradient stays at 0 height, leaving the neutral gray timeline. */
       @media (prefers-reduced-motion: reduce) {

              .step:not(:last-child)::before,
              .step__num {
                     animation: none;
              }
       }
}

.step__body {
       padding-top: 4px;
}

.step__meta {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       margin-top: 12px;
}

.pill {
       display: inline-flex;
       align-items: center;
       gap: .4rem;
       font-size: 12px;
       font-weight: 600;
       padding: 4px 10px;
       border-radius: var(--radius-md);
       background: var(--pill-bg);
       color: var(--pill-text);
       margin-top: 8px;
}

/* #services placeholder icons — the cards reference sprite symbols via
   <use href="#i-monitor"> etc. Size the <svg> so they render as icons instead
   of the browser's default 300x150 replaced-element size; currentColor picks up
   the .ico colour below. (Full #services card/grid styling isn't defined yet.) */
.ico svg {
       width: 28px;
       height: 28px;
}

.ico {
       display: inline-flex;
       color: var(--teal-scale-600);
}

.ico--accent {
       color: var(--teal-scale-600);
}

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

.grid {
       display: grid;
       gap: 24px;
}

.card {
       background: var(--card-bg);
       border: 1px solid var(--card-border);
       border-radius: var(--radius-xl);
       padding: 28px;
       transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.card:hover {
       background: var(--card-hover-bg);
       transform: translateY(-1px);
       box-shadow: var(--shadow-md);
}

/* #services — "Skalierbar verpackt" packaging card. Styles lifted out of inline
   HTML style="" attributes so the markup stays presentation-free. These
   deliberately override the base .card / .feature__title values for this card. */
.pkg {
       margin-top: 24px;
       padding: clamp(24px, 4vw, 36px);
}

/* Header row: icon beside the title/text, wrapping on narrow widths. */
.pkg__head {
       display: flex;
       align-items: flex-start;
       gap: 16px;
       flex-wrap: wrap;
       margin-bottom: 20px;
}

/* Icon sits inline with the heading here, so drop any stacked bottom gap. */
.pkg__head .ico {
       margin-bottom: 0;
}

.pkg__head .feature__title {
       margin-bottom: 4px;
}

.tiers {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 16px;
       margin-top: 8px;
}

.tier {
       background: var(--tier-bg);
       border: 1px solid var(--tier-border);
       border-radius: var(--radius-lg);
       padding: 22px;
}

/* #extras cards: three across on desktop. Declared BEFORE the mobile media
   query below on purpose — media queries add no specificity, so on a tie the
   later rule wins. If this desktop base sat after the query, it would override
   the mobile collapse and the grid would stay 3-wide on phones. */
.grid--3 {
       grid-template-columns: repeat(3, 1fr);
}

/* #extras accordion chevron — sized so the sprite <use> renders as a small icon
   instead of the SVG default 300x150. Rotation is handled in the SEO card below. */
.chev {
       width: 18px;
       height: 18px;
       flex-shrink: 0;
}

/* ---- SEO card — styled like the "Skalierbar verpackt" (.pkg) card ----
   Full-width, roomy card that reuses the .pkg__head accent-icon header row, with
   the accordion items dressed as .tier-style boxes so both cards read the same. */
.seo-card {
       /* Span the whole .grid--3 row (like .pkg spans its container). */
       grid-column: 1 / -1;
       padding: clamp(24px, 4vw, 36px);
}

.seo-list {
       /* Match .tiers: three equal columns. align-items:start keeps each box at
          its natural height so an open accordion doesn't stretch its neighbours. */
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       align-items: start;
       gap: 16px;
       margin-top: 8px;
       /* Lets the accordions below transition height to/from `auto` (inherited). */
       interpolate-size: allow-keywords;
}

/* Each <details> is dressed as a .tier, so it reuses the tier tokens — matched
   in both light and dark, and with the same defined border for Edge. */
.seo-list details {
       background: var(--tier-bg);
       border: 1px solid var(--tier-border);
       border-radius: var(--radius-lg);
       padding: 16px 22px;
}

/* Smoothly reveal the disclosed content. ::details-content is the part after
   <summary>; animating its block-size (0 -> auto, enabled by interpolate-size)
   plus opacity, at the same 200ms var(--header-ease) as the chevron. content-
   visibility is transitioned discretely so it stays visible through the close. */
.seo-list details::details-content {
       block-size: 0;
       overflow: clip;
       opacity: 0;
       transition:
              block-size 200ms var(--header-ease),
              opacity 200ms var(--header-ease),
              content-visibility 200ms var(--header-ease) allow-discrete;
}

.seo-list details[open]::details-content {
       block-size: auto;
       opacity: 1;
}

/* Bullet list inside an accordion body, with a hanging indent. A custom • is used
   (not the native marker) so we control alignment precisely:
   - padding-left:1.2em sets where the label sits and where WRAPPED lines hang.
   - text-indent:-1.2em pulls the first line (the bullet) back to x=0, so the dot
     lines up with the intro text above; wrapped lines keep the 1.2em indent, so
     they align under the label, not under the bullet.
   (The global `* { padding:0 }` reset had hidden the default outside markers.) */
.seo-list details ul {
       margin-top: 8px;
       padding-left: 0;
       list-style: none;
}

.seo-list details li {
       margin-top: 4px;
       padding-left: 1.2em;
       text-indent: -1.2em;
}

.seo-list details li::before {
       content: "•";
       display: inline-block;
       width: 1.2em;
       text-indent: 0;
       /* • inherits currentColor, so it matches the text in light and dark. */
}

.seo-list summary {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
       cursor: pointer;
}

/* Remove the native disclosure triangle (Safari/WebKit). */
.seo-list summary::-webkit-details-marker {
       display: none;
}

.seo-list .chev {
       color: var(--teal-scale-600);
       transition: transform 200ms var(--header-ease);
}

.seo-list details[open] .chev {
       transform: rotate(180deg);
}

.acc-body {
       margin-top: 10px;
       font-size: 14px;
       color: var(--text-color);
       line-height: 1.65;
}

.acc-body ul {
       margin-top: 8px;
       padding-left: 18px;
}

.acc-body li {
       margin-top: 4px;
}

.price-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 24px;
       align-items: start;
}

.price {
       background: var(--card-bg);
       border: 1px solid var(--card-border);
       border-radius: var(--radius-xl);
       padding: 30px;
       position: relative;
       color: var(--price-text);
       transition: transform 160ms ease, box-shadow 160ms ease;
}

.price:hover {
       background: var(--card-hover-bg);
       transform: translateY(-1px);
       box-shadow: var(--shadow-md);
}

.price__amt {
       margin: 16px 0 4px;
       display: flex;
       align-items: baseline;
       gap: 6px;
}

.price__amt b {
       font-family: var(--font-display);
       font-weight: 700;
       font-size: 42px;
       color: var(--price-amount);
       letter-spacing: -.03em;
}

.price__amt span {
       color: var(--ink-muted);
       font-size: 14px;
}

.price__from {
       font-size: 12px;
       color: var(--ink-muted);
       font-family: var(--font-mono);
       margin-bottom: 20px;
}

.price__list {
       display: grid;
       gap: 12px;
       margin-bottom: 26px;
}

.price__list li {
       display: flex;
       gap: 10px;
       align-items: flex-start;
       font-size: 14.5px;
}

.price--featured {
       border: 2px solid var(--teal-scale-500);
       box-shadow: var(--shadow-lg);
}

.price--featured::before {
       content: 'Beliebt';
       position: absolute;
       top: -13px;
       left: 50%;
       transform: translateX(-50%);
       background: var(--teal-scale-500);
       color: #06302C;
       font-size: 12px;
       font-weight: 700;
       padding: 5px 14px;
       border-radius: var(--radius-xl);
}

/* #pricing list check marks — size the sprite <use> so each renders as a small
   inline icon instead of the SVG default 300x150. currentColor -> teal via the
   .li-ico wrapper. (Full .price__list / .price__* layout isn't defined yet.) */
.li-ico {
       display: inline-flex;
       color: var(--teal-scale-600);
}

.li-ico svg {
       width: 16px;
       height: 16px;
}

.contact-split {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: clamp(28px, 5vw, 56px);
       align-items: start;
}

.cta-panel {
       background: linear-gradient(155deg, var(--brand-navy), var(--brand-navy-deep));
       color: #fff;
       border-radius: var(--radius-xl);
       padding: clamp(28px, 4vw, 44px);
       position: relative;
       overflow: hidden;
}

.faq__intro {
       color: var(--ink-muted);
       margin-bottom: 22px;
       font-size: 15px;
}

/* ---- #contact ---- */

.cta-panel h3 {
       font-family: var(--font-display);
       font-size: clamp(22px, 3vw, 28px);
       line-height: 1.15;
       color: var(--gray-scale-0);
       margin-bottom: 12px;
}

.cta-panel p {
       color: var(--navy-scale-200);
       max-width: 44ch;
       margin-bottom: 26px;
}

/* Soft teal glow in the corner, clipped by the panel's overflow:hidden. */
.cta-panel::before {
       content: "";
       position: absolute;
       top: -35%;
       right: -15%;
       width: 300px;
       height: 300px;
       background: radial-gradient(circle, rgba(20, 184, 166, .28), transparent 70%);
       pointer-events: none;
}

/* Lift the real content above the decorative glow (both are positioned, so the
   later-in-DOM content paints on top). */
.cta-panel>* {
       position: relative;
}

.cta-facts {
       list-style: none;
       margin-top: 28px;
       display: grid;
       gap: 12px;
}

.cta-facts li {
       display: flex;
       align-items: center;
       gap: 12px;
       font-size: 14.5px;
       color: var(--navy-scale-100);
}

.cf-ico {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
       width: 34px;
       height: 34px;
       border-radius: var(--radius-md);
       background: rgba(255, 255, 255, .08);
       color: var(--teal-scale-300);
}

.cf-ico svg {
       width: 18px;
       height: 18px;
}

.faq details {
       border-bottom: 1px solid var(--faq-border);
       /* Enables the block-size:auto transition on ::details-content below. */
       interpolate-size: allow-keywords;
}

.faq summary {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
       cursor: pointer;
       /* Hide the native disclosure triangle (Chrome/Firefox). */
       list-style: none;
       padding: 18px 0;
       font-family: var(--font-display);
       font-weight: 600;
       font-size: 16px;
       color: var(--faq-summary);
}

/* Hide the native disclosure triangle (Safari/WebKit). */
.faq summary::-webkit-details-marker {
       display: none;
}

.faq .chev {
       color: var(--teal-scale-600);
       transition: transform 200ms var(--header-ease);
}

.faq details[open] .chev {
       transform: rotate(180deg);
}

.faq .acc-body {
       margin-top: 0;
       padding-bottom: 18px;
       max-width: 62ch;
}

/* Smooth reveal, matching .seo-list: animate the disclosed content's block-size
   (0 -> auto) + opacity at the chevron's 200ms var(--header-ease). content-
   visibility transitions discretely so the answer stays visible while closing. */
.faq details::details-content {
       block-size: 0;
       overflow: clip;
       opacity: 0;
       transition:
              block-size 200ms var(--header-ease),
              opacity 200ms var(--header-ease),
              content-visibility 200ms var(--header-ease) allow-discrete;
}

.faq details[open]::details-content {
       block-size: auto;
       opacity: 1;
}

footer {
       display: grid;
       grid-template-columns: repeat(3, auto);
       justify-content: space-between;
       align-items: start;
       padding-top: 4vw;
       /* Full-width background, but the content is held to the site's max width and
          centered: the inline padding equals the container gutter (and never drops
          below 24px on narrow screens). */
       padding-inline: max(24px, calc((100% - var(--maxw)) / 2));
       background-color: var(--footer-background-color);
}

/* Brand column: logo lockup on top, contact details stacked beneath. */
.footer__brand {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       gap: 18px;
}

/* Contact details: muted label text with teal-on-hover links, matching the
   legal column's link treatment. */
.footer__contact {
       display: grid;
       gap: 6px;
       font-size: 14px;
       line-height: 1.5;
       color: var(--navy-scale-300);
}

.footer__contact a {
       color: var(--navy-scale-200);
       text-decoration: none;
       transition: color var(--header-ease);
}

.footer__contact a:hover {
       color: var(--teal-scale-300);
}

/* Brand lockup: icon + name in one clickable anchor. */
.logo__footer {
       display: inline-flex;
       align-items: center;
       gap: 14px;
       flex-shrink: 0;
       text-decoration: none;
       color: var(--gray-scale-0);
}

.logo__footer img {
       display: block;
       height: 48px;
       width: auto;
       border-radius: var(--radius-md);
}

.footer__name {
       font-family: var(--font-display);
       font-weight: 700;
       font-size: clamp(20px, 1.8vw, 26px);
       line-height: 1.1;
       color: var(--gray-scale-0);
       white-space: nowrap;
}

/* Row of social icon buttons. */
.footer__social {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: center;
       gap: 12px;
}

.footer__social h4 {
       width: 100%;
       font-family: var(--font-display);
       font-size: 14px;
       font-weight: 600;
       letter-spacing: .03em;
       color: var(--gray-scale-0);
       margin-bottom: 2px;
       text-align: center;
       text-transform: uppercase;
}

/* Teal-outlined icon button; fills teal and lifts on hover. The button itself is
   sized (44×44) — not the svg — so the icon sits centered with padding around it.
   (.svg-shadow on the <a> supplies the teal glow.) */
.footer__social__btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 44px;
       height: 44px;
       border: 1px solid var(--teal-scale-500);
       border-radius: var(--radius-md);
       color: var(--teal-scale-500);
       text-decoration: none;
       transition: background var(--header-ease), color var(--header-ease),
              transform var(--header-ease);
}

.footer__social__btn svg {
       width: 18px;
       height: 18px;
}

.footer__social__btn:hover {
       background: var(--teal-scale-500);
       color: var(--navy-scale-950);
       transform: translateY(-2px);
}

/* Legal link column: light heading, muted links, teal on hover. */
.footer__legal {
       text-align: right;
}

.footer__legal h4 {
       font-family: var(--font-display);
       font-size: 14px;
       font-weight: 600;
       letter-spacing: .03em;
       color: var(--gray-scale-0);
       margin-bottom: 14px;
       text-transform: uppercase;
}

.footer__legal ul {
       list-style: none;
       display: grid;
       gap: 11px;
}

.footer__legal a {
       color: var(--navy-scale-200);
       text-decoration: none;
       font-size: 14px;
       transition: color var(--header-ease);
}

.footer__legal a:hover {
       color: var(--teal-scale-300);
}

/* Bottom bar: spans the full footer width beneath the three columns —
   copyright on the left, legal links on the right — set off by a faint
   hairline. Wraps to stacked, centered rows on narrow screens. */
.footer__bottom {
       grid-column: 1 / -1;
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
       align-items: center;
       gap: 12px 24px;
       margin-top: clamp(24px, 3vw, 36px);
       margin-bottom: clamp(24px, 3vw, 36px);
       padding-top: 24px;
       border-top: 1px solid rgba(255, 255, 255, .08);
       font-size: 13px;
       color: var(--navy-scale-300);
}

.footer__bottom nav {
       display: flex;
       flex-wrap: wrap;
       gap: 10px 20px;
}

.footer__bottom a {
       color: var(--navy-scale-200);
       text-decoration: none;
       transition: color var(--header-ease);
}

.footer__bottom a:hover {
       color: var(--teal-scale-300);
}

/* =====================================================================
   RESPONSIVE — all @media breakpoints grouped here, in original source
   order so overlapping breakpoints still cascade correctly, kept just
   above the dark-theme block below. (Nested @media inside @supports, a
   selector rule, or the dark-theme block stay with their parents.)
   ===================================================================== */
@media (max-width: 1040px) {

       .sticky-header__inner {
              max-width: 1200px;
              margin-inline: auto;
              padding-inline: 2rem;
              display: flex;
              align-items: center;
              column-gap: 1rem;
       }

       .burger {
              display: flex;
       }

       .sticky-header__inner>a:first-child {
              margin-right: auto;
       }

       /* --- Burger dropdown (opened by #nav-toggle) --------------------------
          The panel's structural + CLOSED state lives here on the base selector,
          so during the exit transition it keeps its position/background while it
          fades out. Only opacity/transform/display flip between open & closed.

          display isn't animatable, so it's transitioned discretely with
          `allow-discrete`: it switches to flex at the start of the entry (paired
          with @starting-style) and back to none only after the fade-out ends.
          Same 0.2s var(--header-ease) as the burger's X morph. */
       .sticky-header__nav {
              display: none;
              flex-direction: column;
              align-items: stretch;
              gap: 8px;
              position: absolute;
              top: 100%;
              left: 0;
              right: 0;
              margin: 0;
              padding: 12px;
              list-style: none;
              background: var(--header-bg);
              border-top: 1px solid var(--gray-scale-200);
              box-shadow: var(--shadow-lg);
              opacity: 0;
              transform: translateY(-8px);
              transform-origin: top center;
              transition: opacity 0.2s var(--header-ease),
                     transform 0.2s var(--header-ease),
                     display 0.2s var(--header-ease) allow-discrete;
       }

       /* Open — only the animated + display props change. */
       .nav-toggle:checked~nav .sticky-header__nav {
              display: flex;
              opacity: 1;
              transform: translateY(0);
       }

       /* Values the panel animates FROM on first render (entry). */
       @starting-style {
              .nav-toggle:checked~nav .sticky-header__nav {
                     opacity: 0;
                     transform: translateY(-8px);
              }
       }

       .sticky-header__nav li {
              list-style: none;
              width: 100%;
       }

       /* Links rendered as full-width buttons that MIRROR .btn--secondary. The
          values are copied here (not shared) on purpose: it keeps the .btn--secondary
          rule untouched and leaves the desktop nav's .btn--ghost look unaffected —
          only these dropdown links pick up the secondary appearance. Full-width is
          the one intentional difference from the content-width secondary button. */
       .sticky-header__nav li a {
              display: flex;
              width: 100%;
              align-items: center;
              justify-content: center;
              gap: 0.5em;
              height: var(--btn-height);
              padding: 0.55rem 1.25rem;
              border-radius: var(--btn-radius);
              border: 1px solid var(--navy-scale-800);
              background-color: var(--gray-scale-0);
              color: var(--navy-scale-800);
              font-family: var(--font-body);
              font-size: 0.9rem;
              font-weight: 700;
              letter-spacing: 0.06em;
              white-space: nowrap;
              text-decoration: none;
              transition: var(--btn-lift);
       }

       .sticky-header__nav li a:hover {
              background: var(--navy-scale-500);
              color: var(--gray-scale-0);
              border-color: var(--navy-scale-400);
              box-shadow: var(--shadow-lg);
              transform: translateY(var(--btn-lift-distance));
       }

       .sticky-header__nav li a:active {
              background: var(--navy-scale-300);
              color: var(--gray-scale-0);
              border-color: var(--navy-scale-500);
              box-shadow: var(--shadow-lg);
              transform: translateY(var(--btn-press-distance));
       }
}

@media (max-width:900px) {
       .tags {
              justify-content: center;
       }

       .hero__grid {
              grid-template-columns: 1fr;
       }

       /* Stacked layout: center the hero content */
       .hero__content {
              display: flex;
              flex-direction: column;
              align-items: center;
              text-align: center;
       }

       .hero__cta {
              justify-content: center;
       }

       .hero__visual {
              min-height: auto;
       }

       .browser {
              width: 100%;
              display: flex;
              flex-direction: column;
              max-height: 500px;
              /* cap the mockup height so its content scrolls */
       }

       .browser__top {
              flex-shrink: 0;
              /* keep the chrome bar at full height */
       }

       .browser__content {
              flex: 1;
              min-height: 0;
              /* let the flex child shrink so it can scroll */
              overflow-y: auto;
       }

       /* Mockup goes "mobile": narrow phone-width frame... */
       .browser-wrap {
              max-width: 320px;
       }

       /* ...and the inner website switches to a single stacked column */
       .website__row {
              flex-direction: column;
       }

       /* In a column, flex:1 (flex-basis:0) would collapse the cards to zero
       height — reset to flex:none so their fixed heights apply and all show. */
       .website__card,
       .website__small {
              flex: none;
       }

       .badge {
              transform: scale(.9);
       }

       .price-grid {
              grid-template-columns: 1fr;
              /* Cap and centre the stacked column so cards don't stretch too wide;
           under ~460px the card just fills the screen as this stops biting. */
              max-width: 380px;
              margin-inline: auto;
       }

       .price {
              padding: 24px;
       }

       .contact-split {
              grid-template-columns: 1fr;
       }
}

@media (max-width: 640px) {

       .sticky-header::before {
              background-color: var(--header-bg);
              backdrop-filter: none;
              -webkit-backdrop-filter: none;
       }

       .sticky-header::before {
              background-color: var(--header-bg);
              backdrop-filter: none;
              -webkit-backdrop-filter: none;
       }

       /* Header: hide nav + CTA, show burger */
       .sticky-header__inner {
              padding-inline: 1.25rem;
              gap: 0;
       }

       .sticky-header__nav {
              display: none;
       }

       /* Hide the header "Termin vereinbaren" CTA on phones so only the logo +
          burger remain. Scoped to the header (direct child of the inner bar) so
          the hero's own .btn--primary is untouched. */
       .sticky-header__inner .btn--primary {
              display: none;
       }

       .tiers {
              grid-template-columns: 1fr;
       }

       .grid--2 {
              grid-template-columns: 1fr;
       }

       .grid--3 {
              grid-template-columns: 1fr;
       }

       .seo-list {
              grid-template-columns: 1fr;
       }

       footer {
              grid-template-columns: 1fr;
              justify-content: stretch;
              gap: 36px;
              text-align: center;
       }

       /* Center the logo lockup + contact block (normally left-aligned). */
       .footer__brand {
              align-items: center;
       }

       /* Center the social heading + button row. */
       .footer__social {
              justify-content: center;
       }

       /* Override the desktop right-alignment. */
       .footer__legal {
              text-align: center;
       }

       /* Center the copyright + legal links, stacked. */
       .footer__bottom {
              justify-content: center;
       }
}

@media (prefers-color-scheme: dark) {
       :root {

              --primary: #7DA6E0;
              /* Tints/shades derived from --primary, so the whole ramp tracks it —
                 change --primary once and every step follows automatically. */
              --primary-lighter-100: color-mix(in srgb, var(--primary), white 20%);
              --primary-lighter-200: color-mix(in srgb, var(--primary), white 40%);
              --primary-lighter-300: color-mix(in srgb, var(--primary), white 60%);
              --primary-darker-100: color-mix(in srgb, var(--primary), black 18%);
              --raised: #1A2236;
              --surface: #111726;
              --background: #0B0F1A;
              /* White instead of black: on a dark surface a light-colored shadow
                 reads as a glow/halo (as if the element emits light) rather than as
                 depth. Same offset/blur keeps the sm→xxl scale — but note white at
                 high alpha glows intensely, so these opacities may need dialing back. */
              --shadow-sm: 0 1px 2px rgba(255, 255, 255, .6);
              --shadow-md: 0 4px 12px rgba(255, 255, 255, .5);
              --shadow-lg: 0 12px 28px rgba(255, 255, 255, .55);
              --shadow-xl: 0 24px 56px rgba(255, 255, 255, .65);
              --shadow-xxl: 0 24px 56px rgba(255, 255, 255, .8);

              --header-shadow: var(--shadow-lg);
              --header-bg: var(--background);
              --header-border: var(--background);
              --header-padding-block: 1rem;

              /* Browser mockup — Safari dark values. Only these tokens change;
                 the .browser* class rules are shared with light mode. */
              --browser-bg: var(--gray-scale-900);
              --browser-shadow:
                     0 25px 70px rgba(0, 0, 0, .55),
                     0 10px 30px rgba(0, 0, 0, .40);
              --browser-border: rgba(255, 255, 255, .08);
              --browser-toolbar-bg: var(--gray-scale-800);
              --browser-dot-idle: var(--gray-scale-600);
              --browser-url-bg: var(--gray-scale-700);
              --browser-url-text: var(--gray-scale-300);
              --browser-content-bg: var(--gray-scale-900);

              /* Inner website mockup — dark values. Layered lighter than the
                 browser content (900 → 800 → 700) so the blocks read as elevated.
                 Hero gradient kept as the teal accent — reads fine on dark. */
              --website-bg: var(--gray-scale-800);
              --website-border: var(--gray-scale-700);
              --website-card-bg: var(--gray-scale-700);
              --website-card-border: var(--gray-scale-600);

              /* Pill/chip — dark: a muted navy chip (lighter than the page) with
                 soft light-blue text, so it reads as a subtle raised tag. */
              --pill-bg: var(--navy-scale-700);
              --pill-text: var(--navy-scale-100);

              /* Card — dark: a navy surface clearly lighter than the near-black
                 page so it reads as a panel, with a faint light hairline edge. */
              --card-bg: var(--navy-scale-800);
              --card-border: rgba(255, 255, 255, .08);
              --card-hover-bg: var(--navy-scale-700);

              /* Tier — dark: a navy surface lighter than the .card it sits in
                 (800 → 700), with a visibly lighter navy edge so each box is
                 clearly separated even where fills read as similar (Edge). */
              --tier-bg: var(--navy-scale-700);
              --tier-border: var(--navy-scale-600);

              /* Price amount flips to white so the big number stays legible. */
              --price-amount: var(--gray-scale-0);
              --price-text: var(--gray-scale-100);

              /* FAQ — light question ink; a subtle navy divider on the dark page. */
              --faq-summary: var(--gray-scale-0);
              --faq-border: var(--primary);

              /* Body copy (.text + .acc-body) → muted light ink on the dark bg. */
              --text-color: var(--ink-muted);

              --footer-background-color: var(--surface);

              /* .input__verbose fields — dark theme is nothing but a reassignment of
                 these tokens; the rules are shared with light. Field reads as a raised
                 panel with light ink; focus switches the accent to --primary. The
                 invalid border is lightened off --danger (deep red-600 muddies against
                 the dark panel) and its ring keeps that red at a higher alpha so the
                 error halo stays visible (light was .16). */
              --input-verbose-bg: var(--raised);
              --input-verbose-border: 1px solid var(--gray-scale-600);
              --input-verbose-border-focused: 1px solid var(--primary);
              --input-verbose-border-invalid: 1px solid color-mix(in srgb, var(--danger), white 25%);
              --input-verbose-box-shadow-focused: 0 0 0 3px rgba(125, 166, 224, .30);
              --input-verbose-box-shadow-invalid: 0 0 0 3px rgba(220, 38, 38, .35);
              --input-verbose-color: var(--gray-scale-0);
              --input-verbose-label-color: var(--gray-scale-100);

              /* .checkbox__singular-selection pills — dark theme is nothing but a
                 reassignment of these tokens; the rules themselves are shared with
                 light. Unselected = raised navy chip; selected = light --primary
                 fill with dark ink, flipping to white ink on hover (like the dark
                 .btn--primary). */
              --select-pill-bg: var(--surface);
              --select-pill-text: var(--gray-scale-0);
              --select-pill-border: var(--primary-darker-100);
              --select-pill-hover-bg: var(--raised);
              --select-pill-hover-border: var(--primary);
              --select-pill-checked-bg: var(--primary);
              --select-pill-checked-text: var(--navy-scale-800);
              --select-pill-checked-border: var(--primary-lighter-100);
              --select-pill-checked-hover-bg: var(--primary-lighter-100);
              --select-pill-checked-hover-border: var(--primary-lighter-200);
              --select-pill-checked-hover-text: var(--gray-scale-0);

              /* #privacy consent checkbox — checked box flips to the light --primary
                 fill with a dark checkmark, mirroring the dark pill/.btn--primary. */
              --checkbox-checked-bg: var(--primary);
              --checkbox-checked-border: var(--primary-lighter-100);
              --checkbox-mark: var(--navy-scale-800);
              --checkbox-hover-border: var(--primary);
              --checkbox-link: var(--primary);
       }

       body {
              background-color: var(--background);
       }

       .display {
              color: var(--gray-scale-0);
       }

       .h2 {
              color: var(--gray-scale-0);
       }

       .h4 {
              color: var(--gray-scale-0);
       }

       /* .text color now comes from the --text-color token (muted in dark). */

       .tag {
              color: var(--gray-scale-0);
       }

       .btn--primary {
              height: var(--btn-height);
              border-radius: var(--btn-radius);
              border: 1px solid var(--primary-lighter-100);
              background-color: var(--primary);
              color: var(--navy-scale-800);
              transition: var(--btn-lift);
       }

       .btn--primary:hover {
              background: var(--primary-lighter-100);
              color: var(--gray-scale-0);
              border-color: var(--primary-lighter-200);
              box-shadow: var(--shadow-md);
              transform: translateY(var(--btn-lift-distance));
       }

       .btn--primary:active {
              background: var(--primary-lighter-200);
              color: var(--gray-scale-0);
              border-color: var(--primary-lighter-300);
              transform: translateY(var(--btn-press-distance));
       }

       /* Dark mode only overrides COLORS — layout/structure is inherited from the
          base .btn--secondary. Re-declaring `display` here is what overrode
          .burger's display:none (equal specificity, but later in source) and leaked
          the burger onto desktop in dark mode. */
       .btn--secondary {
              border-color: var(--primary-darker-100);
              background-color: var(--surface);
              color: var(--gray-scale-0);
       }

       .btn--secondary:hover {
              background: var(--raised);
              color: var(--gray-scale-0);
              border-color: var(--primary);
              box-shadow: var(--shadow-md);
              transform: translateY(var(--btn-lift-distance));
       }

       .btn--secondary:active {
              background: var(--raised);
              color: var(--gray-scale-0);
              border-color: var(--primary-lighter-100);
              transform: translateY(var(--btn-press-distance));
       }

       .btn--tertiary {
              height: var(--btn-height);
              border-radius: var(--btn-radius);
              border: 1px solid var(--teal-scale-600);
              background-color: var(--teal-scale-500);
              color: var(--navy-scale-800);
              transition: var(--btn-lift);
       }

       .btn--tertiary:hover {
              background: var(--teal-scale-300);
              color: var(--gray-scale-0);
              border-color: var(--teal-scale-300);
              box-shadow: var(--shadow-md);
              transform: translateY(var(--btn-lift-distance));
       }

       .btn--tertiary:active {
              background: var(--teal-scale-300);
              color: var(--gray-scale-0);
              border-color: var(--teal-scale-300);
              transform: translateY(var(--btn-press-distance));
       }

       .btn--ghost {
              height: var(--btn-height);
              border-radius: var(--btn-radius);
              border: 1px solid attr(data-background-color, var(--background));
              background-color: attr(data-background-color, var(--background));
              color: var(--gray-scale-0);
              transition: var(--btn-lift);
       }

       .btn--ghost:hover {
              background: attr(data-background-color, var(--background));
              color: var(--gray-scale-0);
              border-color: attr(data-background-color, var(--background));
              box-shadow: var(--shadow-md);
              transform: translateY(var(--btn-lift-distance));
       }

       .btn--ghost:active {
              background: attr(data-background-color, var(--background));
              color: var(--gray-scale-0);
              border-color: attr(data-background-color, var(--background));
              box-shadow: var(--shadow-md);
              transform: translateY(var(--btn-press-distance));
       }

       .logo img,
       .logo--dark img {
              display: block;
              /* 60% of the header height — tracks --header-height (100px → 60px). */
              height: calc(var(--header-height) * 0.6);
              width: auto;
              transform: scale(1);
              transform-origin: center;
              border-radius: var(--radius-md);
       }

       /* Three plain block spans — no box-shadow, compositor-safe */
       .burger span {
              background: var(--gray-scale-0);
              border-radius: var(--radius-md);
       }

       .burger:hover span,
       .burger:active span {
              background: var(--gray-scale-0);
       }

       @media (max-width: 1040px) {
              .sticky-header__nav li a {
                     border: 1px solid var(--primary-darker-100);
                     background-color: var(--background);
                     color: var(--gray-scale-0);
              }
       }

       .hero__note svg {
              color: var(--gray-scale-0);
       }

       .badge strong {
              color: var(--gray-scale-0);
       }
}