/* ==========================================================
   MAIN STYLESHEET  (fly fishing website)

   PURPOSE:
   1. The complete design of the main website (variant "bold"):
      colours, font, glass cards, navigation, footer, particles.
   2. The building blocks of this website on top
      (courses, image cards, topic lists).

   The build combines everything into /dist-flyfishing/styles/main.css
========================================================== */

/* --- from styles/../../bold/styles/main.css --- */
/* ==========================================================
   MAIN STYLESHEET  (design variant "bold")

   PURPOSE:
   1. Loads the normal website CSS (so project, news and package
      pages that this variant shares keep working).
   2. Loads the bold layer on top: new tokens, glass look,
      navigation, footer and the new page sections.

   The build combines everything into /dist-bold/styles/main.css

   EDIT WITH CARE: the order matters (later files win).
========================================================== */

/* NORMAL WEBSITE CSS (shared building blocks) */
/* --- from styles/../../../styles/base/variables.css --- */
/* ==========================================================
   DESIGN TOKENS  (the single source of truth for the look)

   PURPOSE:
   Every colour, font, size, spacing value and animation timing
   used on the website is defined here. Other CSS files only
   REFERENCE these variables, e.g. `color: var(--color-text);`.

   Change a value here and it changes everywhere.

   SOURCE:
   Values are taken from the Lukas Ude Corporate Identity Sheet
   (/source-assets/lukas-ude-corporate-identity-sheet.pdf).
   Colour ratio from the CI:
   55% black / 30% ivory / 10% natural tones / 5% brass.
   -> Brass is an ACCENT. Use it sparingly.
========================================================== */

:root {

    /* ------------------------------------------------------
       1. BRAND COLOURS  (exact CI values)
       SAFE TO EDIT: change the hex codes to adjust the palette.
    ------------------------------------------------------ */
    --color-obsidian: #090A09;       /* main dark background */
    --color-ivory: #EEEAE0;          /* main light background / light text */
    --color-british-green: #18251D;  /* deep natural green */
    --color-forest: #2D3B30;         /* lighter forest green */
    --color-tobacco: #71543C;        /* warm brown detail colour */
    --color-brass: #9A815C;          /* restrained accent (use rarely!) */
    --color-taupe: #6E6253;          /* top bar, warm neutral */
    --color-sand: #E2DACB;           /* warm light band (feature row, cards) */

    /* ------------------------------------------------------
       2. DERIVED COLOURS  (shades built from the brand colours)
       EDIT WITH CARE: these keep text readable (contrast).
    ------------------------------------------------------ */
    --color-obsidian-raised: #111311;   /* cards on dark backgrounds */
    --color-obsidian-line: #1E211E;     /* dividers on dark */
    --color-ivory-deep: #E2DDD0;        /* cards on light backgrounds */
    --color-ivory-line: #CFC8B8;        /* dividers on light */
    --color-brass-dark: #75603F;        /* brass for TEXT on ivory (readable) */
    --color-ink-muted: #4A463F;         /* secondary text on ivory */
    --color-ivory-muted: #B4AFA4;       /* secondary text on dark */
    --color-success: #5E7A5F;           /* positive form states */
    --color-error: #B5654A;             /* error form states */

    /* ------------------------------------------------------
       3. SEMANTIC COLOURS  (what the colours are USED for)
       Sections switch between dark and light by changing
       these variables (see .theme-dark / .theme-light below).
    ------------------------------------------------------ */
    --color-background: var(--color-obsidian);
    --color-surface: var(--color-obsidian-raised);
    --color-text: var(--color-ivory);
    --color-text-muted: var(--color-ivory-muted);
    --color-line: var(--color-obsidian-line);
    --color-accent: var(--color-brass);
    --color-green: var(--color-british-green);

    /* ------------------------------------------------------
       4. TYPOGRAPHY
       --font-display: editorial serif for big statements
       --font-body:    precise sans-serif for UI and text
       SAFE TO EDIT: font names (the files are loaded in
       /frontend/styles/base/typography.css).
    ------------------------------------------------------ */
    --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* Font sizes scale smoothly between mobile and desktop
       using clamp(minimum, preferred, maximum). */
    --text-xs: 0.75rem;                                   /* 12px – labels */
    --text-sm: 0.875rem;                                  /* 14px – meta text */
    --text-base: 1rem;                                    /* 16px – body text */
    --text-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* lead text */
    --text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --text-xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
    --text-2xl: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
    --text-3xl: clamp(2.4rem, 1.5rem + 3.8vw, 5rem);
    --text-display: clamp(3.1rem, 1.6rem + 6.4vw, 8.25rem); /* hero headline */

    --line-height-tight: 1.02;
    --line-height-heading: 1.12;
    --line-height-body: 1.65;

    --letter-spacing-label: 0.22em;   /* small uppercase labels */
    --letter-spacing-wide: 0.08em;

    /* ------------------------------------------------------
       5. SPACING
       One spacing scale for margins, paddings and gaps.
    ------------------------------------------------------ */
    --spacing-3xs: 0.25rem;   /* 4px  */
    --spacing-2xs: 0.5rem;    /* 8px  */
    --spacing-xs: 0.75rem;    /* 12px */
    --spacing-small: 1rem;    /* 16px */
    --spacing-medium: 1.5rem; /* 24px */
    --spacing-large: 2.5rem;  /* 40px */
    --spacing-xl: clamp(3rem, 2rem + 4vw, 5rem);
    --spacing-2xl: clamp(4.5rem, 3rem + 6vw, 8.5rem);
    --spacing-section: clamp(5rem, 3.5rem + 7vw, 10rem); /* space between big sections */

    /* ------------------------------------------------------
       6. LAYOUT
       EDIT WITH CARE: affects the width of all content.
    ------------------------------------------------------ */
    --content-width: 1360px;      /* maximum width of page content */
    --content-width-text: 44rem;  /* comfortable reading width */
    --page-gutter: clamp(1.25rem, 0.6rem + 3vw, 3.5rem); /* left/right page padding */
    --topbar-height: 2.1rem;      /* thin bar above the menu (hidden on phones) */
    --header-bar-height: 4.6rem;  /* the menu bar itself */
    --header-height: var(--header-bar-height); /* total, grows on tablets (below) */

    /* ------------------------------------------------------
       7. SHAPES
       The CI is calm and precise -> small radii only.
    ------------------------------------------------------ */
    --border-radius: 2px;
    --border-radius-large: 6px;
    --border-radius-device: 28px;  /* phone frame in funnel previews */
    --border-width: 1px;

    /* ------------------------------------------------------
       8. MOTION
       Slow, controlled, cinematic. No bounce.
       SAFE TO EDIT: durations.
    ------------------------------------------------------ */
    --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 220ms;
    --duration-medium: 600ms;
    --duration-slow: 1100ms;
    --duration-reveal: 1400ms;
    --reveal-distance: 28px;

    /* ------------------------------------------------------
       9. LAYERS (z-index)
    ------------------------------------------------------ */
    --layer-base: 1;
    --layer-header: 50;
    --layer-menu: 60;
    --layer-lightbox: 80;
    --layer-skip-link: 100;
}

/* Tablets and larger: the thin top bar is shown above the menu */
@media (min-width: 760px) {
    :root {
        --header-height: calc(var(--topbar-height) + var(--header-bar-height));
    }
}


/* ==========================================================
   SECTION THEMES
   Add class="theme-dark", "theme-light" or "theme-green"
   to a <section> to switch its colours.
   This creates the dark / light rhythm of the website.
========================================================== */

.theme-dark {
    --color-background: var(--color-obsidian);
    --color-surface: var(--color-obsidian-raised);
    --color-text: var(--color-ivory);
    --color-text-muted: var(--color-ivory-muted);
    --color-line: var(--color-obsidian-line);
    --color-accent: var(--color-brass);
}

.theme-light {
    --color-background: var(--color-ivory);
    --color-surface: var(--color-ivory-deep);
    --color-text: var(--color-obsidian);
    --color-text-muted: var(--color-ink-muted);
    --color-line: var(--color-ivory-line);
    --color-accent: var(--color-brass-dark);
}

.theme-sand {
    --color-background: var(--color-sand);
    --color-surface: var(--color-ivory);
    --color-text: var(--color-obsidian);
    --color-text-muted: var(--color-ink-muted);
    --color-line: var(--color-ivory-line);
    --color-accent: var(--color-brass-dark);
}

.theme-green {
    --color-background: var(--color-british-green);
    --color-surface: var(--color-forest);
    --color-text: var(--color-ivory);
    --color-text-muted: #B9BCAF;
    --color-line: #2A3A2F;
    --color-accent: #B39A72;
}

.theme-dark,
.theme-light,
.theme-sand,
.theme-green {
    background-color: var(--color-background);
    color: var(--color-text);
}

/* ==========================================================
   END DESIGN TOKENS
========================================================== */

/* --- from styles/../../../styles/base/reset.css --- */
/* ==========================================================
   RESET
   Removes inconsistent browser default styles so the site
   looks the same in every browser.
   DO NOT EDIT WITHOUT TESTING: affects every element.
========================================================== */

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

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
    min-height: 100vh;
    background-color: var(--color-obsidian);
    color: var(--color-ivory);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--line-height-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img,
picture,
video,
svg,
iframe {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

/* :where() keeps this rule weak, so component styles can add padding */
:where(ul, ol)[role="list"] {
    list-style: none;
    padding: 0;
}

p,
h1,
h2,
h3,
h4 {
    overflow-wrap: break-word;
}

/* Visible keyboard focus for accessibility (never remove). */
:focus-visible {
    outline: 1px solid var(--color-accent);
    outline-offset: 4px;
}

::selection {
    background-color: var(--color-brass);
    color: var(--color-obsidian);
}

[hidden] {
    display: none !important;
}

/* ==========================================================
   END RESET
========================================================== */

/* --- from styles/../../../styles/base/typography.css --- */
/* ==========================================================
   TYPOGRAPHY
   Loads the brand fonts (self-hosted, no Google requests)
   and defines headline, text and label styles.

   Fonts (from the CI):
   - Display: Cormorant Garamond  -> big editorial statements
   - UI/Text: Manrope             -> navigation, text, labels

   Font files live in /frontend/assets/fonts/
========================================================== */


/* FONT FILES
   EDIT WITH CARE: if you replace a font, update the file
   name here and the font name in variables.css. */

@font-face {
    font-family: "Cormorant Garamond";
    src: url("/assets/fonts/cormorant-garamond-variable-latin.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("/assets/fonts/cormorant-garamond-variable-latin-italic.woff2") format("woff2");
    font-weight: 300 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("/assets/fonts/manrope-variable-latin.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}


/* HEADINGS
   Big headlines: bold, uppercase sans-serif (modern, confident).
   The serif display font is used for the large wordmark and for
   the italic accent lines (.heading-accent), which keeps the
   editorial character of the CI. */

h1,
h2,
h3,
.heading-display,
.heading-1,
.heading-2,
.heading-3 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: var(--line-height-heading);
    letter-spacing: -0.01em;
}

.heading-display {
    font-size: var(--text-display);
    font-weight: 300;
    line-height: var(--line-height-tight);
    letter-spacing: -0.02em;
}

.heading-1,
.heading-2 {
    overflow-wrap: break-word;   /* very long German words never overflow */
    hyphens: auto;
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.heading-1 {
    font-size: var(--text-3xl);
    line-height: 0.98;
}

.heading-2 {
    font-size: var(--text-2xl);
    line-height: 1;
}

.heading-3 {
    font-size: var(--text-xl);
}

/* Italic accent line, e.g. "Built for growth." (as in the CI sheet) */
.heading-accent {
    font-style: italic;
    color: var(--color-accent);
}

/* Inside the bold sans headlines the accent switches to the serif:
   normal case, light and slightly larger, for an editorial contrast. */
.heading-1 .heading-accent,
.heading-2 .heading-accent {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.08em;
    text-transform: none;
    letter-spacing: -0.01em;
}


/* EYEBROW - small uppercase label above headlines,
   e.g. "MARKETING  KI  SYSTEME".
   Several <span> parts inside one eyebrow are separated by the
   gap below (no dashes or dots needed). */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.9em;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Extra space between several parts, e.g. "AUTOMOTIVE   KONZEPTARBEIT" */
.eyebrow > span + span {
    margin-left: 0.6em;
}

/* Wider spacing between the parts, e.g. the hero descriptor */
.eyebrow--spaced {
    flex-wrap: wrap;
    gap: 0.5em clamp(1em, 2.5vw, 1.75em);
}

.eyebrow--spaced > span + span {
    margin-left: 0;
}

/* Year next to a label, e.g. on design cards */
.meta-year {
    margin-left: 1.25em;
    opacity: 0.75;
}


/* BODY TEXT */

.text-lead {
    font-size: var(--text-md);
    line-height: 1.7;
    color: var(--color-text-muted);
    max-width: var(--content-width-text);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-small {
    font-size: var(--text-sm);
}

.label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
}

/* Long-form text (case studies, legal pages) */
.prose {
    max-width: var(--content-width-text);
}

.prose > * + * {
    margin-top: 1.1em;
}

.prose h2 {
    font-size: var(--text-xl);
    margin-top: 2em;
}

.prose h3 {
    font-size: var(--text-lg);
    margin-top: 1.6em;
}

.prose ul {
    padding-left: 1.2em;
}

.prose a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--color-accent);
}

/* IMAGE CAPTION  (short line below content images, not below
   background images). Use: <figcaption class="figure-caption"> */
.figure-caption {
    margin-top: 0.75rem;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* ==========================================================
   END TYPOGRAPHY
========================================================== */

/* --- from styles/../../../styles/base/layout.css --- */
/* ==========================================================
   LAYOUT HELPERS
   Containers, section spacing and simple grids that are
   reused on every page.
========================================================== */


/* CONTAINER - centres content and adds page padding */

.container {
    width: 100%;
    max-width: calc(var(--content-width) + 2 * var(--page-gutter));
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

.container--narrow {
    max-width: calc(56rem + 2 * var(--page-gutter));
}


/* SECTION - vertical rhythm between big page sections */

.section {
    position: relative;
    padding-block: var(--spacing-section);
}

.section--compact {
    padding-block: var(--spacing-2xl);
}

.section--flush-top {
    padding-top: 0;
}


/* SECTION HEADER - eyebrow + heading + optional text */

.section-header {
    display: grid;
    gap: var(--spacing-medium);
    margin-bottom: var(--spacing-xl);
    max-width: 52rem;
}

.section-header--split {
    max-width: none;
    grid-template-columns: 1fr;
    align-items: end;
}

@media (min-width: 900px) {
    .section-header--split {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: var(--spacing-xl);
    }
}


/* DIVIDER LINE */

.rule {
    height: 1px;
    border: 0;
    background-color: var(--color-line);
}


/* ACCESSIBILITY HELPERS */

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: var(--layer-skip-link);
    padding: 0.75rem 1.25rem;
    background-color: var(--color-ivory);
    color: var(--color-obsidian);
    font-weight: 600;
    transform: translateY(-200%);
    transition: transform var(--duration-fast) var(--ease-standard);
}

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

/* ==========================================================
   END LAYOUT HELPERS
========================================================== */

/* --- from styles/../../../styles/base/motion.css --- */
/* ==========================================================
   MOTION
   Scroll-triggered reveals used across the whole site.

   HOW IT WORKS:
   1. Add  data-reveal  to any element in the HTML.
   2. /frontend/scripts/modules/reveal.js adds the class
      "is-revealed" when the element scrolls into view.
   3. The CSS below animates the change.

   Variants (value of data-reveal):
   - data-reveal          fade + move up (default)
   - data-reveal="fade"   fade only
   - data-reveal="mask"   image wipes in from bottom (image masks)
   - data-reveal="line"   horizontal line draws from left

   Optional delay:  data-reveal-delay="1" ... "5"

   Without JavaScript nothing is hidden (the .js class is set
   by a script, so content stays visible if JS fails).
========================================================== */


/* REVEAL - DEFAULT (fade + translate) */

.js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance), 0);
    transition:
        opacity var(--duration-reveal) var(--ease-cinematic),
        transform var(--duration-reveal) var(--ease-cinematic);
}

.js [data-reveal="fade"] {
    transform: none;
}

/* REVEAL - IMAGE MASK (slow wipe upwards)
   EDIT WITH CARE: the clip is applied to the CHILD (picture/img),
   because browsers do not report fully clipped elements as visible. */

.js [data-reveal="mask"] {
    opacity: 1;
    transform: none;
}

.js [data-reveal="mask"] > * {
    clip-path: inset(100% 0 0 0);
    transition: clip-path var(--duration-reveal) var(--ease-cinematic);
}

.js [data-reveal="mask"] img {
    transform: scale(1.08);
    transition: transform calc(var(--duration-reveal) * 1.4) var(--ease-cinematic);
}

/* REVEAL - LINE DRAW */

.js [data-reveal="line"] {
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left center;
}

/* REVEALED STATE (added by reveal.js) */

.js [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

.js [data-reveal="mask"].is-revealed > * {
    clip-path: inset(0 0 0 0);
}

.js [data-reveal="mask"].is-revealed img {
    transform: scale(1);
}

/* STAGGER DELAYS */

[data-reveal-delay="1"],
[data-reveal-delay="1"][data-reveal="mask"] > * { transition-delay: 120ms !important; }
[data-reveal-delay="2"],
[data-reveal-delay="2"][data-reveal="mask"] > * { transition-delay: 240ms !important; }
[data-reveal-delay="3"],
[data-reveal-delay="3"][data-reveal="mask"] > * { transition-delay: 360ms !important; }
[data-reveal-delay="4"],
[data-reveal-delay="4"][data-reveal="mask"] > * { transition-delay: 480ms !important; }
[data-reveal-delay="5"],
[data-reveal-delay="5"][data-reveal="mask"] > * { transition-delay: 600ms !important; }


/* REDUCED MOTION
   Visitors who ask their system for less motion get no
   animations at all - everything is simply visible. */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .js [data-reveal],
    .js [data-reveal="mask"] > *,
    .js [data-reveal] img {
        opacity: 1;
        transform: none !important;
        clip-path: none !important;
    }
}

/* ==========================================================
   END MOTION
========================================================== */

/* --- from styles/../../../styles/components/buttons.css --- */
/* ==========================================================
   BUTTONS & LINKS
   .button--primary  filled button (main action)
   .button--ghost    outlined button (secondary action)
   .text-link        small uppercase link with arrow
   .link-underline   text link with animated underline
   .badge            small label, e.g. "Live demo", "Concept"
========================================================== */


/* BUTTON - BASE */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    min-height: 3.25rem;
    padding: 0.95rem 1.7rem;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
    transition:
        background-color var(--duration-medium) var(--ease-cinematic),
        border-color var(--duration-medium) var(--ease-cinematic),
        color var(--duration-medium) var(--ease-cinematic);
}

.button__arrow {
    display: inline-block;
    transition: transform var(--duration-medium) var(--ease-cinematic);
}

.button:hover .button__arrow,
.button:focus-visible .button__arrow {
    transform: translateX(4px);
}


/* BUTTON - PRIMARY (ivory on dark sections, obsidian on light sections) */

.button--primary {
    background-color: var(--color-text);
    color: var(--color-background);
}

.button--primary:hover,
.button--primary:focus-visible {
    background-color: var(--color-accent);
    color: var(--color-obsidian);
}

.theme-light .button--primary:hover,
.theme-light .button--primary:focus-visible {
    color: var(--color-ivory);
}


/* BUTTON - GHOST (outline) */

.button--ghost {
    border-color: color-mix(in srgb, var(--color-text) 35%, transparent);
    color: var(--color-text);
}

.button--ghost:hover,
.button--ghost:focus-visible {
    border-color: var(--color-text);
}

.button[disabled],
.button[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-small);
}


/* TEXT LINK (uppercase, with arrow) */

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.4rem;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    transition: border-color var(--duration-medium) var(--ease-cinematic);
}

.text-link:hover,
.text-link:focus-visible {
    border-color: currentColor;
}


/* LINK WITH ANIMATED UNDERLINE */

.link-underline {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--duration-medium) var(--ease-cinematic);
}

.link-underline:hover,
.link-underline:focus-visible {
    background-size: 100% 1px;
}


/* BADGE */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* ==========================================================
   END BUTTONS & LINKS
========================================================== */

/* --- from styles/../../../styles/components/cards.css --- */
/* ==========================================================
   WORK CARDS
   Project cards used in FEATURED WORK (home) and on /work/.
   HTML is generated by /frontend/build/renderers/work.js
========================================================== */


/* WORK CARD - CONTAINER */

.work-card__link {
    display: block;
    color: inherit;
}


/* WORK CARD - IMAGE */

.work-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--color-surface);
    border-radius: var(--border-radius);
}

.work-card--large .work-card__media {
    aspect-ratio: 16 / 11;
}

.work-card__media picture,
.work-card__media img {
    width: 100%;
    height: 100%;
}

.work-card__media img {
    object-fit: cover;
    transition: transform 1600ms var(--ease-cinematic), filter var(--duration-slow) var(--ease-standard);
    filter: saturate(0.92);
}

.work-card__link:hover .work-card__media img,
.work-card__link:focus-visible .work-card__media img {
    transform: scale(1.035);
    filter: saturate(1);
}

/* Subtle cinematic vignette over every card image */
.work-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(9, 10, 9, 0.35));
    pointer-events: none;
}


/* WORK CARD - NODE DIAGRAM (projects without image, e.g. AI workflows) */

.work-card__diagram {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12% 9%;
    background:
        linear-gradient(var(--color-line), var(--color-line)) center / 82% 1px no-repeat,
        var(--color-british-green);
    color: var(--color-ivory);
}

.work-card__node {
    position: relative;
    display: grid;
    place-items: center;
    width: 3.1rem;
    height: 3.1rem;
    border: 1px solid rgba(238, 234, 224, 0.45);
    border-radius: 50%;
    background-color: var(--color-british-green);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.work-card__node small {
    position: absolute;
    top: calc(100% + 0.75rem);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-ivory-muted);
    white-space: nowrap;
}


/* WORK CARD - TEXT */

.work-card__body {
    display: grid;
    gap: 0.55rem;
    padding-top: 1.35rem;
}

.work-card__meta {
    color: var(--color-text-muted);
}

.work-card__title {
    font-size: var(--text-xl);
    font-weight: 400;
    line-height: 1.12;
}

.work-card__text {
    color: var(--color-text-muted);
    max-width: 38rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.work-card__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.work-card__more {
    margin-left: auto;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--duration-medium) var(--ease-cinematic), transform var(--duration-medium) var(--ease-cinematic);
}

.work-card__link:hover .work-card__more,
.work-card__link:focus-visible .work-card__more {
    opacity: 1;
    transform: none;
}

@media (hover: none) {
    .work-card__more {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================
   END WORK CARDS
========================================================== */

/* --- from styles/../../../styles/components/content-blocks.css --- */
/* ==========================================================
   CONTENT BLOCKS
   Small reusable text elements used on many pages:
   bullet lists, fact lists, project facts, notices,
   breadcrumbs and textures.
========================================================== */


/* BULLET LIST - short line instead of a dot */

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

.bullet-list li {
    position: relative;
}


/* FACT LIST - label + value pairs */

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

.fact-list > div {
    display: grid;
    gap: 0.25rem;
}

.fact-list dt {
    color: var(--color-text-muted);
}


/* PROJECT FACTS - row of key facts under project headlines */

.project-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--spacing-medium);
    padding-block: var(--spacing-medium);
    border-block: 1px solid var(--color-line);
}

.project-facts > div {
    display: grid;
    gap: 0.35rem;
    align-content: start;
}

.project-facts dt {
    color: var(--color-text-muted);
}


/* NOTICE - e.g. "This is a portfolio demonstration" */

.notice {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.85rem;
    padding: 1rem 1.25rem;
    border-left: 2px solid var(--color-accent);
    background-color: var(--color-surface);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.notice .label {
    color: var(--color-accent);
}


/* BREADCRUMBS */

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: var(--text-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.breadcrumbs li + li::before {
    content: "/";
    margin-right: 0.5rem;
    opacity: 0.5;
}

.breadcrumbs a:hover {
    color: var(--color-text);
}


/* TEXTURES - subtle film grain + topographic lines (nature × precision) */

.texture-grain::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/assets/images/textures/grain.svg");
    background-size: 240px 240px;
    opacity: 0.07;
    pointer-events: none;
    mix-blend-mode: overlay;
}

.texture-contours {
    position: absolute;
    inset: 0;
    background-image: url("/assets/images/textures/contours.svg");
    background-size: cover;
    background-position: center;
    opacity: 0.5;
    pointer-events: none;
}

/* ==========================================================
   END CONTENT BLOCKS
========================================================== */

/* --- from styles/../../../styles/components/filters.css --- */
/* ==========================================================
   FILTERS & VIEW SWITCH
   .filter-bar   category buttons (Work, Creatives, Design)
   .view-switch  CREATIVE / COPY / COMBINED (Creatives page)
   SCRIPTS: /frontend/scripts/modules/filters.js
            /frontend/scripts/modules/creative-views.js
========================================================== */


/* FILTER BAR */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filter-bar__button,
.view-switch__button {
    min-height: 44px;              /* touch-friendly */
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    transition:
        border-color var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard);
}

.filter-bar__button:hover,
.view-switch__button:hover {
    color: var(--color-text);
    border-color: color-mix(in srgb, var(--color-text) 40%, transparent);
}

.filter-bar__button[aria-pressed="true"] {
    color: var(--color-background);
    background-color: var(--color-text);
    border-color: var(--color-text);
}


/* VIEW SWITCH (segmented control) */

.view-switch {
    display: inline-flex;
    padding: 4px;
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius);
}

.view-switch__button {
    border-color: transparent;
}

.view-switch__button[aria-pressed="true"] {
    color: var(--color-text);
    border-color: var(--color-accent);
}


/* FILTERED-OUT ITEMS */

[data-filter-item].is-filtered-out {
    display: none;
}

[data-filter-item].is-filter-entering {
    animation: filter-enter var(--duration-slow) var(--ease-cinematic);
}

@keyframes filter-enter {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

.filter-empty {
    padding-block: var(--spacing-xl);
}

/* ==========================================================
   END FILTERS & VIEW SWITCH
========================================================== */

/* --- from styles/../../../styles/components/forms.css --- */
/* ==========================================================
   FORMS
   Contact form fields, error and success states.
   HTML:   /frontend/components/contact-form.html
   SCRIPT: /frontend/scripts/modules/contact-form.js
========================================================== */


/* CONTACT FORM - LAYOUT */

.contact-form {
    display: grid;
    gap: var(--spacing-medium);
}

.contact-form__grid {
    display: grid;
    gap: var(--spacing-medium);
}

@media (min-width: 720px) {
    .contact-form__grid {
        grid-template-columns: 1fr 1fr;
    }
}


/* FORM FIELD - LABEL + INPUT */

.form-field {
    display: grid;
    gap: 0.5rem;
}

.form-field__label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.form-field__optional {
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--color-text-muted);
}

.form-field__input {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: 1rem;                 /* 16px prevents zoom on iOS */
    transition: border-color var(--duration-fast) var(--ease-standard);
}

.form-field__input:hover {
    border-color: color-mix(in srgb, var(--color-text) 30%, transparent);
}

.form-field__input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.form-field__input:focus-visible {
    outline: 1px solid var(--color-accent);
    outline-offset: 2px;
}

.form-field__textarea {
    min-height: 10rem;
    resize: vertical;
}

.form-field__select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1.3rem) 55%, calc(100% - 0.95rem) 55%;
    background-size: 0.35rem 0.35rem;
    background-repeat: no-repeat;
    padding-right: 2.5rem;
}

.form-field__hint {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}


/* FORM FIELD - ERROR STATE (set by contact-form.js) */

.form-field__error {
    min-height: 0;
    font-size: var(--text-sm);
    color: var(--color-error);
}

.form-field__error:empty {
    display: none;
}

.form-field__input[aria-invalid="true"] {
    border-color: var(--color-error);
}


/* FORM FIELD - CHECKBOX (privacy consent) */

.form-field--checkbox {
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: 0.85rem;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.form-field--checkbox .form-field__error {
    grid-column: 1 / -1;
}

.form-field--checkbox a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.form-field__checkbox {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    accent-color: var(--color-brass);
}


/* SPAM PROTECTION - HONEYPOT (hidden from people, DO NOT REMOVE) */

.contact-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* FORM FOOTER + STATUS MESSAGES */

.contact-form__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-medium);
}

.contact-form__status:empty {
    display: none;
}

.contact-form__status {
    padding: 1.1rem 1.25rem;
    border-left: 2px solid var(--color-line);
    background-color: var(--color-surface);
}

.contact-form__status.is-success {
    border-left-color: var(--color-success);
}

.contact-form__status.is-error {
    border-left-color: var(--color-error);
}

.contact-form__status strong {
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 500;
}

.contact-form__noscript {
    padding: 1rem;
    border: 1px solid var(--color-line);
}

/* ==========================================================
   END FORMS
========================================================== */

/* --- from styles/../../../styles/components/ad-mockup.css --- */
/* ==========================================================
   AD MOCKUP
   Social-ad style frame for creatives: brand, "Sponsored",
   primary text, creative, headline, CTA.

   It shows the STRUCTURE of a social ad in the website's own
   style – it does not copy any platform's interface and is
   labelled "Portfolio mockup – not a live ad".

   HTML: /frontend/build/renderers/creatives.js -> adMockup()
========================================================== */


/* AD MOCKUP - FRAME */

.ad-mockup {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 30rem;
    border: 1px solid rgba(9, 10, 9, 0.08);
    border-radius: var(--border-radius-large);
    background-color: #FBFAF6;
    color: #16130F;
    font-size: 0.875rem;
    line-height: 1.45;
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55);
}


/* AD MOCKUP - HEADER (brand + sponsored) */

.ad-mockup__header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 0.95rem 0.6rem;
}

.ad-mockup__avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background-color: var(--color-british-green);
    color: var(--color-ivory);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.ad-mockup__identity {
    flex: 1;
    min-width: 0;
}

.ad-mockup__brand {
    font-weight: 700;
    line-height: 1.2;
}

.ad-mockup__sponsored {
    font-size: 0.75rem;
    color: #6A655B;
}

.ad-mockup__dots {
    color: #6A655B;
    letter-spacing: 0.1em;
}


/* AD MOCKUP - PRIMARY TEXT */

.ad-mockup__primary-text {
    display: grid;
    gap: 0.5em;
    padding: 0 0.95rem 0.75rem;
}

/* In grids the text is shortened to 3 lines */
.ad-mockup__primary-text--clamped {
    /* margin instead of padding, so no half 4th line shows */
    padding-bottom: 0;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ad-mockup__primary-text--clamped p {
    display: inline;
}

.ad-mockup__primary-text--clamped p + p::before {
    content: " ";
}


/* AD MOCKUP - CREATIVE (image) */

.ad-mockup__creative {
    background-color: #E7E2D6;
}

.ad-mockup__creative picture,
.ad-mockup__creative img {
    width: 100%;
    height: 100%;
}

.ad-mockup__creative img {
    object-fit: cover;
}

.ad-mockup--square .ad-mockup__creative { aspect-ratio: 1 / 1; }
.ad-mockup--portrait .ad-mockup__creative { aspect-ratio: 4 / 5; }
.ad-mockup--story .ad-mockup__creative { aspect-ratio: 9 / 16; }


/* AD MOCKUP - FOOTER (headline + CTA) */

.ad-mockup__footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.95rem;
    background-color: #F1EEE6;
}

.ad-mockup__link {
    flex: 1;
    min-width: 0;
}

.ad-mockup__domain {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6A655B;
}

.ad-mockup__headline {
    font-weight: 700;
    line-height: 1.25;
}

.ad-mockup__description {
    font-size: 0.8rem;
    color: #6A655B;
}

.ad-mockup__cta {
    flex: none;
    padding: 0.55rem 0.85rem;
    border-radius: var(--border-radius);
    background-color: #E2DDD0;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}


/* AD MOCKUP - LABEL ("not a live ad") */

.ad-mockup__label {
    padding: 0.45rem 0.95rem;
    border-top: 1px solid rgba(9, 10, 9, 0.06);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6A655B;
}

/* ==========================================================
   END AD MOCKUP
========================================================== */

/* --- from styles/../../../styles/components/device-preview.css --- */
/* ==========================================================
   DEVICE PREVIEW
   Desktop browser frame + phone frame showing a LIVE funnel
   demo (iframes). Used on /funnels/ and funnel case pages.

   HTML:   /frontend/build/renderers/funnels.js -> devicePreview()
   SCRIPT: /frontend/scripts/modules/device-preview.js
           (scales the iframes to fit the frames)

   EDIT WITH CARE: the scaling depends on the frame widths.
========================================================== */


/* DEVICE PREVIEW - LAYOUT (desktop frame with phone in front) */

.device-preview {
    position: relative;
    padding-bottom: 12%;
    padding-right: 10%;
}


/* DEVICE PREVIEW - DESKTOP FRAME */

.device-preview__desktop {
    border: 1px solid rgba(238, 234, 224, 0.14);
    border-radius: var(--border-radius-large);
    background-color: #050605;
    overflow: hidden;
    box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.8);
}

.device-preview__bar {
    display: flex;
    gap: 6px;
    padding: 0.65rem 0.8rem;
    border-bottom: 1px solid rgba(238, 234, 224, 0.08);
}

.device-preview__bar span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(238, 234, 224, 0.18);
}


/* DEVICE PREVIEW - SCREEN (iframe is scaled by JS via --preview-scale) */

.device-preview__screen {
    position: relative;
    overflow: hidden;
    --preview-scale: 0.4;
}

.device-preview__desktop .device-preview__screen {
    aspect-ratio: 1440 / 900;
}

.device-preview__mobile .device-preview__screen {
    aspect-ratio: 390 / 844;
}

.device-preview__screen iframe {
    /* EDIT WITH CARE: the iframe keeps its real device size
       (width/height attributes) and is only scaled down. */
    max-width: none;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    background-color: #fff;
    transform: scale(var(--preview-scale));
    transform-origin: 0 0;
}


/* DEVICE PREVIEW - PHONE FRAME */

.device-preview__mobile {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 27%;
    min-width: 150px;
    padding: 7px;
    border: 1px solid rgba(238, 234, 224, 0.2);
    border-radius: var(--border-radius-device);
    background-color: #050605;
    box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.85);
}

.device-preview__mobile .device-preview__screen {
    border-radius: calc(var(--border-radius-device) - 7px);
}

/* ==========================================================
   END DEVICE PREVIEW
========================================================== */

/* --- from styles/../../../styles/components/timeline.css --- */
/* ==========================================================
   TIMELINE
   MY JOURNEY on the About page (CV as a vertical timeline).
   HTML:    /frontend/build/renderers/career.js -> timeline
   CONTENT: /content/career/timeline.json
========================================================== */


/* TIMELINE - LIST + VERTICAL LINE */

.timeline {
    position: relative;
    display: grid;
    gap: 0;
}

.timeline::before {
    content: "";
    position: absolute;
    top: 0.6rem;
    bottom: 0.6rem;
    left: 0.45rem;
    width: 1px;
    background-color: var(--color-line);
}


/* TIMELINE - ONE ENTRY */

.timeline__entry {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 0 0 var(--spacing-large) 2.25rem;
}

.timeline__node {
    position: absolute;
    top: 0.45rem;
    left: 0;
    width: 0.95rem;
    height: 0.95rem;
    border: 1px solid var(--color-accent);
    border-radius: 50%;
    background-color: var(--color-background);
}

.timeline__node::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background-color: var(--color-accent);
}

.timeline__date {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-style: italic;
}

.timeline__type {
    color: var(--color-text-muted);
}

.timeline__title {
    font-size: var(--text-xl);
    font-weight: 400;
}

.timeline__organisation {
    font-weight: 600;
}

.timeline__text {
    max-width: 40rem;
    color: var(--color-text-muted);
}

.timeline__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.4rem;
}


/* TIMELINE - DESKTOP (date left, content right, line in the middle) */

@media (min-width: 900px) {
    .timeline::before {
        left: calc(14rem + 1.95rem);
    }

    .timeline__entry {
        grid-template-columns: 14rem 1fr;
        gap: 4rem;
        padding-left: 0;
    }

    .timeline__period {
        text-align: right;
    }

    .timeline__node {
        left: calc(14rem + 1.5rem);
    }
}


/* PLACEHOLDER HIGHLIGHT  e.g. [ADD DATE]
   Visible on purpose so missing info is noticed before launch. */

.placeholder {
    padding: 0.05em 0.35em;
    border: 1px dashed var(--color-accent);
    border-radius: var(--border-radius);
    background: transparent;
    color: var(--color-accent);
    font-family: var(--font-body);
    font-size: 0.8em;
    font-style: normal;
    letter-spacing: 0.06em;
}

/* ==========================================================
   END TIMELINE
========================================================== */

/* --- from styles/../../../styles/components/lightbox.css --- */
/* ==========================================================
   LIGHTBOX
   Full-screen image preview (Design page + project galleries).
   SCRIPT: /frontend/scripts/modules/lightbox.js
   (the HTML is created by the script)
========================================================== */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--layer-lightbox);
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: rgba(9, 10, 9, 0.97);
    color: var(--color-ivory);
    opacity: 0;
    transition: opacity var(--duration-medium) var(--ease-standard);
}

.lightbox:not([open]) {
    display: none;
}

.lightbox.is-visible {
    opacity: 1;
}

.lightbox::backdrop {
    background: transparent;
}

.lightbox__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem var(--page-gutter);
}

.lightbox__counter {
    font-size: var(--text-xs);
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-ivory-muted);
}

.lightbox__stage {
    display: grid;
    place-items: center;
    min-height: 0;
    padding: 0 var(--page-gutter);
}

.lightbox__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: scale(0.985);
    transition: opacity var(--duration-medium) var(--ease-cinematic), transform var(--duration-slow) var(--ease-cinematic);
}

.lightbox__image.is-loaded {
    opacity: 1;
    transform: none;
}

.lightbox__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem var(--page-gutter) 1.5rem;
}

.lightbox__caption {
    max-width: 50rem;
    font-size: var(--text-sm);
    color: var(--color-ivory-muted);
}

.lightbox__controls {
    display: flex;
    gap: 0.5rem;
}

.lightbox__button {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.9rem;
    border: 1px solid rgba(238, 234, 224, 0.25);
    border-radius: var(--border-radius);
    font-size: var(--text-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: border-color var(--duration-fast) var(--ease-standard);
}

.lightbox__button:hover {
    border-color: var(--color-ivory);
}

.is-lightbox-open {
    overflow: hidden;
}

/* ==========================================================
   END LIGHTBOX
========================================================== */

/* --- from styles/../../../styles/components/cursor-label.css --- */
/* ==========================================================
   CURSOR LABEL
   A small round "View" label that follows the mouse over
   project images (desktop with mouse only, never on touch).
   SCRIPT: /frontend/scripts/modules/cursor-label.js
   Activate on an element with:  data-cursor-label="View"
========================================================== */

.cursor-label {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--layer-header);
    display: grid;
    place-items: center;
    width: 5.25rem;
    height: 5.25rem;
    margin: -2.625rem 0 0 -2.625rem;
    border-radius: 50%;
    background-color: var(--color-ivory);
    color: var(--color-obsidian);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0;
    scale: 0.6;
    transition: opacity var(--duration-medium) var(--ease-cinematic), scale var(--duration-medium) var(--ease-cinematic);
}

.cursor-label.is-active {
    opacity: 1;
    scale: 1;
}

/* ==========================================================
   END CURSOR LABEL
========================================================== */

/* --- from styles/../../../styles/components/portfolio-subnav.css --- */
/* ==========================================================
   PORTFOLIO SUB-NAVIGATION
   Links between the portfolio areas (Ausgewählte Arbeiten,
   Funnels, Creatives, Design, KI & Systeme).
   HTML: /frontend/components/portfolio-subnav.html
========================================================== */

.portfolio-subnav {
    border-block: 1px solid var(--color-line);
    background-color: var(--color-background);
}

.portfolio-subnav__list {
    display: flex;
    gap: var(--spacing-large);
    overflow-x: auto;
    scrollbar-width: none;
}

.portfolio-subnav__list::-webkit-scrollbar {
    display: none;
}

.portfolio-subnav__link {
    display: inline-block;
    padding-block: 1.15rem;
    border-bottom: 1px solid transparent;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-text-muted);
    transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.portfolio-subnav__link:hover,
.portfolio-subnav__link:focus-visible {
    color: var(--color-text);
}

.portfolio-subnav__link[aria-current="page"] {
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
}

/* Space between the sub-navigation and a section that has no top padding */
.portfolio-subnav + .section--flush-top {
    padding-top: var(--spacing-xl);
}

/* ==========================================================
   END PORTFOLIO SUB-NAVIGATION
========================================================== */

/* --- from styles/../../../styles/sections/page-hero.css --- */
/* ==========================================================
   PAGE HERO
   The opening section of every sub page (Work, Funnels,
   Creatives, Design, AI, About, Contact, project pages).
   HTML: top section of each file in /frontend/pages/
========================================================== */


/* PAGE HERO - CONTAINER */

.page-hero {
    position: relative;
    overflow: hidden;
    padding-top: calc(var(--header-height) + var(--spacing-2xl));
    padding-bottom: var(--spacing-xl);
}

.page-hero__inner {
    position: relative;
    display: grid;
    gap: var(--spacing-medium);
}

.page-hero__title {
    max-width: 16ch;
}

.page-hero__title em {
    display: block;
}

.page-hero__intro {
    max-width: 38rem;
}


/* PAGE HERO - SPLIT VARIANT (title left, text right) */

@media (min-width: 900px) {
    .page-hero--split .page-hero__inner {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        align-items: end;
        column-gap: var(--spacing-2xl);
    }

    .page-hero--split .page-hero__eyebrow {
        grid-column: 1 / -1;
    }
}


/* PAGE HERO - TOOLBAR (filters under the hero) */

.page-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-small);
    padding-block: var(--spacing-medium);
    border-block: 1px solid var(--color-line);
    margin-bottom: var(--spacing-xl);
}

/* PAGE HERO - WITH BACKGROUND IMAGE  (class "page-hero--image")
   The photo fills the hero, a dark gradient keeps the text readable.
   Change the photo in the page file (EDIT: BACKGROUND IMAGE). */

.page-hero--image {
    isolation: isolate;
    padding-bottom: var(--spacing-2xl);
}

.page-hero__media {
    position: absolute;
    inset: -6% 0;
    z-index: -2;
}

.page-hero__media picture,
.page-hero__media img {
    width: 100%;
    height: 100%;
}

.page-hero__media img {
    object-fit: cover;
    object-position: 50% 50%;
}

/* image focus: "low" shows the lower part, "road" the forest road */
.page-hero--pos-low .page-hero__media img { object-position: 50% 70%; }
.page-hero--pos-road .page-hero__media img { object-position: 50% 62%; }
.page-hero--pos-moose .page-hero__media img { object-position: 50% 55%; }

/* Moose photo on desktop: the image is shown larger and moved to the
   right, so the moose stands next to the headline instead of behind it.
   (The photo itself is not changed, only how much of it is visible.) */
@media (min-width: 900px) {
    .page-hero--pos-moose .page-hero__media img {
        position: absolute;
        top: 50%;
        left: -4%;
        width: 135%;
        max-width: none;
        height: auto;
        transform: translateY(-50%);
    }
}

.page-hero--image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(9, 10, 9, 0.85) 0%, rgba(9, 10, 9, 0.5) 45%, rgba(9, 10, 9, 0.15) 100%);
}

.page-hero--image .page-hero__intro {
    color: var(--color-ivory);
}

/* ==========================================================
   END PAGE HERO
========================================================== */

/* --- from styles/../../../styles/sections/services.css --- */
/* ==========================================================
   SERVICES SECTION
   Editorial list of disciplines with hover image (desktop).
   HTML:   /frontend/pages/index.html -> SERVICES SECTION
   SCRIPT: /frontend/scripts/modules/services-preview.js
========================================================== */


/* SERVICES - LAYOUT */

.services__layout {
    display: grid;
    gap: var(--spacing-xl);
}

.services__list {
    border-top: 1px solid var(--color-line);
}


/* SERVICES - ONE ROW */

.services__item {
    border-bottom: 1px solid var(--color-line);
}

.services__link {
    display: grid;
    grid-template-columns: 2.5rem 1fr auto;
    grid-template-areas:
        "number title arrow"
        ".      text  .";
    column-gap: var(--spacing-small);
    row-gap: 0.4rem;
    padding-block: clamp(1.4rem, 2.5vw, 2.1rem);
    transition: padding var(--duration-slow) var(--ease-cinematic);
}

.services__number {
    grid-area: number;
    padding-top: 0.7em;
    color: var(--color-accent);
}

.services__title {
    grid-area: title;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 300;
    line-height: 1.15;
    transition: transform var(--duration-slow) var(--ease-cinematic), color var(--duration-medium) var(--ease-standard);
}

.services__text {
    grid-area: text;
    max-width: 32rem;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.services__arrow {
    grid-area: arrow;
    align-self: center;
    font-size: 1.3rem;
    color: var(--color-text-muted);
    transition: transform var(--duration-slow) var(--ease-cinematic), color var(--duration-medium) var(--ease-standard);
}

.services__link:hover .services__title,
.services__link:focus-visible .services__title {
    transform: translateX(0.6rem);
}

.services__link:hover .services__arrow,
.services__link:focus-visible .services__arrow {
    transform: translateX(0.4rem);
    color: var(--color-accent);
}

/* When one row is hovered, the others step back */
.services__list:hover .services__item:not(:hover) .services__title {
    color: var(--color-text-muted);
}


/* SERVICES - HOVER PREVIEW IMAGES (desktop only) */

.services__preview {
    display: none;
}


/* SERVICES - DESKTOP */

@media (min-width: 1000px) {
    .services__layout {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        gap: var(--spacing-2xl);
        align-items: start;
    }

    .services__title {
        font-size: var(--text-2xl);
    }

    .services__number {
        padding-top: 1.2em;
    }

    .services__preview {
        position: sticky;
        top: calc(var(--header-height) + 2rem);
        display: block;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        border-radius: var(--border-radius);
        background-color: var(--color-surface);
    }

    .services__preview-image {
        position: absolute;
        inset: 0;
        opacity: 0;
        transform: scale(1.06);
        transition: opacity var(--duration-slow) var(--ease-standard), transform 1800ms var(--ease-cinematic);
    }

    .services__preview-image.is-active {
        opacity: 1;
        transform: scale(1);
    }

    .services__preview-image picture,
    .services__preview-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .services__preview::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 55%, rgba(9, 10, 9, 0.55));
    }
}

/* ==========================================================
   END SERVICES SECTION
========================================================== */

/* --- from styles/../../../styles/sections/process.css --- */
/* ==========================================================
   PROCESS SECTION
   The steps of a project with a connecting line that draws
   in on scroll. The homepage uses the "--detailed" version
   (six steps with tags, two columns on desktop).
   HTML: /frontend/pages/index.html -> PROCESS SECTION
   (the same classes are reused on /ai/ and /funnels/)
========================================================== */


/* PROCESS - STEPS */

.process__steps {
    position: relative;
    display: grid;
    gap: var(--spacing-large);
    padding-left: 2.25rem;
}

/* The connecting line (vertical on mobile, horizontal on desktop) */
.process__line {
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0.45rem;
    width: 1px;
    background-color: var(--color-accent);
    opacity: 0.6;
}

.js .process__line[data-reveal="line"] {
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 2200ms var(--ease-cinematic);
}

.js .process__line[data-reveal="line"].is-revealed {
    transform: none;
}

.process__step {
    position: relative;
    display: grid;
    gap: 0.4rem;
}

.process__node {
    position: absolute;
    top: 0.35rem;
    left: -2.25rem;
    width: 0.95rem;
    height: 0.95rem;
    border: 1px solid var(--color-accent);
    border-radius: 50%;
    background-color: var(--color-background);
}

.process__number {
    color: var(--color-accent);
}

.process__title {
    font-size: var(--text-xl);
    font-weight: 400;
}

.process__text {
    color: var(--color-text-muted);
    max-width: 22rem;
}


/* PROCESS - DESKTOP (horizontal) */

@media (min-width: 900px) {
    .process__steps {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: var(--spacing-medium);
        padding-left: 0;
        padding-top: 2.5rem;
    }

    .process__line {
        top: 0.45rem;
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 1px;
    }

    .js .process__line[data-reveal="line"] {
        transform: scaleX(0);
        transform-origin: left center;
    }

    .process__node {
        top: -2.5rem;
        left: 0;
    }
}

/* PROCESS - THREE OR FOUR STEPS (e.g. /leistungen/) */

@media (min-width: 900px) {
    .process__steps--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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


/* PROCESS - DETAILED VERSION (homepage)
   Each step has its own top line instead of one long line,
   so the steps can wrap into two rows on desktop. */

.process__steps--detailed {
    gap: var(--spacing-xl);
}

.process__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.process__steps--detailed .process__step {
    gap: 0.75rem;
}

.process__steps--detailed .process__text {
    max-width: 36rem;
}

@media (min-width: 900px) {
    .process__steps--detailed {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--spacing-xl);
        row-gap: var(--spacing-xl);
        padding-top: 0;
    }

    .process__steps--detailed .process__step {
        align-content: start;
        padding-top: 2.5rem;
        border-top: 1px solid var(--color-line);
    }

    .process__steps--detailed .process__node {
        top: -0.5rem;
    }

    /* one line per step on desktop, so the long line is hidden */
    .process__steps--detailed .process__line {
        display: none;
    }
}


/* PROCESS - COLLABORATION BLOCK (below the steps) */

.process__collaboration {
    display: grid;
    gap: var(--spacing-large);
    margin-top: var(--spacing-section);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-line);
}

.process__collaboration-title {
    margin-top: var(--spacing-small, 1rem);
}

.process__collaboration-text {
    display: grid;
    gap: 1.25rem;
    align-content: start;
}

@media (min-width: 900px) {
    .process__collaboration {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--spacing-xl);
    }
}

/* ==========================================================
   END PROCESS SECTION
========================================================== */

/* --- from styles/../../../styles/sections/cta.css --- */
/* ==========================================================
   CTA SECTION
   Green "Let's build something that works." band.
   HTML: /frontend/components/cta-band.html
========================================================== */

.cta {
    position: relative;
    overflow: hidden;
    padding-block: var(--spacing-section);
}

/* Faint topographic lines in the background */
.cta__lines {
    position: absolute;
    inset: 0;
    background-image: url("/assets/images/textures/contours.svg");
    background-size: cover;
    background-position: 30% 50%;
    opacity: 0.8;
    pointer-events: none;
}

.cta__inner {
    position: relative;
    display: grid;
    gap: var(--spacing-medium);
    justify-items: start;
}

.cta__heading em {
    display: inline-block;
}

.cta__text {
    max-width: 36rem;
}

.cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-small);
    margin-top: var(--spacing-small);
}

/* ==========================================================
   END CTA SECTION
========================================================== */

/* --- from styles/../../../styles/pages/work.css --- */
/* ==========================================================
   WORK PAGE
   Grid of all projects on /work/.
   HTML: /frontend/pages/work.html
         /frontend/build/renderers/work.js -> "work-grid"
========================================================== */

/* WORK GRID - two staggered columns on desktop */

.work-grid {
    display: grid;
    gap: var(--spacing-xl);
}

@media (min-width: 800px) {
    .work-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--spacing-large);
        row-gap: var(--spacing-2xl);
    }

    /* Every second card starts lower -> editorial rhythm */
    .work-grid > :nth-child(even):not(.is-filtered-out) {
        margin-top: var(--spacing-xl);
    }
}

/* ==========================================================
   END WORK PAGE
========================================================== */

/* --- from styles/../../../styles/pages/services.css --- */
/* ==========================================================
   LEISTUNGEN PAGE  (service packages)
   HTML:     /frontend/pages/leistungen.html
   CONTENT:  /content/leistungen/pakete.json
   CARDS:    /frontend/build/renderers/services.js
========================================================== */


/* PACKAGES - GRID */

.packages {
    display: grid;
    gap: var(--spacing-medium);
}

@media (min-width: 760px) {
    .packages {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .packages {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* PACKAGES - CARD */

.package {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius);
    background-color: var(--color-surface);
}

.package--highlight {
    border-color: var(--color-accent);
    box-shadow: inset 0 0 0 1px var(--color-accent);
}

.package__number {
    color: var(--color-accent);
}

.package__name {
    font-size: var(--text-xl);
    font-weight: 400;
}

.package__price {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-accent);
}

.package__summary {
    color: var(--color-text-muted);
}

.package__list {
    display: grid;
    gap: 0.55rem;
    padding-block: 1rem;
    border-block: 1px solid var(--color-line);
    font-size: var(--text-sm);
}

.package__list li {
    position: relative;
    padding-left: 1.5rem;
}

/* small check mark in front of every list item */
.package__list li::before {
    content: "";
    position: absolute;
    left: 0.1rem;
    top: 0.35em;
    width: 0.7rem;
    height: 0.4rem;
    border-left: 1.5px solid var(--color-accent);
    border-bottom: 1.5px solid var(--color-accent);
    transform: rotate(-45deg);
}

.package__ideal {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.package__ideal .label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-text);
}

.package__button {
    align-self: flex-start;
    margin-top: 0.5rem;
}

/* PACKAGE CARD - BUTTONS */

.package__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    margin-top: auto;
}


/* PACKAGE PAGES  (/leistungen/<slug>/) */

/* Two columns: heading or points left, text or card right */
.service-split {
    display: grid;
    gap: var(--spacing-xl);
}

@media (min-width: 900px) {
    .service-split {
        grid-template-columns: 5fr 6fr;
        column-gap: var(--spacing-2xl);
        align-items: start;
    }
}

.service-split__text {
    display: grid;
    gap: 1.25rem;
    font-size: var(--text-md);
    color: var(--color-text-muted);
}

.service-benefits {
    margin-top: var(--spacing-medium);
}

.package--detail {
    background-color: var(--color-ivory);
}

.service-related {
    margin-top: var(--spacing-large);
}


/* FAQ  (native <details> elements) */

.faq {
    border-top: 1px solid var(--color-line);
}

.faq__item {
    border-bottom: 1px solid var(--color-line);
}

.faq__question {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.25rem;
    font-size: var(--text-md);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.faq__question::-webkit-details-marker {
    display: none;
}

.faq__question::after {
    content: "+";
    flex: none;
    font-weight: 400;
    color: var(--color-accent);
    transition: transform var(--duration-fast) ease;
}

.faq__item[open] .faq__question::after {
    transform: rotate(45deg);
}

.faq__answer {
    padding-bottom: 1.4rem;
    color: var(--color-text-muted);
    max-width: 40rem;
}


/* OTHER PACKAGES (links at the end of a package page) */

.service-others__label {
    margin-top: var(--spacing-xl);
    margin-bottom: 0.5rem;
    color: var(--color-text-muted);
}

.service-others {
    border-top: 1px solid var(--color-line);
}

.service-others__link {
    display: flex;
    justify-content: space-between;
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--color-line);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--text-sm);
}

.service-others__link:hover {
    color: var(--color-accent);
}

/* ==========================================================
   END LEISTUNGEN PAGE
========================================================== */

/* --- from styles/../../../styles/pages/news.css --- */
/* ==========================================================
   NEWS  (article list, homepage teaser, article page)
   HTML:     /frontend/pages/news.html
             /frontend/templates/news-article.html
   CONTENT:  /content/news/<article>/article.md
   CARDS:    /frontend/build/renderers/news.js
========================================================== */


/* NEWS - GRID OF ARTICLE CARDS */

.news-grid {
    display: grid;
    gap: var(--spacing-medium);
}

@media (min-width: 760px) {
    .news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .news-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* NEWS - CARD */

.news-card__link {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    height: 100%;
    padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius);
    background-color: var(--color-surface);
    transition: border-color var(--duration-fast) ease;
}

.news-card__link:hover,
.news-card__link:focus-visible {
    border-color: var(--color-accent);
}

.news-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    color: var(--color-accent);
}

.news-card__title {
    font-size: var(--text-xl);
    font-weight: 400;
    line-height: var(--line-height-heading);
}

.news-card__text {
    color: var(--color-text-muted);
}

.news-card__more {
    margin-top: auto;
    padding-top: 0.5rem;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
}


/* NEWS - ARTICLE PAGE */

.news-article__hero {
    padding-top: calc(var(--header-height) + var(--spacing-xl));
    padding-bottom: var(--spacing-xl);
}

.news-article__header {
    display: grid;
    gap: var(--spacing-medium);
    max-width: calc(var(--content-width-text) + 2 * var(--page-gutter));
}

.news-article__header .eyebrow {
    flex-wrap: wrap;
}

.news-article__title {
    max-width: 20ch;
}

.news-article__author {
    color: var(--color-text-muted);
}

.news-article__cover {
    margin-bottom: var(--spacing-xl);
}

.news-article__cover img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
}

/* Header, text and "more" links share one centred reading column */
.news-article__text,
.news-more {
    max-width: var(--content-width-text);
    margin-inline: auto;
}

.news-article__text {
    font-size: var(--text-md);
}

.news-article__text ol {
    padding-left: 1.4em;
    list-style: decimal;
}

.news-article__text ul {
    list-style: disc;
}

.news-article__text li + li {
    margin-top: 0.4em;
}

.news-article__text blockquote {
    padding-left: 1.25rem;
    border-left: 2px solid var(--color-accent);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-style: italic;
}


/* NEWS - NEWER / OLDER ARTICLE */

.news-more {
    display: grid;
    gap: var(--spacing-medium);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-large);
    border-top: 1px solid var(--color-line);
}

.news-more__link {
    display: grid;
    gap: 0.4rem;
}

.news-more__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
}

.news-more__link:hover .news-more__title {
    color: var(--color-accent);
}

@media (min-width: 760px) {
    .news-more {
        grid-template-columns: 1fr 1fr;
    }

    .news-more__link--next {
        text-align: right;
    }
}

/* ==========================================================
   END NEWS
========================================================== */

/* --- from styles/../../../styles/pages/portfolio.css --- */
/* ==========================================================
   PORTFOLIO (Selected Work)
   Overview page /portfolio/ and the portfolio project pages.
   HTML: /frontend/pages/portfolio.html
         /frontend/templates/portfolio-project.html
         /frontend/build/renderers/portfolio.js

   IMAGE RULE:
   The graphics contain finished typography. They are shown at
   their own aspect ratio (no cropping, no filters, no frames).
========================================================== */


/* PORTFOLIO - HERO */

.portfolio-hero {
    position: relative;
    overflow: hidden;
    padding-top: calc(var(--header-height) + var(--spacing-2xl));
    padding-bottom: var(--spacing-xl);
}

.portfolio-hero__inner {
    position: relative;
    display: grid;
    gap: var(--spacing-medium);
}

.portfolio-hero__title {
    font-weight: 300;
}

.portfolio-hero__intro {
    max-width: 36rem;
}

.portfolio-hero__line {
    color: var(--color-accent);
}

/* Small vertical chapter label at the left edge (desktop only) */
.portfolio-hero__chapter {
    display: none;
}

@media (min-width: 1200px) {
    .portfolio-hero__chapter {
        position: absolute;
        left: 1.25rem;
        bottom: var(--spacing-xl);
        display: block;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        color: var(--color-text-muted);
    }
}


/* PORTFOLIO - GRID
   Mobile: one column. Desktop: asymmetric 12-column layout,
   card positions come from "layout" in project.json. */

.portfolio-grid {
    display: grid;
    gap: var(--spacing-2xl);
}

@media (min-width: 1000px) {
    .portfolio-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--spacing-large);
        row-gap: var(--spacing-section);
        align-items: end;
    }

    .portfolio-card--feature { grid-column: 1 / span 7; }
    .portfolio-card--side    { grid-column: 9 / span 4; }
    .portfolio-card--tall    { grid-column: 1 / span 5; }
    .portfolio-card--wide    { grid-column: 7 / span 6; }
    .portfolio-card--closing { grid-column: 1 / -1; }
}


/* PORTFOLIO CARD */

.portfolio-card__link {
    display: grid;
    gap: var(--spacing-medium);
    color: inherit;
}

/* Images: natural aspect ratio, bottoms aligned when there are several */
.portfolio-card__media {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-small);
}

.portfolio-card__image {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--border-radius);
    background-color: var(--color-surface);
}

.portfolio-card__image img {
    width: 100%;
    height: auto;
    transition: transform 1600ms var(--ease-cinematic);
}

.portfolio-card__link:hover .portfolio-card__image img,
.portfolio-card__link:focus-visible .portfolio-card__image img {
    transform: scale(1.015);
}

/* Three motifs on small screens: one large, two below */
@media (max-width: 699px) {
    .portfolio-card__media--count-3 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .portfolio-card__media--count-3 .portfolio-card__image:first-child {
        grid-column: 1 / -1;
    }
}

/* Card text */
.portfolio-card__body {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem var(--spacing-medium);
    align-items: baseline;
    padding-top: var(--spacing-small);
    border-top: 1px solid var(--color-line);
}

.portfolio-card__index {
    color: var(--color-accent);
}

.portfolio-card__text {
    display: grid;
    gap: 0.3rem;
}

.portfolio-card__title {
    font-size: var(--text-xl);
    font-weight: 400;
    line-height: 1.12;
}

.portfolio-card__category {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.portfolio-card__meta {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.portfolio-card__action {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 0.2rem;
    transition: background-size var(--duration-medium) var(--ease-cinematic);
}

.portfolio-card__link:hover .portfolio-card__action,
.portfolio-card__link:focus-visible .portfolio-card__action {
    background-size: 100% 1px;
}

/* Closing card: the first motif (main image) is shown large */
@media (min-width: 700px) {
    .portfolio-card--closing .portfolio-card__image:first-child {
        flex-grow: 2;
    }
}

.portfolio-card--closing .portfolio-card__title {
    font-size: var(--text-2xl);
}


/* PORTFOLIO CARDS IN OTHER GRIDS (/work/, homepage)
   Graphics keep their full image – no 4:3 crop. */

.work-card--poster .work-card__media {
    aspect-ratio: auto;
}

.work-card--poster .work-card__media picture,
.work-card--poster .work-card__media img {
    height: auto;
}

.work-card--poster .work-card__media::after {
    display: none;
}


/* PORTFOLIO PROJECT - A. HEADER */

.portfolio-project-hero {
    padding-top: calc(var(--header-height) + var(--spacing-xl));
    padding-bottom: var(--spacing-xl);
}

.portfolio-project-hero__inner {
    display: grid;
    gap: var(--spacing-medium);
}

.portfolio-project-hero__title {
    max-width: 20ch;
}

.portfolio-project-hero__intro {
    max-width: 44rem;
}

.portfolio-project-hero .notice {
    margin-top: var(--spacing-medium);
}


/* PORTFOLIO PROJECT - B. MAIN MOTIF + D. FURTHER MOTIFS
   Complete graphic, centred, never taller than the screen. */

.portfolio-stage {
    padding-bottom: var(--spacing-section);
}

.portfolio-motif {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
}

.portfolio-motif__link {
    display: block;
    max-width: 100%;
}

.portfolio-motif img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 88vh;
    border-radius: var(--border-radius);
}

.portfolio-motif__caption {
    text-align: center;
}

.portfolio-more__grid {
    display: grid;
    gap: var(--spacing-xl) var(--spacing-large);
    align-items: end;
}

@media (min-width: 900px) {
    .portfolio-more__grid--2 {
        grid-template-columns: 1fr 1fr;
    }
}


/* PORTFOLIO PROJECT - C. DESCRIPTION */

.portfolio-brief {
    display: grid;
    gap: var(--spacing-xl);
}

.portfolio-brief__item {
    display: grid;
    gap: var(--spacing-small);
    align-content: start;
    padding-top: var(--spacing-small);
    border-top: 1px solid var(--color-line);
}

.portfolio-brief__label {
    color: var(--color-accent);
}

.portfolio-brief__item p {
    font-size: var(--text-md);
    line-height: 1.7;
}

@media (min-width: 900px) {
    .portfolio-brief {
        grid-template-columns: 1fr 1.3fr 0.8fr;
        gap: var(--spacing-xl);
    }
}


/* PORTFOLIO PROJECT - E. NEXT PROJECT */

.portfolio-next {
    padding-block: var(--spacing-xl);
    border-top: 1px solid var(--color-line);
}

.portfolio-next .container {
    display: grid;
    gap: var(--spacing-medium);
}

.portfolio-next__link {
    display: grid;
    grid-template-columns: 5rem 1fr auto;
    align-items: center;
    gap: var(--spacing-medium);
}

.portfolio-next__thumb {
    overflow: hidden;
    border-radius: var(--border-radius);
}

.portfolio-next__thumb img {
    width: 100%;
    height: auto;
}

.portfolio-next__text {
    display: grid;
    gap: 0.35rem;
}

.portfolio-next__title {
    transition: color var(--duration-medium) var(--ease-standard);
}

.portfolio-next__arrow {
    font-size: var(--text-2xl);
    transition: transform var(--duration-slow) var(--ease-cinematic);
}

.portfolio-next__link:hover .portfolio-next__title {
    color: var(--color-accent);
}

.portfolio-next__link:hover .portfolio-next__arrow {
    transform: translateX(0.75rem);
}

@media (min-width: 700px) {
    .portfolio-next__link {
        grid-template-columns: 8rem 1fr auto;
    }
}


/* PORTFOLIO - F. CONTACT CTA */

.portfolio-cta {
    padding-block: var(--spacing-2xl);
}

.portfolio-cta__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-large);
}

.portfolio-cta__inner .text-lead {
    margin-top: var(--spacing-xs);
}

/* ==========================================================
   END PORTFOLIO
========================================================== */

/* --- from styles/../../../styles/pages/project.css --- */
/* ==========================================================
   PROJECT PAGES
   Shared layout of funnel, creative and design case pages.
   HTML: /frontend/templates/*-project.html
========================================================== */


/* PROJECT - HERO */

.project-hero {
    position: relative;
    overflow: hidden;
    padding-top: calc(var(--header-height) + var(--spacing-xl));
    padding-bottom: var(--spacing-xl);
}

.project-hero__inner {
    position: relative;
    display: grid;
    gap: var(--spacing-medium);
}

.project-hero__title {
    max-width: 20ch;
}

.project-hero__intro {
    max-width: 44rem;
}

.project-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-medium);
}

.project-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.project-hero .project-facts {
    margin-top: var(--spacing-small);
}

.project-hero .notice {
    margin-top: var(--spacing-medium);
}


/* PROJECT - PREVIEW */

.project-preview__hint {
    margin-top: var(--spacing-medium);
    text-align: right;
}


/* PROJECT - TEXT COLUMNS */

.project-columns {
    display: grid;
    gap: var(--spacing-xl);
}

.project-columns > div {
    display: grid;
    gap: var(--spacing-small);
    align-content: start;
}

.project-columns--spaced {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-line);
}

@media (min-width: 900px) {
    .project-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-2xl);
    }

    .project-columns--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--spacing-xl);
    }
}

@media (min-width: 700px) {
    .project-columns--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-xl);
    }
}

@media (min-width: 1100px) {
    .project-columns--four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.project-section__subheader {
    margin-top: var(--spacing-2xl);
}

.project-story {
    display: grid;
    gap: var(--spacing-medium);
}

.project-story__text {
    font-size: var(--text-md);
}


/* PROJECT - "TRY THE DEMO" BAND */

.project-demo-cta__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-medium);
}


/* PROJECT - NEXT PROJECT */

.project-next {
    border-top: 1px solid var(--color-line);
}

.project-next__inner {
    display: grid;
    gap: var(--spacing-medium);
    padding-block: var(--spacing-xl);
}

.project-next__link {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 0.5rem var(--spacing-medium);
}

.project-next__link .eyebrow {
    grid-column: 1 / -1;
}

.project-next__title {
    transition: color var(--duration-medium) var(--ease-standard);
}

.project-next__arrow {
    font-size: var(--text-2xl);
    transition: transform var(--duration-slow) var(--ease-cinematic);
}

.project-next__link:hover .project-next__title {
    color: var(--color-accent);
}

.project-next__link:hover .project-next__arrow {
    transform: translateX(0.75rem);
}

/* ==========================================================
   END PROJECT PAGES
========================================================== */

/* --- from styles/../../../styles/pages/funnels.css --- */
/* ==========================================================
   FUNNELS PAGE + FUNNEL CASE PARTS
   HTML: /frontend/pages/funnels.html
         /frontend/build/renderers/funnels.js
========================================================== */


/* FUNNELS - LIST (one row per funnel) */

.funnel-list {
    display: grid;
    gap: var(--spacing-2xl);
}

.funnel-item {
    display: grid;
    gap: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-line);
}

.funnel-item__content {
    display: grid;
    gap: var(--spacing-medium);
    align-content: center;
}

.funnel-item__content .fact-list {
    padding-block: var(--spacing-small);
}

.funnel-item__badges {
    display: flex;
    gap: 0.5rem;
}

@media (min-width: 1000px) {
    .funnel-item {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        gap: var(--spacing-2xl);
        align-items: center;
    }

    /* Alternate sides for rhythm */
    .funnel-item:nth-child(even) .funnel-item__preview {
        order: 2;
    }
}


/* FUNNEL CASE - STEP DIAGRAM (funnel structure) */

.step-diagram {
    display: grid;
    gap: var(--spacing-medium);
    counter-reset: step;
}

@media (min-width: 800px) {
    .step-diagram {
        grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    }
}

.step-diagram__step {
    position: relative;
    display: grid;
    gap: 0.5rem;
    align-content: start;
    padding: var(--spacing-medium);
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius);
    background-color: var(--color-surface);
}

/* Connector arrow between steps (desktop) */
@media (min-width: 800px) {
    .step-diagram__step:not(:last-child)::after {
        content: "→";
        position: absolute;
        top: 1.4rem;
        right: -1.15rem;
        z-index: 1;
        color: var(--color-accent);
    }
}

.step-diagram__number {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-style: italic;
    color: var(--color-accent);
}

.step-diagram__label {
    color: var(--color-text-muted);
}

.step-diagram__title {
    font-size: var(--text-lg);
    font-weight: 500;
}

.step-diagram__text {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}


/* FUNNEL CASE - COPY CONCEPT */

.copy-concept {
    display: grid;
    gap: var(--spacing-xl);
}

.copy-concept__headline {
    display: grid;
    gap: var(--spacing-small);
    padding: var(--spacing-xl) 0;
    border-block: 1px solid var(--color-line);
}

.copy-concept__headline blockquote {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 300;
    line-height: 1.1;
}

.copy-concept__headline figcaption {
    color: var(--color-accent);
}

.copy-concept__columns {
    display: grid;
    gap: var(--spacing-xl);
}

.copy-concept__columns h3 {
    margin-bottom: var(--spacing-small);
    color: var(--color-accent);
}

@media (min-width: 900px) {
    .copy-concept__columns {
        grid-template-columns: 1fr 1fr;
    }
}


/* FUNNEL CASE - VISUAL CONCEPT (swatches) */

.visual-concept {
    display: grid;
    gap: var(--spacing-xl);
}

.swatch-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--spacing-small);
}

.swatch {
    display: grid;
    gap: 0.25rem;
}

.swatch__colour {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius);
}

.swatch__name {
    font-weight: 600;
}

.swatch__hex {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

@media (min-width: 900px) {
    .visual-concept {
        grid-template-columns: 1.2fr 1fr;
    }
}


/* FUNNEL CASE - CTA STRUCTURE */

.cta-structure {
    display: grid;
    gap: var(--spacing-medium);
}

@media (min-width: 800px) {
    .cta-structure {
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    }
}

.cta-structure__item {
    display: grid;
    gap: 0.5rem;
    align-content: start;
    padding-top: var(--spacing-small);
    border-top: 1px solid var(--color-accent);
}

.cta-structure__item .label {
    color: var(--color-accent);
}

.cta-structure__text {
    font-family: var(--font-display);
    font-size: var(--text-lg);
}


/* FUNNEL CASE - USER JOURNEY */

.journey {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--color-line);
}

.journey__step {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: var(--spacing-small);
    padding-block: var(--spacing-medium);
    border-bottom: 1px solid var(--color-line);
}

.journey__number {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-style: italic;
    color: var(--color-accent);
    line-height: 1;
}

.journey__title {
    font-size: var(--text-lg);
    font-weight: 500;
}


/* FUNNEL CASE - SCREENSHOTS */

.screenshot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--spacing-medium);
    margin-top: var(--spacing-xl);
}

/* ==========================================================
   END FUNNELS PAGE
========================================================== */

/* --- from styles/../../../styles/pages/creatives.css --- */
/* ==========================================================
   CREATIVES PAGE + CREATIVE CASE PARTS
   HTML:   /frontend/pages/creatives.html
           /frontend/build/renderers/creatives.js
   SCRIPT: /frontend/scripts/modules/creative-views.js
========================================================== */


/* CREATIVES - GRID */

.creatives-grid {
    display: grid;
    gap: var(--spacing-xl) var(--spacing-large);
    align-items: start;
}

@media (min-width: 700px) {
    .creatives-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
    .creatives-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* CREATIVE CARD - shows ONE of the three views
   (data-view on the grid: creative | copy | combined) */

.creative-card {
    display: grid;
    gap: var(--spacing-medium);
}

.creative-card__view {
    display: none;
}

[data-view="creative"] .creative-card__view--creative,
[data-view="copy"] .creative-card__view--copy,
[data-view="combined"] .creative-card__view--combined {
    display: block;
    animation: filter-enter var(--duration-slow) var(--ease-cinematic);
}

.creative-card__image {
    overflow: hidden;
    border-radius: var(--border-radius-large);
    background-color: var(--color-surface);
}

.creative-card__image picture,
.creative-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ad-format--square { aspect-ratio: 1 / 1; }
.ad-format--portrait { aspect-ratio: 4 / 5; }
.ad-format--story { aspect-ratio: 9 / 16; }

.creative-card .ad-mockup {
    max-width: none;
}

.creative-card__info {
    display: grid;
    gap: 0.35rem;
    justify-items: start;
}

.creative-card__info .label {
    color: var(--color-accent);
}

.creative-card__title {
    font-size: var(--text-lg);
    font-weight: 500;
}

.creative-card__title a:hover {
    color: var(--color-accent);
}


/* COPY CARD (copy view + case pages) */

.copy-card {
    display: grid;
    gap: 0;
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius-large);
    background-color: var(--color-surface);
}

.copy-card__row {
    display: grid;
    gap: 0.35rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--color-line);
}

.copy-card__row:last-child {
    border-bottom: 0;
}

.copy-card__row .label {
    color: var(--color-text-muted);
}

.copy-card__hook {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: 1.2;
}

.copy-card__primary {
    display: grid;
    gap: 0.5em;
}

.copy-card__cta {
    font-weight: 700;
    color: var(--color-accent);
}


/* CREATIVE CASE - VARIATIONS */

.variation-list {
    display: grid;
    gap: var(--spacing-2xl);
}

.variation {
    display: grid;
    gap: var(--spacing-xl);
    align-items: start;
}

.variation__copy {
    display: grid;
    gap: var(--spacing-small);
}

@media (min-width: 900px) {
    .variation {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
        gap: var(--spacing-2xl);
    }

    .variation:nth-child(even) .variation__mockup { order: 2; }
}


/* CREATIVE CASE - HOOK LIBRARY */

.hook-library {
    display: grid;
    gap: var(--spacing-xl);
}

.hook-library h3 {
    margin-bottom: var(--spacing-small);
    color: var(--color-accent);
}

.hook-library__list {
    counter-reset: hook;
    border-top: 1px solid var(--color-line);
}

.hook-library__list li {
    counter-increment: hook;
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--color-line);
    font-family: var(--font-display);
    font-size: var(--text-lg);
}

.hook-library__list li::before {
    content: counter(hook, decimal-leading-zero);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    padding-top: 0.5em;
    color: var(--color-text-muted);
}

@media (min-width: 900px) {
    .hook-library { grid-template-columns: 1fr 1fr; gap: var(--spacing-2xl); }
}


/* PRINCIPLES LIST (Creatives + AI pages) */

.principles-list {
    display: grid;
    gap: var(--spacing-large);
}

.principles-list li {
    display: grid;
    gap: 0.5rem;
    align-content: start;
    padding-top: var(--spacing-small);
    border-top: 1px solid var(--color-line);
}

.principles-list .label {
    color: var(--color-accent);
}

.principles-list h3 {
    font-size: var(--text-xl);
    font-weight: 400;
}

@media (min-width: 800px) {
    .principles-list { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}

/* ==========================================================
   END CREATIVES PAGE
========================================================== */

/* --- from styles/../../../styles/pages/ai.css --- */
/* ==========================================================
   AI & SYSTEMS PAGE
   HTML: /frontend/pages/ai.html
         /frontend/build/renderers/ai.js -> "ai-workflows"
========================================================== */


/* AI FLOW - IDEA → STRATEGY → CREATION → SYSTEM → EXECUTION */

.ai-flow__chain {
    position: relative;
    display: grid;
    gap: var(--spacing-medium);
}

.ai-flow__step {
    position: relative;
    display: grid;
    gap: 0.5rem;
    align-content: start;
    padding: var(--spacing-medium);
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius);
    background-color: var(--color-background);
}

.ai-flow__node {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--color-accent);
    border-radius: 50%;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-accent);
}

.ai-flow__title {
    font-size: var(--text-xl);
    font-weight: 400;
}

.ai-flow__text {
    font-weight: 600;
}

.ai-flow__support {
    margin-top: auto;
    padding-top: var(--spacing-small);
    border-top: 1px dashed var(--color-line);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.ai-flow__support .label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-accent);
}

@media (min-width: 1000px) {
    .ai-flow__chain {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    /* Connection line through the nodes */
    .ai-flow__chain::before {
        content: "";
        position: absolute;
        top: calc(var(--spacing-medium) + 1.5rem);
        left: 2rem;
        right: 2rem;
        height: 1px;
        background-color: var(--color-accent);
        opacity: 0.5;
    }

    .ai-flow__step {
        background-color: transparent;
        border-color: transparent;
        padding-inline: 0;
    }

    .ai-flow__node {
        position: relative;
        background-color: var(--color-background);
    }
}


/* AI AREAS - modular grid */

.ai-areas__grid {
    display: grid;
    border-top: 1px solid var(--color-line);
    border-left: 1px solid var(--color-line);
}

.ai-area {
    display: grid;
    gap: 0.6rem;
    align-content: start;
    padding: var(--spacing-large) var(--spacing-medium);
    border-right: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    transition: background-color var(--duration-medium) var(--ease-standard);
}

.ai-area:hover {
    background-color: var(--color-surface);
}

.ai-area__index {
    color: var(--color-accent);
}

.ai-area__title {
    font-size: var(--text-xl);
    font-weight: 400;
}

@media (min-width: 700px) {
    .ai-areas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
    .ai-areas__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* AI WORKFLOWS - legend + blueprints */

.workflow-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-medium);
    margin-bottom: var(--spacing-xl);
    font-size: var(--text-sm);
}

.workflow-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.workflow-legend__item::before {
    content: "";
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    border: 1px solid var(--color-text);
}

.workflow-legend__item--human::before { background-color: var(--color-text); }
.workflow-legend__item--ai::before { background-color: var(--color-accent); border-color: var(--color-accent); }
.workflow-legend__item--system::before { background-color: transparent; }

.workflow-list {
    display: grid;
    gap: var(--spacing-2xl);
}

.workflow {
    display: grid;
    gap: var(--spacing-large);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-line);
    scroll-margin-top: calc(var(--header-height) + 2rem);
}

.workflow__header {
    display: grid;
    gap: 0.6rem;
    max-width: 44rem;
}

.workflow__steps {
    position: relative;
    display: grid;
    gap: var(--spacing-medium);
}

.workflow__step {
    position: relative;
    display: grid;
    gap: 0.35rem;
    align-content: start;
    padding-left: 2rem;
}

.workflow__node {
    position: absolute;
    top: 0.15rem;
    left: 0;
    width: 0.95rem;
    height: 0.95rem;
    border: 1px solid var(--color-text);
    border-radius: 50%;
    background-color: var(--color-background);
}

.workflow__step--human .workflow__node { background-color: var(--color-text); }
.workflow__step--ai .workflow__node { background-color: var(--color-accent); border-color: var(--color-accent); }

.workflow__role {
    color: var(--color-text-muted);
}

.workflow__step-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 500;
}

.workflow__step-text {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.workflow__facts {
    display: grid;
    gap: var(--spacing-small);
    padding: var(--spacing-medium);
    background-color: var(--color-surface);
    border-radius: var(--border-radius);
}

.workflow__facts > div {
    display: grid;
    gap: 0.2rem;
}

.workflow__facts dt {
    color: var(--color-accent);
}

@media (min-width: 900px) {
    .workflow__steps {
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
        padding-top: 2rem;
    }

    .workflow__steps::before {
        content: "";
        position: absolute;
        top: 0.45rem;
        left: 0;
        right: 0;
        height: 1px;
        background-color: var(--color-line);
    }

    .workflow__step {
        padding-left: 0;
    }

    .workflow__node {
        top: -2rem;
    }

    .workflow__facts {
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    }
}

/* ==========================================================
   END AI & SYSTEMS PAGE
========================================================== */

/* --- from styles/../../../styles/pages/contact.css --- */
/* ==========================================================
   CONTACT PAGE
   HTML: /frontend/pages/contact.html
========================================================== */

.contact {
    position: relative;
    overflow: hidden;
    padding-top: calc(var(--header-height) + var(--spacing-2xl));
    padding-bottom: var(--spacing-section);
}

/* Background photo with a strong dark veil, so the form stays calm */
.contact--image {
    isolation: isolate;
}

.contact__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.contact__media picture,
.contact__media img {
    width: 100%;
    height: 100%;
}

.contact__media img {
    object-fit: cover;
    object-position: 50% 65%;
}

.contact--image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(9, 10, 9, 0.9) 0%, rgba(9, 10, 9, 0.75) 50%, rgba(9, 10, 9, 0.6) 100%);
}

.contact__inner {
    position: relative;
    display: grid;
    gap: var(--spacing-2xl);
}

.contact__intro {
    display: grid;
    gap: var(--spacing-medium);
    align-content: start;
}

.contact__intro h1 em {
    display: block;
}

.contact__details {
    margin-top: var(--spacing-small);
}

.contact-details {
    display: grid;
    gap: var(--spacing-small);
    padding-top: var(--spacing-medium);
    border-top: 1px solid var(--color-line);
}

.contact-details__item {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: var(--spacing-small);
    align-items: baseline;
}

.contact-details__item dt {
    color: var(--color-accent);
}

.contact__qr {
    margin-top: var(--spacing-small);
    padding-top: var(--spacing-medium);
    border-top: 1px solid var(--color-line);
}

.contact__form {
    padding: clamp(1.25rem, 3vw, 2.5rem);
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius-large);
    background-color: rgba(17, 19, 17, 0.85);
}

@media (min-width: 1000px) {
    .contact__inner {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }
}

/* ==========================================================
   END CONTACT PAGE
========================================================== */

/* --- from styles/../../../styles/pages/legal.css --- */
/* ==========================================================
   LEGAL PAGES (Impressum, Datenschutz) + 404 PAGE
   HTML: /frontend/pages/impressum.html, datenschutz.html, 404.html
========================================================== */

.legal {
    min-height: 70vh;
    padding-top: calc(var(--header-height) + var(--spacing-2xl));
    padding-bottom: var(--spacing-section);
}

.legal .heading-1 {
    margin-block: var(--spacing-small) var(--spacing-large);
}

.legal__notice {
    margin-bottom: var(--spacing-xl);
}

.legal__content h2 {
    font-size: var(--text-lg);
    font-weight: 500;
}


/* 404 PAGE */

.not-found {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 90vh;
    overflow: hidden;
    padding-top: var(--header-height);
}

.not-found__inner {
    position: relative;
    display: grid;
    gap: var(--spacing-medium);
    justify-items: start;
}

.not-found h1 em {
    display: block;
}

/* ==========================================================
   END LEGAL PAGES
========================================================== */


/* BOLD LAYER */
/* --- from styles/bold/tokens.css --- */
/* ==========================================================
   BOLD TOKENS  (colours, font, shapes of the bold variant)

   PURPOSE:
   Overrides the design tokens of the normal website. Shared
   pages (projects, news, packages) pick up the new look
   automatically because they only use these variables.

   SAFE TO EDIT: the hex codes and sizes.
========================================================== */

@font-face {
    font-family: "Archivo";
    src: url("/assets/fonts/archivo-standard-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("/assets/fonts/archivo-standard-latin-italic.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: italic;
    font-display: swap;
}

:root {
    /* BOLD PALETTE */
    --b-night: #080808;          /* page background */
    --b-night-2: #111111;        /* raised areas */
    --b-panel: rgba(238, 234, 224, 0.045);  /* glass cards */
    --b-panel-strong: rgba(238, 234, 224, 0.08);
    --b-line: rgba(238, 234, 224, 0.12);
    --b-line-strong: rgba(238, 234, 224, 0.22);
    --b-ivory: #EEEAE0;
    --b-muted: #9DA39C;
    --b-signal: #EEEAE0;         /* accent = ivory: this variant lives in ivory and black only */
    --b-signal-soft: #FFFFFF;
    --b-signal-glow: rgba(238, 234, 224, 0.3);
    --b-forest: #1A1C1A;         /* soft light in the background */
    --b-forest-glow: rgba(238, 234, 224, 0.07);

    /* TYPE */
    --b-font: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
    --b-display-size: clamp(3.4rem, 1.2rem + 10vw, 13rem);
    --b-h1: clamp(2.8rem, 1.4rem + 6vw, 7.5rem);
    --b-h2: clamp(2.2rem, 1.2rem + 4vw, 5.2rem);
    --b-h3: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem);

    /* SHAPES */
    --b-radius: 26px;
    --b-radius-small: 14px;
    --b-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --b-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* OVERRIDES OF THE NORMAL WEBSITE TOKENS */
    --font-display: var(--b-font);
    --font-body: var(--b-font);
    --color-obsidian: var(--b-night);
    --color-obsidian-raised: var(--b-night-2);
    --color-obsidian-line: var(--b-line);
    --color-brass: var(--b-signal);
    --color-brass-dark: #B8B2A4;
    --color-british-green: #0D0E0D;
    --color-forest: #161716;
    --color-background: var(--b-night);
    --color-surface: var(--b-panel);
    --color-text: var(--b-ivory);
    --color-text-muted: var(--b-muted);
    --color-line: var(--b-line);
    --color-accent: var(--b-signal);
    --border-radius: 10px;
    --border-radius-large: var(--b-radius);
    --header-height: 6.5rem;
    --topbar-height: 0rem;
    --header-bar-height: 6.5rem;
}

/* Shared pages alternate dark and light sections. In this variant
   "light" and "sand" stay dark too, the bold look lives on night. */
.theme-dark,
.theme-light,
.theme-sand,
.theme-green {
    --color-background: transparent;
    --color-surface: var(--b-panel);
    --color-text: var(--b-ivory);
    --color-text-muted: var(--b-muted);
    --color-line: var(--b-line);
    --color-accent: var(--b-signal);
}

/* --- from styles/bold/base.css --- */
/* ==========================================================
   BOLD BASE  (page, background stage, type, buttons, glass)

   PURPOSE:
   The building blocks every page of the bold variant uses.
   Pages: /frontend/variants/bold/pages/*.html
========================================================== */

html.bold {
    background: var(--b-night);
    color-scheme: dark;
    scrollbar-color: #2a2f2b var(--b-night);
}

.bold body {
    background: var(--b-night);
    color: var(--b-ivory);
    font-family: var(--b-font);
    font-stretch: 100%;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

.bold ::selection {
    background: var(--b-signal);
    color: var(--b-night);
}

.bold main {
    position: relative;
    z-index: 1;
}

/* Everything sits above the fixed background stage */
.bold .nav,
.bold .foot {
    position: relative;
    z-index: 2;
}


/* ----------------------------------------------------------
   BACKGROUND STAGE  (fixed behind all content)
   - grid:       fine technical grid that fades out at the edges
   - glow:       slow moving light (forest + signal)
   - particles:  WebGL canvas (scripts/bold/particles.js)
---------------------------------------------------------- */

.stage {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.stage__grid {
    position: absolute;
    inset: -2px;
    background-image:
        linear-gradient(to right, rgba(238, 234, 224, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(238, 234, 224, 0.05) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 85%);
    transform: translateY(calc(var(--scroll-y, 0) * -0.08px));
}

.stage__glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(40vw 40vw at var(--glow-x, 75%) var(--glow-y, 20%), var(--b-forest-glow), transparent 70%),
        radial-gradient(32vw 32vw at 15% 85%, rgba(238, 234, 224, 0.13), transparent 70%);
    filter: blur(20px);
    animation: stage-glow 18s var(--b-ease-in-out) infinite alternate;
}

@keyframes stage-glow {
    to { transform: translate3d(-4vw, 6vh, 0) scale(1.08); }
}

.stage__particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.stage__particles.is-ready {
    opacity: 1;
}


/* ----------------------------------------------------------
   LAYOUT
---------------------------------------------------------- */

.wrap {
    width: min(100% - 2 * var(--page-gutter), 1440px);
    margin-inline: auto;
}

.block {
    position: relative;
    padding-block: clamp(5rem, 3rem + 9vw, 12rem);
}


/* ----------------------------------------------------------
   TYPE
---------------------------------------------------------- */

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--b-signal);
}

.kicker {
    flex-wrap: wrap;
    row-gap: 0.4rem;
}

.kicker span {
    white-space: nowrap;
}

.mega {
    font-size: var(--b-display-size);
    font-weight: 850;
    font-stretch: 112%;
    line-height: 0.86;
    letter-spacing: -0.035em;
    text-transform: uppercase;
}

.h1 {
    font-size: var(--b-h1);
    font-weight: 800;
    font-stretch: 108%;
    line-height: 0.92;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    text-wrap: balance;
}

.h2 {
    font-size: var(--b-h2);
    font-weight: 800;
    font-stretch: 106%;
    line-height: 0.95;
    letter-spacing: -0.028em;
    text-transform: uppercase;
    text-wrap: balance;
}

.h3 {
    font-size: var(--b-h3);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.lead {
    max-width: 38rem;
    font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.35rem);
    line-height: 1.55;
    color: var(--b-muted);
}

.lead strong {
    color: var(--b-ivory);
    font-weight: 600;
}

.signal {
    color: var(--b-signal);
}

/* Outlined giant words */
.outline {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(238, 234, 224, 0.55);
}

.muted {
    color: var(--b-muted);
}


/* ----------------------------------------------------------
   BUTTONS  (pill with glow; data-magnetic pulls them to the pointer)
---------------------------------------------------------- */

.btn {
    --btn-bg: var(--b-signal);
    --btn-fg: var(--b-night);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.4rem;
    padding: 0 1.6rem;
    border-radius: 999px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 700;
    font-size: 0.98rem;
    letter-spacing: 0.01em;
    box-shadow: 0 0 0 0 var(--b-signal-glow), 0 18px 40px -18px var(--b-signal-glow);
    transition: box-shadow 0.4s var(--b-ease), background-color 0.3s ease, color 0.3s ease;
    will-change: transform;
    isolation: isolate;
    overflow: hidden;
}

.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.9s var(--b-ease);
}

.btn:hover::before,
.btn:focus-visible::before {
    transform: translateX(120%);
}

.btn:hover,
.btn:focus-visible {
    box-shadow: 0 0 0 6px rgba(238, 234, 224, 0.18), 0 22px 50px -16px var(--b-signal-glow);
}

.btn__arrow {
    display: inline-block;
    transition: transform 0.4s var(--b-ease);
}

.btn:hover .btn__arrow {
    transform: translateX(4px);
}

.btn--ghost {
    --btn-bg: rgba(238, 234, 224, 0.06);
    --btn-fg: var(--b-ivory);
    border: 1px solid var(--b-line-strong);
    box-shadow: none;
    backdrop-filter: blur(12px);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
    --btn-bg: rgba(238, 234, 224, 0.12);
    box-shadow: none;
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--b-ivory);
}

.arrow-link::after {
    content: "→";
    color: var(--b-signal);
    transition: transform 0.4s var(--b-ease);
}

.arrow-link:hover::after {
    transform: translateX(5px);
}


/* ----------------------------------------------------------
   GLASS CARD  (data-tilt adds 3D tilt + a light following the pointer)
---------------------------------------------------------- */

.glass {
    position: relative;
    border: 1px solid var(--b-line);
    border-radius: var(--b-radius);
    background:
        radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(238, 234, 224, 0.13), transparent 45%),
        linear-gradient(160deg, rgba(238, 234, 224, 0.07), rgba(238, 234, 224, 0.02));
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 80px -40px rgba(0, 0, 0, 0.8);
}

.glass::after {
    /* glowing edge that follows the pointer */
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(238, 234, 224, 0.8), transparent 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.glass:hover::after {
    opacity: 1;
}

[data-tilt] {
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transform-style: preserve-3d;
    transition: transform 0.6s var(--b-ease);
}

[data-tilt].is-tilting {
    transition: transform 0.12s linear;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.8rem;
    border: 1px solid var(--b-line);
    border-radius: 999px;
    background: rgba(238, 234, 224, 0.04);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--b-ivory);
}

.chip--signal {
    border-color: rgba(238, 234, 224, 0.5);
    color: var(--b-signal-soft);
    background: rgba(238, 234, 224, 0.08);
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}


/* ----------------------------------------------------------
   MARQUEE  (endless ticker; skews with scroll speed)
---------------------------------------------------------- */

.marquee {
    position: relative;
    overflow: hidden;
    padding-block: clamp(1.5rem, 1rem + 2vw, 3rem);
    border-block: 1px solid var(--b-line);
    background: rgba(8, 8, 8, 0.55);
    backdrop-filter: blur(6px);
    transform: skewY(calc(var(--scroll-skew, 0) * 1deg));
}

.marquee__track {
    display: flex;
    width: max-content;
    animation: marquee 38s linear infinite;
}

.marquee--reverse .marquee__track {
    animation-direction: reverse;
}

.marquee__item {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 1rem + 2vw, 3rem);
    padding-right: clamp(1.5rem, 1rem + 2vw, 3rem);
    font-size: clamp(2.6rem, 1.6rem + 4.5vw, 6.5rem);
    font-weight: 850;
    font-stretch: 118%;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.marquee__item:nth-child(even) {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(238, 234, 224, 0.5);
}

.marquee__star {
    color: var(--b-signal);
    font-size: 0.5em;
    -webkit-text-stroke: 0;
}

@keyframes marquee {
    to { transform: translateX(-50%); }
}


/* ----------------------------------------------------------
   CURSOR  (soft dot that follows the pointer, mouse only)
---------------------------------------------------------- */

.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: var(--b-signal);
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;
    transform: translate3d(var(--cx, -100px), var(--cy, -100px), 0) scale(var(--cs, 1));
    transition: opacity 0.3s ease, width 0.3s var(--b-ease), height 0.3s var(--b-ease), margin 0.3s var(--b-ease), background-color 0.3s ease;
}

.cursor-dot.is-active {
    opacity: 1;
}

.cursor-dot.is-hover {
    width: 54px;
    height: 54px;
    margin: -27px 0 0 -27px;
    background: rgba(238, 234, 224, 0.18);
    border: 1px solid rgba(238, 234, 224, 0.7);
}

@media (pointer: coarse) {
    .cursor-dot { display: none; }
}


/* ----------------------------------------------------------
   IMAGE CAPTION
---------------------------------------------------------- */

.caption {
    margin-top: 0.8rem;
    font-size: 0.8rem;
    color: var(--b-muted);
}


/* ----------------------------------------------------------
   SKIP LINK + FOCUS
---------------------------------------------------------- */

.bold :focus-visible {
    outline: 2px solid var(--b-signal);
    outline-offset: 3px;
}


/* ----------------------------------------------------------
   SMALL PHONES: long single words (e.g. "Zusammenarbeit")
   must fit, so the giant type gets narrower and smaller.
---------------------------------------------------------- */

@media (max-width: 600px) {
    .mega,
    .h1,
    .h2,
    .page-b__title,
    .about-b__title,
    .contact-b__title {
        font-stretch: 96%;
    }

    .mega,
    .page-b__title,
    .about-b__title,
    .contact-b__title {
        font-size: min(var(--b-display-size), 9.4vw);
    }

    .h2 {
        font-size: min(var(--b-h2), 8.4vw);
    }
}

html.bold {
    overflow-x: clip;
}

/* --- from styles/bold/motion.css --- */
/* ==========================================================
   BOLD MOTION  (text reveals, scroll scenes, reduced motion)

   PURPOSE:
   - data-split:  headlines appear word by word (scripts/bold/split.js)
   - data-reveal: blocks fade and rise in (scripts/modules/reveal.js)
   - [data-scene]: pinned scroll scenes get --p (0 to 1) from
                   scripts/bold/scenes.js
   Everything falls back to "visible, no motion" without JS and
   when the visitor prefers reduced motion.
========================================================== */

/* WORD-BY-WORD HEADLINES */
.split-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.08em;
    margin-bottom: -0.08em;
}

.split-word__inner {
    display: inline-block;
}

.js [data-split] .split-word__inner {
    transform: translate3d(0, 105%, 0) rotate(4deg);
    transform-origin: 0 100%;
    transition: transform 1.1s var(--b-ease);
    transition-delay: calc(var(--i, 0) * 55ms + var(--split-delay, 0ms));
}

.js [data-split].is-revealed .split-word__inner {
    transform: none;
}

/* BLOCKS (overrides the calmer default reveal) */
.bold.js [data-reveal] {
    --reveal-distance: 46px;
    filter: blur(8px);
    transition:
        opacity 1s var(--b-ease),
        transform 1.2s var(--b-ease),
        filter 1s var(--b-ease);
    transition-delay: calc(var(--d, 0) * 90ms);
}

.bold [data-reveal-delay="1"] { --d: 1; }
.bold [data-reveal-delay="2"] { --d: 2; }
.bold [data-reveal-delay="3"] { --d: 3; }
.bold [data-reveal-delay="4"] { --d: 4; }
.bold [data-reveal-delay="5"] { --d: 5; }
.bold [data-reveal-delay="6"] { --d: 6; }

.bold.js [data-reveal].is-revealed {
    filter: none;
}

/* REDUCED MOTION: show everything, no movement */
@media (prefers-reduced-motion: reduce) {
    .js [data-split] .split-word__inner,
    .bold.js [data-reveal] {
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
        transition: none !important;
    }

    .marquee__track,
    .stage__glow {
        animation: none;
    }
}

/* --- from styles/bold/nav.css --- */
/* ==========================================================
   BOLD NAVIGATION  (floating glass pill)
   HTML: /frontend/variants/bold/components/navigation.html
   JS:   /frontend/scripts/modules/navigation.js
         (adds is-scrolled / is-hidden / is-menu-open)
========================================================== */

.nav {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-header);
    padding: 1rem var(--page-gutter) 0;
    pointer-events: none;
    transition: transform 0.6s var(--b-ease);
}

.nav.is-hidden {
    transform: translateY(-130%);
}

.nav__pill {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 1180px;
    margin-inline: auto;
    padding: 0.55rem 0.55rem 0.55rem 1rem;
    border: 1px solid var(--b-line);
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.55);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 50px -30px rgba(0, 0, 0, 0.9);
    pointer-events: auto;
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

.nav.is-scrolled .nav__pill {
    background: rgba(17, 17, 17, 0.82);
    border-color: var(--b-line-strong);
}

.nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 800;
    font-stretch: 112%;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.nav__brand img {
    width: 34px;
    height: 34px;
    transition: transform 0.8s var(--b-ease);
}

.nav__brand:hover img {
    transform: rotate(-12deg) scale(1.08);
}

.nav__links {
    flex: 1;
    display: none;
    justify-content: center;
}

.nav__links .site-nav__list {
    display: flex;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
}

.nav__links .site-nav__link {
    position: relative;
    display: block;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--b-muted);
    transition: color 0.3s ease, background-color 0.3s ease;
}

.nav__links .site-nav__link:hover {
    color: var(--b-ivory);
    background: rgba(238, 234, 224, 0.06);
}

.nav__links .site-nav__link[aria-current] {
    color: var(--b-ivory);
    background: rgba(238, 234, 224, 0.12);
    box-shadow: inset 0 0 0 1px rgba(238, 234, 224, 0.35);
}

.nav__links .site-nav__link[aria-current]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.62rem;
    width: 26px;
    height: 3px;
    margin-left: -13px;
    border-radius: 3px;
    background: var(--b-signal);
    box-shadow: 0 0 14px 2px var(--b-signal-glow);
}

.nav__cta {
    display: none;
    align-items: center;
    min-height: 2.6rem;
    padding: 0 1.15rem;
    border-radius: 999px;
    background: var(--b-signal);
    color: var(--b-night);
    font-weight: 700;
    font-size: 0.88rem;
    white-space: nowrap;
    box-shadow: 0 10px 30px -12px var(--b-signal-glow);
}

.nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
    min-height: 2.6rem;
    padding: 0 1rem;
    border-radius: 999px;
    background: rgba(238, 234, 224, 0.08);
    color: var(--b-ivory);
    font-weight: 600;
    font-size: 0.85rem;
}

.nav__toggle-lines {
    display: grid;
    gap: 4px;
}

.nav__toggle-lines span {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    transition: transform 0.4s var(--b-ease);
}

.nav.is-menu-open .nav__toggle-lines span:first-child {
    transform: translateY(3px) rotate(45deg);
}

.nav.is-menu-open .nav__toggle-lines span:last-child {
    transform: translateY(-3px) rotate(-45deg);
}

/* FULL-SCREEN MENU (phones) */
.nav__menu {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6rem var(--page-gutter) 2.5rem;
    background: rgba(8, 8, 8, 0.96);
    backdrop-filter: blur(20px);
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.5s var(--b-ease);
}

.nav__menu.is-open {
    opacity: 1;
}

.nav__menu .mobile-menu__list {
    display: grid;
    gap: 0.2rem;
    margin: 0;
    padding: 0;
}

.nav__menu .mobile-menu__link {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    font-size: clamp(2.4rem, 1.4rem + 6vw, 4rem);
    font-weight: 850;
    font-stretch: 115%;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.nav__menu .mobile-menu__link[aria-current] {
    color: var(--b-signal);
}

.nav__menu .mobile-menu__number {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--b-muted);
}

.nav__menu-foot {
    margin-top: 2.5rem;
    color: var(--b-muted);
    font-size: 0.9rem;
}

.is-menu-locked {
    overflow: hidden;
}

@media (min-width: 980px) {
    .nav__links,
    .nav__cta {
        display: flex;
    }

    .nav__toggle,
    .nav__menu {
        display: none !important;
    }
}

/* --- from styles/bold/footer.css --- */
/* ==========================================================
   BOLD FOOTER  (giant call to action + links)
   HTML: /frontend/variants/bold/components/footer.html
========================================================== */

.foot {
    position: relative;
    overflow: hidden;
    padding-top: clamp(5rem, 3rem + 8vw, 10rem);
    border-top: 1px solid var(--b-line);
    background: transparent;
}

.foot__call {
    display: grid;
    gap: 1rem;
    width: fit-content;
}

.foot__call-small {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--b-signal);
}

.foot__call-big {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    font-size: clamp(3rem, 1.4rem + 8vw, 10rem);
    font-weight: 850;
    font-stretch: 116%;
    line-height: 0.9;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    transition: color 0.4s ease;
}

.foot__arrow {
    display: inline-grid;
    place-items: center;
    width: 0.9em;
    height: 0.9em;
    border-radius: 50%;
    background: var(--b-signal);
    color: var(--b-night);
    font-size: 0.55em;
    transition: transform 0.6s var(--b-ease);
}

.foot__call:hover .foot__call-big {
    color: var(--b-signal);
}

.foot__call:hover .foot__arrow {
    transform: rotate(-45deg) scale(1.08);
}

.foot__grid {
    display: grid;
    gap: 2.5rem;
    margin-top: clamp(4rem, 3rem + 4vw, 7rem);
    padding-top: 2.5rem;
    border-top: 1px solid var(--b-line);
}

.foot__brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.foot__label {
    margin-bottom: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--b-muted);
}

.foot ul {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.foot a.link-underline,
.foot__col a {
    font-weight: 600;
    color: var(--b-ivory);
    transition: color 0.3s ease;
}

.foot__col a:hover {
    color: var(--b-signal);
}

.foot__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding-block: 1.5rem;
    border-top: 1px solid var(--b-line);
    font-size: 0.85rem;
    color: var(--b-muted);
}

.foot__bottom ul {
    display: flex;
    gap: 1.5rem;
}

/* SLOGAN: drawn by the particles; the text is the fallback and stays
   readable for screen readers */
.foot__slogan {
    position: relative;
    display: grid;
    place-items: center;
    height: clamp(220px, 30vw, 460px);
    margin-top: 1rem;
}

.foot__slogan-text {
    font-size: clamp(2.4rem, 1rem + 6vw, 7rem);
    font-weight: 900;
    font-stretch: 112%;
    line-height: 1;
    letter-spacing: -0.03em;
    text-align: center;
}

.has-particles .foot__slogan-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (min-width: 760px) {
    .foot__grid {
        grid-template-columns: 1.4fr 1fr 1fr;
    }
}

/* --- from styles/bold/home.css --- */
/* ==========================================================
   BOLD HOMEPAGE
   HTML: /frontend/variants/bold/pages/index.html
========================================================== */


/* ----------------------------------------------------------
   HERO
---------------------------------------------------------- */

.hero-b {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding: 8rem 0 5rem;
}

.hero-b__inner {
    display: grid;
    align-items: center;
    gap: 2rem;
}

.hero-b__copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.hero-b__claim {
    margin: 1.4rem 0 1.8rem;
    font-size: clamp(3rem, 0.8rem + 6.4vw, 8.4rem);
}

.hero-b__line {
    display: block;
}

/* "Kunden." stands out as an ivory block with black letters */
.hero-b__line--signal {
    display: inline-block;
    margin-top: 0.06em;
    padding: 0.06em 0.12em 0;
    background: var(--b-ivory);
    color: var(--b-night);
    box-shadow: 0 0 80px -10px rgba(238, 234, 224, 0.35);
    animation: hero-stretch 7s var(--b-ease-in-out) 1.6s infinite alternate;
}

@keyframes hero-stretch {
    from { font-stretch: 112%; }
    to { font-stretch: 125%; }
}

.hero-b__lead {
    margin-bottom: 2.2rem;
}

.hero-b__anchor {
    position: relative;
    justify-self: center;
    width: min(78vw, 560px);
    aspect-ratio: 1;
}

.hero-b__ring {
    position: absolute;
    inset: 4%;
    border: 1px dashed rgba(238, 234, 224, 0.16);
    border-radius: 50%;
    animation: spin 60s linear infinite;
}

.hero-b__ring--2 {
    inset: -6%;
    border-style: solid;
    border-color: rgba(238, 234, 224, 0.18);
    border-top-color: var(--b-signal);
    animation-duration: 14s;
    animation-direction: reverse;
}

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

.hero-b__scroll {
    position: absolute;
    left: 50%;
    bottom: 1.8rem;
    width: 26px;
    height: 42px;
    margin-left: -13px;
    border: 1.5px solid var(--b-line-strong);
    border-radius: 14px;
}

.hero-b__scroll span {
    position: absolute;
    left: 50%;
    top: 8px;
    width: 4px;
    height: 8px;
    margin-left: -2px;
    border-radius: 2px;
    background: var(--b-signal);
    animation: scroll-hint 1.8s var(--b-ease) infinite;
}

@keyframes scroll-hint {
    0% { transform: translateY(0); opacity: 1; }
    80% { transform: translateY(14px); opacity: 0; }
    100% { opacity: 0; }
}

@media (min-width: 980px) {
    .hero-b__inner {
        grid-template-columns: 1.35fr 1fr;
    }

    .hero-b__anchor {
        width: min(40vw, 600px);
    }
}

/* Phones: the logo sits above the claim instead of behind it */
@media (max-width: 979px) {
    .hero-b {
        padding-top: 6rem;
    }

    .hero-b__anchor {
        order: -1;
        width: min(64vw, 340px);
        margin-bottom: -1rem;
    }
}


/* ----------------------------------------------------------
   SERVICES
---------------------------------------------------------- */

.services-b__head {
    display: grid;
    gap: 2rem;
    align-items: end;
    margin-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

.services-b__head .h2 {
    margin-top: 1.2rem;
    max-width: 14ch;
}

.services-b__anchor {
    height: clamp(220px, 28vw, 380px);
}

.services-b__grid {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

.service-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    min-height: 330px;
    padding: 1.8rem;
}

.service-card__number {
    position: absolute;
    top: 1.2rem;
    right: 1.5rem;
    font-size: 3.4rem;
    font-weight: 900;
    font-stretch: 120%;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(238, 234, 224, 0.2);
}

.service-card__icon {
    width: 52px;
    height: 52px;
    padding: 13px;
    border-radius: 16px;
    background: rgba(238, 234, 224, 0.12);
    color: var(--b-signal);
    box-shadow: 0 0 30px -6px var(--b-signal-glow);
    transform: translateZ(30px);
}

.service-card__title {
    margin-top: auto;
    font-size: 1.45rem;
    font-weight: 800;
    font-stretch: 108%;
    line-height: 1.1;
    text-transform: uppercase;
    transform: translateZ(20px);
}

.service-card__text {
    color: var(--b-muted);
    line-height: 1.55;
}

@media (min-width: 700px) {
    .services-b__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
    .services-b__grid { grid-template-columns: repeat(4, 1fr); }
    .services-b__head { grid-template-columns: 1fr 1fr; }
}


/* ----------------------------------------------------------
   GALLERY  (pinned horizontal track, desktop)
---------------------------------------------------------- */

.gallery {
    position: relative;
    padding-block: 4rem;
}

.gallery__head {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.gallery__head .h2 {
    margin-top: 1rem;
}

.gallery__side {
    display: grid;
    gap: 1rem;
    align-content: end;
}

.gallery__track {
    display: flex;
    gap: clamp(1.25rem, 2.5vw, 3rem);
    width: max-content;
    margin: 0;
    padding: 0 var(--page-gutter);
}

.gallery__item {
    flex: none;
}

.gallery__link {
    display: block;
}

.gallery__figure {
    margin: 0;
}

.gallery__figure img {
    display: block;
    width: auto;
    height: clamp(300px, 54vh, 620px);
    max-width: none;
    border-radius: var(--b-radius-small);
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--b-line);
    transition: box-shadow 0.5s ease;
}

.gallery__link:hover img {
    box-shadow: 0 40px 90px -30px var(--b-signal-glow), 0 0 0 1px rgba(238, 234, 224, 0.6);
}

.gallery__caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

.gallery__title {
    display: grid;
    font-weight: 700;
}

.gallery__motif {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--b-muted);
}

.gallery__progress {
    width: min(100% - 2 * var(--page-gutter), 1440px);
    height: 2px;
    margin: 2.5rem auto 0;
    background: var(--b-line);
}

.gallery__progress span {
    display: block;
    height: 100%;
    width: calc(var(--p, 0) * 100%);
    background: var(--b-signal);
    box-shadow: 0 0 12px var(--b-signal-glow);
}

/* Phones: the track simply scrolls sideways */
@media (max-width: 899px) {
    .gallery__track {
        width: auto;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 1rem;
    }

    .gallery__item {
        scroll-snap-align: center;
    }

    .gallery__figure img {
        height: 60vh;
        max-height: 480px;
    }

    .gallery__progress {
        display: none;
    }
}

/* Desktop with motion: pinned, the track moves with the scroll */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    .js .gallery {
        height: 420vh;
        padding: 0;
    }

    .js .gallery__sticky {
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100vh;
        overflow: hidden;
    }

    .js .gallery__track {
        transform: translate3d(calc((100vw - 100%) * var(--p, 0)), 0, 0);
        will-change: transform;
    }

    .js .gallery__item:nth-child(odd) {
        transform: translateY(-22px);
    }

    .js .gallery__item:nth-child(even) {
        transform: translateY(22px);
    }

    .gallery__head {
        grid-template-columns: 1fr minmax(0, 26rem);
        align-items: end;
    }
}


/* ----------------------------------------------------------
   PROCESS STEPPER
---------------------------------------------------------- */

.steps-b {
    position: relative;
    padding-block: 5rem;
}

.steps-b__head {
    margin-bottom: 2rem;
}

.steps-b__head .h2 {
    margin-top: 1rem;
}

.steps-b__rail {
    display: none;
}

.steps-b__stage {
    padding: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.step {
    display: grid;
    gap: 2rem;
    align-items: center;
    padding-block: 2rem;
    border-bottom: 1px solid var(--b-line);
}

.step:last-child {
    border-bottom: 0;
}

.step__count {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--b-signal);
}

.step__title {
    margin: 0.8rem 0 1rem;
    font-size: clamp(2.4rem, 1.5rem + 3.5vw, 4.6rem);
    font-weight: 850;
    font-stretch: 112%;
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: -0.03em;
}

.step__text {
    max-width: 34rem;
    margin-bottom: 1.4rem;
    color: var(--b-muted);
    line-height: 1.6;
}

.step__ui {
    position: relative;
    min-height: 260px;
    border-radius: var(--b-radius-small);
    background: radial-gradient(circle at 50% 50%, rgba(238, 234, 224, 0.08), transparent 70%), rgba(8, 8, 8, 0.5);
    border: 1px solid var(--b-line);
    overflow: hidden;
}

.steps-b__more {
    margin-top: 2rem;
}

@media (min-width: 900px) {
    .step {
        grid-template-columns: 1.1fr 1fr;
    }
}

/* PINNED VERSION (scripts/bold/stepper.js adds .is-enhanced) */
@media (min-width: 900px) {
    .steps-b.is-enhanced {
        height: 600vh;
        padding: 0;
    }

    .steps-b.is-enhanced .steps-b__sticky {
        position: sticky;
        top: 0;
        display: flex;
        align-items: center;
        height: 100vh;
        padding-top: 5rem;
    }

    .steps-b.is-enhanced .steps-b__sticky > .wrap {
        width: min(100% - 2 * var(--page-gutter), 1240px);
    }

    .steps-b.is-enhanced .steps-b__head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 2rem;
        margin-bottom: 1.5rem;
    }

    .steps-b.is-enhanced .steps-b__rail {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 1.2rem;
    }

    .steps-b__dot {
        position: relative;
        padding: 0.55rem 1rem 0.55rem 2.1rem;
        border: 1px solid var(--b-line);
        border-radius: 999px;
        background: rgba(238, 234, 224, 0.04);
        color: var(--b-muted);
        font-weight: 600;
        font-size: 0.86rem;
        transition: all 0.5s var(--b-ease);
    }

    .steps-b__dot::before {
        content: "";
        position: absolute;
        left: 0.8rem;
        top: 50%;
        width: 8px;
        height: 8px;
        margin-top: -4px;
        border-radius: 50%;
        background: var(--b-line-strong);
        transition: inherit;
    }

    .steps-b__dot.is-done {
        color: var(--b-ivory);
    }

    .steps-b__dot.is-done::before {
        background: var(--b-ivory);
    }

    .steps-b__dot.is-active {
        border-color: rgba(238, 234, 224, 0.6);
        background: rgba(238, 234, 224, 0.14);
        color: var(--b-ivory);
        box-shadow: 0 0 30px -8px var(--b-signal-glow);
    }

    .steps-b__dot.is-active::before {
        background: var(--b-signal);
        box-shadow: 0 0 10px var(--b-signal);
    }

    .steps-b.is-enhanced .steps-b__stage {
        display: grid;
        min-height: min(56vh, 520px);
    }

    .steps-b.is-enhanced .step {
        grid-area: 1 / 1;
        padding: 0;
        border: 0;
        opacity: 0;
        visibility: hidden;
        transform: translate3d(0, 40px, 0) scale(0.98);
        filter: blur(10px);
        transition: opacity 0.7s var(--b-ease), transform 0.9s var(--b-ease), filter 0.7s var(--b-ease), visibility 0s 0.7s;
    }

    .steps-b.is-enhanced .step.is-done {
        transform: translate3d(0, -40px, 0) scale(0.98);
    }

    .steps-b.is-enhanced .step.is-active {
        opacity: 1;
        visibility: visible;
        transform: none;
        filter: none;
        transition-delay: 0.1s, 0.1s, 0.1s, 0s;
    }
}


/* ----------------------------------------------------------
   MINI INTERFACES IN THE STEPS (pure CSS, decoration only)
   They play when their step is active (or always without JS).
---------------------------------------------------------- */

.ui-bar {
    display: block;
    height: 9px;
    width: 80%;
    border-radius: 9px;
    background: rgba(238, 234, 224, 0.16);
}

.ui-bar--mid { width: 60%; }
.ui-bar--short { width: 40%; }

.step:not(.is-active) .step__ui *,
.steps-b:not(.is-enhanced) .step__ui * {
    animation-play-state: paused;
}

.steps-b:not(.is-enhanced) .step__ui * {
    animation-play-state: running;
}

/* 1 IDEA: bulb + notes */
.ui-idea__bulb {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70px;
    height: 70px;
    margin: -35px 0 0 -35px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFFFFF, var(--b-signal) 60%);
    box-shadow: 0 0 60px 10px var(--b-signal-glow);
    animation: bulb 2.4s ease-in-out infinite;
}

@keyframes bulb {
    50% { transform: scale(1.12); box-shadow: 0 0 90px 24px var(--b-signal-glow); }
}

.ui-note {
    position: absolute;
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    background: var(--b-ivory);
    color: var(--b-night);
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.8);
    animation: note-in 0.8s var(--b-ease) both, float 5s ease-in-out infinite;
}

.ui-note--1 { left: 10%; top: 16%; rotate: -6deg; animation-delay: 0.2s, 1s; }
.ui-note--2 { right: 10%; top: 30%; rotate: 5deg; animation-delay: 0.45s, 1.4s; }
.ui-note--3 { left: 22%; bottom: 14%; rotate: 3deg; animation-delay: 0.7s, 1.8s; }

@keyframes note-in {
    from { opacity: 0; transform: translateY(20px) scale(0.8); }
}

@keyframes float {
    50% { translate: 0 -8px; }
}

/* 2 JOURNEY: nodes connected by a running line */
.ui-journey {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 1.5rem;
}

.ui-journey__node {
    padding: 0.7rem 1.2rem;
    border: 1px solid var(--b-line-strong);
    border-radius: 999px;
    background: rgba(238, 234, 224, 0.06);
    font-weight: 700;
    font-size: 0.9rem;
    animation: note-in 0.7s var(--b-ease) both;
}

.ui-journey__node:nth-child(3) { animation-delay: 0.5s; }
.ui-journey__node:nth-child(5) { animation-delay: 1s; }

.ui-journey__node--goal {
    border-color: var(--b-signal);
    background: var(--b-signal);
    color: var(--b-night);
    box-shadow: 0 0 40px -6px var(--b-signal-glow);
}

.ui-journey__line {
    position: relative;
    width: 2px;
    height: 46px;
    background: var(--b-line-strong);
    overflow: hidden;
}

.ui-journey__line::after {
    content: "";
    position: absolute;
    left: 0;
    top: -20px;
    width: 2px;
    height: 20px;
    background: var(--b-signal);
    box-shadow: 0 0 8px var(--b-signal);
    animation: travel 1.4s linear infinite;
}

@keyframes travel {
    to { transform: translateY(66px); }
}

/* 3 AD: an ad that builds itself */
.ui-ad {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: min(260px, 80%);
    margin: 1.5rem auto;
    padding: 1rem;
    border-radius: 16px;
    background: rgba(238, 234, 224, 0.06);
    border: 1px solid var(--b-line);
}

.ui-ad > * {
    animation: note-in 0.6s var(--b-ease) both;
}

.ui-ad > *:nth-child(2) { animation-delay: 0.25s; }
.ui-ad > *:nth-child(3) { animation-delay: 0.5s; }
.ui-ad > *:nth-child(4) { animation-delay: 0.65s; }
.ui-ad > *:nth-child(5) { animation-delay: 0.9s; }

.ui-ad__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ui-ad__avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--b-signal);
}

.ui-ad__image {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(238, 234, 224, 0.9), rgba(238, 234, 224, 0.2)),
        repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0 8px, transparent 8px 16px);
}

.ui-ad__cta {
    align-self: flex-start;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: var(--b-ivory);
    color: var(--b-night);
    font-weight: 700;
    font-size: 0.78rem;
    animation: note-in 0.6s var(--b-ease) 0.9s both, pulse 2s ease-in-out 1.6s infinite !important;
}

@keyframes pulse {
    50% { box-shadow: 0 0 0 8px rgba(238, 234, 224, 0.12); }
}

/* 4 FLOW: workflow with a human check */
.ui-flow {
    display: grid;
    align-content: space-between;
    padding: 1.6rem 2rem;
}

.ui-flow__node {
    position: relative;
    z-index: 1;
    justify-self: start;
    padding: 0.6rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--b-line-strong);
    background: var(--b-night-2);
    font-weight: 700;
    font-size: 0.85rem;
    animation: note-in 0.6s var(--b-ease) both;
}

.ui-flow__node:nth-child(2) { justify-self: end; animation-delay: 0.4s; }
.ui-flow__node:nth-child(3) { animation-delay: 0.8s; }

.ui-flow__node--human {
    border-color: var(--b-signal);
    color: var(--b-signal-soft);
    box-shadow: 0 0 30px -10px var(--b-signal-glow);
}

.ui-flow__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--b-signal);
    stroke-width: 1.5;
    stroke-dasharray: 6 8;
    animation: dash 1.2s linear infinite;
}

@keyframes dash {
    to { stroke-dashoffset: -28; }
}

/* 5 LIVE: browser window + switch */
.ui-live {
    display: grid;
    place-items: center;
    gap: 1.4rem;
    padding: 1.5rem;
}

.ui-live__window {
    display: grid;
    gap: 0.6rem;
    width: min(280px, 85%);
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--b-line);
    background: rgba(238, 234, 224, 0.05);
}

.ui-live__dots {
    display: flex;
    gap: 5px;
}

.ui-live__dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--b-line-strong);
}

.ui-live__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ui-live__switch {
    position: relative;
    width: 54px;
    height: 30px;
    border-radius: 30px;
    background: var(--b-line-strong);
    animation: switch-bg 0.4s ease 0.8s forwards;
}

.ui-live__switch::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--b-ivory);
    animation: switch-knob 0.4s var(--b-ease) 0.8s forwards;
}

@keyframes switch-bg {
    to { background: var(--b-signal); box-shadow: 0 0 30px -4px var(--b-signal-glow); }
}

@keyframes switch-knob {
    to { transform: translateX(24px); }
}

/* 6 CHART: bars grow, the winner glows (no numbers) */
.ui-chart {
    height: 260px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 2rem 2.6rem;
}

.ui-chart__bar {
    position: relative;
    width: 44px;
    height: var(--h);
    border-radius: 10px 10px 4px 4px;
    background: rgba(238, 234, 224, 0.18);
    transform-origin: bottom;
    animation: grow 1s var(--b-ease) both;
}

.ui-chart__bar:nth-child(1) { --h: 38%; }
.ui-chart__bar:nth-child(2) { --h: 62%; animation-delay: 0.15s; }
.ui-chart__bar:nth-child(3) { --h: 88%; animation-delay: 0.3s; }
.ui-chart__bar:nth-child(4) { --h: 51%; animation-delay: 0.45s; }

.ui-chart__bar--win {
    background: linear-gradient(180deg, var(--b-signal), #B8B2A4);
    box-shadow: 0 0 40px -6px var(--b-signal-glow);
}

.ui-chart__bar em {
    position: absolute;
    bottom: -1.6rem;
    left: 0;
    right: 0;
    font-style: normal;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    color: var(--b-muted);
}

@keyframes grow {
    from { transform: scaleY(0); }
}

/* replay the animations whenever a step becomes active */
.steps-b.is-enhanced .step:not(.is-active) .step__ui * {
    animation: none;
}


/* ----------------------------------------------------------
   STORY  (photo opens as a circle)
---------------------------------------------------------- */

.story-b {
    position: relative;
}

.story-b__sticky {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

.story-b__photo {
    position: absolute;
    inset: 0;
    clip-path: circle(calc(14% + var(--p, 1) * 80%) at 72% 50%);
}

.story-b__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8, 8, 8, 0.92) 10%, rgba(8, 8, 8, 0.45) 55%, rgba(8, 8, 8, 0.2));
}

.story-b__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(calc(1.25 - var(--p, 1) * 0.25));
}

.story-b__copy {
    position: relative;
    display: grid;
    gap: 1.5rem;
    justify-items: start;
    padding-block: 6rem;
}

.story-b__title .outline {
    -webkit-text-stroke-color: rgba(238, 234, 224, 0.75);
}

@media (prefers-reduced-motion: no-preference) {
    .js .story-b {
        height: 220vh;
    }

    .js .story-b__sticky {
        position: sticky;
        top: 0;
        height: 100vh;
    }
}


/* ----------------------------------------------------------
   NEWS
---------------------------------------------------------- */

.news-b {
    padding-top: clamp(3rem, 2rem + 4vw, 6rem);
}

.news-b__head {
    display: grid;
    gap: 2rem;
    align-items: end;
    margin-bottom: 3rem;
}

.news-b__head .h2 {
    margin-top: 1rem;
}

.news-b__anchor {
    height: clamp(140px, 16vw, 220px);
}

.news-b__all {
    margin-top: 2.5rem;
}

@media (min-width: 980px) {
    .news-b__head {
        grid-template-columns: 1fr 1fr;
    }
}

.b-news-grid {
    display: grid;
    gap: 1rem;
}

.b-news {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 300px;
    padding: 1.8rem;
    border: 1px solid var(--b-line);
    border-radius: var(--b-radius);
    background: linear-gradient(160deg, rgba(238, 234, 224, 0.06), rgba(238, 234, 224, 0.015));
    backdrop-filter: blur(14px);
    transition: border-color 0.4s ease, transform 0.6s var(--b-ease), background-color 0.4s ease;
}

.b-news:hover {
    border-color: rgba(238, 234, 224, 0.5);
    transform: translateY(-6px);
}

.b-news__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--b-muted);
}

.b-news__title {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.2;
}

.b-news__text {
    color: var(--b-muted);
    line-height: 1.55;
}

.b-news .arrow-link {
    margin-top: auto;
}

@media (min-width: 900px) {
    .b-news-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ----------------------------------------------------------
   HERO WORD SWITCH  ("Kunden." <-> "Bewerber.")
   Both words share one grid cell; the block is as wide as the
   longer word. Screen readers read the h1 data-label instead.
---------------------------------------------------------- */

.hero-b__rotator {
    display: inline-grid;
    overflow: hidden;
    vertical-align: top;
}

.hero-b__word {
    grid-area: 1 / 1;
    justify-self: start;
}

/* the ivory block sits on each word, so it is always as wide as the visible word */
.hero-b__line--signal.hero-b__rotator {
    margin-top: 0;
    padding: 0;
    background: none;
    box-shadow: none;
}

.hero-b__rotator .hero-b__word {
    margin-top: 0.06em;
    padding: 0.06em 0.12em 0;
    background: var(--b-ivory);
}

.hero-b__word:nth-child(2) {
    visibility: hidden;   /* without motion: only "Kunden." */
}

@media (prefers-reduced-motion: no-preference) {
    .hero-b__word {
        animation: word-cycle 7s var(--b-ease-in-out) 2.4s infinite both;
    }

    .hero-b__word:nth-child(2) {
        visibility: visible;
        animation-delay: 5.9s;
    }
}

@keyframes word-cycle {
    0% { transform: translate3d(0, 120%, 0); }
    7%, 46% { transform: none; }
    53%, 100% { transform: translate3d(0, -120%, 0); }
}

/* first word starts visible (before its first cycle) */
.hero-b__word:first-child {
    animation-fill-mode: backwards;
}

@media (max-width: 600px) {
    .hero-b__claim {
        font-size: min(clamp(3rem, 0.8rem + 6.4vw, 8.4rem), 10.6vw);
    }
}


/* ----------------------------------------------------------
   GOALS  (switch: Kunden | Mitarbeiter)
---------------------------------------------------------- */

.goals-b__head {
    display: grid;
    gap: 2rem;
    align-items: end;
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.goals-b__head .h2 {
    margin-top: 1rem;
}

.goals-b__switch {
    position: relative;
    display: none;    /* shown when the script runs */
    grid-template-columns: 1fr 1fr;
    justify-self: start;
    padding: 0.4rem;
    border: 1px solid var(--b-line-strong);
    border-radius: 999px;
    background: rgba(238, 234, 224, 0.05);
    backdrop-filter: blur(12px);
}

.goals-b.is-enhanced .goals-b__switch {
    display: grid;
}

.goals-b__tab {
    position: relative;
    z-index: 1;
    min-width: 9.5rem;
    padding: 0.95rem 1.6rem;
    border-radius: 999px;
    font-size: 1.05rem;
    font-weight: 800;
    font-stretch: 108%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--b-muted);
    transition: color 0.45s var(--b-ease);
}

.goals-b__tab[aria-selected="true"] {
    color: var(--b-night);
}

.goals-b__knob {
    position: absolute;
    top: 0.4rem;
    bottom: 0.4rem;
    left: 0.4rem;
    width: calc(50% - 0.4rem);
    border-radius: 999px;
    background: var(--b-ivory);
    box-shadow: 0 0 40px -6px rgba(238, 234, 224, 0.5);
    transition: transform 0.6s var(--b-ease);
}

.goals-b[data-goal-active="team"] .goals-b__knob {
    transform: translateX(100%);
}

.goals-b__stage {
    display: grid;
    gap: 1.5rem;
    align-items: center;
}

.goals-b__anchor {
    height: clamp(160px, 22vw, 340px);
}

.goal {
    display: grid;
    gap: 1.2rem;
    padding: clamp(1.6rem, 1.2rem + 2vw, 3rem);
}

.goals-b.is-enhanced .goal:not([hidden]) {
    animation: goal-in 0.8s var(--b-ease) both;
}

@keyframes goal-in {
    from { opacity: 0; transform: translate3d(0, 24px, 0); filter: blur(8px); }
}

.goal__label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--b-muted);
}

.goal__title {
    font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.4rem);
    font-weight: 850;
    font-stretch: 110%;
    line-height: 0.98;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

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

.goal__list li {
    position: relative;
    padding-left: 1.6rem;
    line-height: 1.5;
}

.goal__list li::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--b-ivory);
}

.goal__examples {
    color: var(--b-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.goal__examples a {
    color: var(--b-ivory);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: rgba(238, 234, 224, 0.4);
}

.goal .btn {
    justify-self: start;
}

@media (min-width: 980px) {
    .goals-b__head {
        grid-template-columns: 1fr auto;
    }

    .goals-b__stage {
        grid-template-columns: 1fr 1.15fr;
    }

    .goals-b.is-enhanced .goals-b__stage .goal {
        grid-column: 2;
        grid-row: 1;
    }
}

/* --- from styles/bold/pages.css --- */
/* ==========================================================
   BOLD INNER PAGES  (about, services, portfolio, news, contact, 404)
   HTML: /frontend/variants/bold/pages/*.html
========================================================== */


/* ----------------------------------------------------------
   GENERIC PAGE HERO
---------------------------------------------------------- */

.page-b {
    position: relative;
    padding: clamp(9rem, 7rem + 6vw, 13rem) 0 clamp(3rem, 2rem + 4vw, 6rem);
}

.page-b__inner {
    display: grid;
    gap: 1.6rem;
    justify-items: start;
}

.page-b__inner--split {
    align-items: center;
}

.page-b__title {
    font-size: clamp(3rem, 0.8rem + 6.4vw, 8.6rem);
}

.page-b__anchor {
    width: 100%;
    height: clamp(220px, 32vw, 460px);
}

.page-b--center {
    display: flex;
    align-items: center;
    min-height: 100svh;
}

.page-b--center .page-b__inner {
    justify-items: center;
    text-align: center;
}

.page-b__anchor--wide {
    width: min(100%, 900px);
    height: clamp(180px, 26vw, 360px);
}

@media (min-width: 980px) {
    .page-b__inner--split {
        grid-template-columns: 1.4fr 1fr;
    }
}

/* Photo panel with parallax (background image, no caption) */
.panel-b {
    position: relative;
    height: clamp(260px, 42vw, 560px);
    margin-top: clamp(2.5rem, 2rem + 3vw, 5rem);
    border: 1px solid var(--b-line);
    border-radius: var(--b-radius);
    overflow: hidden;
}

.panel-b__image {
    position: absolute;
    inset: -12% 0;
}

.panel-b__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.08) brightness(0.75);
}

.panel-b__image--moose img {
    object-position: 70% 40%;
}

.panel-b::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(8, 8, 8, 0.75));
}

.panel-b__anchor {
    position: absolute;
    inset: 10% 20%;
    z-index: 1;
}


/* ----------------------------------------------------------
   ABOUT
---------------------------------------------------------- */

.about-b {
    position: relative;
    padding: clamp(8rem, 6rem + 5vw, 11rem) 0 4rem;
}

.about-b__inner {
    display: grid;
    gap: 3rem;
    align-items: center;
}

.about-b__copy {
    display: grid;
    gap: 1.5rem;
    justify-items: start;
}

.about-b__title {
    font-size: clamp(3rem, 0.8rem + 6.6vw, 8.8rem);
}

.about-b__more {
    max-width: 38rem;
    line-height: 1.65;
}

.about-b__figure {
    margin: 0;
}

.about-b__portrait {
    position: relative;
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-radius: 50% 50% var(--b-radius) var(--b-radius);
    background: radial-gradient(circle at 50% 35%, rgba(238, 234, 224, 0.12), transparent 65%);
    border: 1px solid var(--b-line);
    overflow: hidden;
}

.about-b__portrait img {
    width: 92%;
    height: auto;
    filter: grayscale(1) contrast(1.05);
}

@media (min-width: 980px) {
    .about-b__inner {
        grid-template-columns: 1.3fr 1fr;
    }
}

/* STATEMENT: words light up (scripts/bold/scrub.js) */
.statement-b {
    position: relative;
}

.statement-b__sticky {
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding-block: 5rem;
}

.statement-b__title {
    margin: 1rem 0 2.5rem;
}

.statement-b__text {
    max-width: 22ch;
    font-size: clamp(2rem, 1rem + 3.4vw, 4.6rem);
    font-weight: 700;
    font-stretch: 104%;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.statement-b__text.is-scrubbing .scrub-word {
    color: rgba(238, 234, 224, 0.14);
    transition: color 0.35s ease, text-shadow 0.35s ease;
}

.statement-b__text.is-scrubbing .scrub-word.is-lit {
    color: var(--b-ivory);
    text-shadow: 0 0 40px rgba(238, 234, 224, 0.25);
}

@media (prefers-reduced-motion: no-preference) {
    .js .statement-b {
        height: 260vh;
    }

    .js .statement-b__sticky {
        position: sticky;
        top: 0;
        height: 100vh;
    }
}

/* VALUES */
.values-b__grid {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

.values-b__cards {
    display: grid;
    gap: 1rem;
}

.value-card {
    display: grid;
    gap: 0.9rem;
    padding: 2rem;
}

.value-card__number {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--b-muted);
}

.values-b__note {
    padding: 0 0.5rem;
    line-height: 1.6;
}

.values-b__figure {
    margin: 0;
}

.values-b__frame {
    border-radius: var(--b-radius);
    overflow: hidden;
    border: 1px solid var(--b-line);
}

.values-b__frame img {
    width: 100%;
    height: auto;
    filter: grayscale(1) contrast(1.05);
    transition: filter 1s ease;
}

.values-b__figure:hover .values-b__frame img {
    filter: none;
}

@media (min-width: 980px) {
    .values-b__grid {
        grid-template-columns: 1fr 1.1fr;
    }
}

/* STORY TEXT */
.story-text-b__anchor {
    height: clamp(120px, 14vw, 200px);
    margin-bottom: 2rem;
}

.story-text-b__grid {
    display: grid;
    gap: 2.5rem;
}

.story-text-b__grid .h2 {
    margin-top: 1rem;
}

.story-text-b__text {
    display: grid;
    gap: 1.2rem;
    color: var(--b-muted);
    line-height: 1.7;
}

@media (min-width: 980px) {
    .story-text-b__grid {
        grid-template-columns: 1fr 1.1fr;
    }
}

/* PROCESS (detailed) */
.process-b__grid {
    display: grid;
    gap: 3rem;
}

.process-b__sticky {
    display: grid;
    gap: 1.2rem;
}

.process-b__anchor {
    height: clamp(200px, 22vw, 320px);
}

.process-b__list {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

.process-card {
    display: grid;
    gap: 1rem;
    padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.6rem);
    color: var(--b-muted);
    line-height: 1.65;
}

.process-card__number {
    font-size: clamp(3.5rem, 2.5rem + 3vw, 6rem);
    font-weight: 900;
    font-stretch: 122%;
    line-height: 0.85;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(238, 234, 224, 0.45);
}

.process-card__title {
    font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem);
    font-weight: 850;
    font-stretch: 110%;
    line-height: 1;
    text-transform: uppercase;
    color: var(--b-ivory);
}

@media (min-width: 980px) {
    .process-b__grid {
        grid-template-columns: 0.9fr 1.3fr;
        align-items: start;
    }

    .process-b__sticky {
        position: sticky;
        top: 8rem;
    }
}

.promise-b {
    display: grid;
    gap: 1.5rem;
    margin-top: clamp(4rem, 3rem + 5vw, 8rem);
    padding-top: 3rem;
    border-top: 1px solid var(--b-line);
}

.promise-b__title {
    max-width: 24ch;
    font-size: clamp(2rem, 1.2rem + 3vw, 4rem);
    font-weight: 800;
    font-stretch: 106%;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

/* JOURNEY */
.journey-b__head {
    display: grid;
    gap: 2rem;
    align-items: end;
    margin-bottom: 3rem;
}

.journey-b__head .h2 {
    margin-top: 1rem;
}

.journey-b__anchor {
    height: clamp(160px, 18vw, 260px);
}

@media (min-width: 980px) {
    .journey-b__head {
        grid-template-columns: 1.3fr 1fr;
    }
}


/* ----------------------------------------------------------
   SERVICES PAGE
---------------------------------------------------------- */

.packages-b__title {
    margin: 1rem 0 3rem;
}

.b-packages {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

.b-package {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
}

.b-package__number {
    font-size: 3.6rem;
    font-weight: 900;
    font-stretch: 122%;
    line-height: 0.85;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(238, 234, 224, 0.4);
}

.b-package__name {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
    font-weight: 850;
    font-stretch: 108%;
    line-height: 1.05;
    text-transform: uppercase;
}

.b-package__summary {
    color: var(--b-muted);
    line-height: 1.6;
}

.b-package__list {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.93rem;
}

.b-package__list li {
    position: relative;
    padding-left: 1.4rem;
}

.b-package__list li::before {
    content: "";
    position: absolute;
    left: 0.1rem;
    top: 0.5em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--b-ivory);
}

.b-package__price {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--b-line);
    font-weight: 700;
}

.b-package__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
}

@media (min-width: 760px) {
    .b-packages { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1180px) {
    .b-packages { grid-template-columns: repeat(3, 1fr); }
}

/* HOW WE START */
.start-b__steps {
    position: relative;
    display: grid;
    gap: 2.5rem;
    margin: 3rem 0 0;
    padding: 0;
}

.start-b__line {
    position: absolute;
    left: 0;
    right: 0;
    top: 1.4rem;
    height: 1px;
    background: var(--b-line);
    display: none;
}

.start-b__line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--b-ivory);
    box-shadow: 0 0 12px rgba(238, 234, 224, 0.6);
    transform-origin: left;
    transform: scaleX(var(--p, 1));
}

.start-b__step {
    position: relative;
    display: grid;
    gap: 0.8rem;
}

.start-b__number {
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: var(--b-ivory);
    color: var(--b-night);
    font-weight: 800;
    font-size: 0.9rem;
    box-shadow: 0 0 0 8px var(--b-night), 0 0 30px rgba(238, 234, 224, 0.3);
}

@media (min-width: 900px) {
    .start-b__steps { grid-template-columns: repeat(3, 1fr); }
    .start-b__line { display: block; }
}


/* ----------------------------------------------------------
   PORTFOLIO LIST (hover preview)
---------------------------------------------------------- */

.worklist {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--b-line);
}

.worklist__item {
    border-bottom: 1px solid var(--b-line);
}

.worklist__link {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1.4rem;
    align-items: center;
    padding: clamp(1.4rem, 1rem + 1.5vw, 2.4rem) 0;
    transition: padding 0.6s var(--b-ease), color 0.4s ease;
}

.worklist__number {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--b-muted);
}

.worklist__title {
    font-size: clamp(1.8rem, 1rem + 2.6vw, 3.9rem);
    font-weight: 850;
    font-stretch: 112%;
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    transition: transform 0.6s var(--b-ease), -webkit-text-stroke 0.4s ease, color 0.4s ease;
}

.worklist__meta {
    grid-column: 2;
    color: var(--b-muted);
    font-size: 0.9rem;
}

.worklist__link .chip {
    grid-column: 2;
    justify-self: start;
}

.worklist__preview {
    position: absolute;
    right: 0;
    top: 50%;
    width: clamp(180px, 18vw, 280px);
    opacity: 0;
    transform: translate3d(0, -45%, 0) rotate(4deg) scale(0.85);
    transition: opacity 0.5s var(--b-ease), transform 0.7s var(--b-ease);
    pointer-events: none;
    z-index: 2;
}

.worklist__preview img {
    width: 100%;
    height: auto;
    border-radius: var(--b-radius-small);
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--b-line);
}

.worklist__link:hover .worklist__title,
.worklist__link:focus-visible .worklist__title {
    transform: translateX(1.2rem);
    color: transparent;
    -webkit-text-stroke: 1.5px var(--b-ivory);
}

.worklist__link:hover .worklist__preview,
.worklist__link:focus-visible .worklist__preview {
    opacity: 1;
    transform: translate3d(0, -50%, 0) rotate(-3deg) scale(1);
}

@media (min-width: 900px) {
    .worklist__link {
        grid-template-columns: 4rem minmax(0, 1.7fr) minmax(0, 1fr) auto;
    }

    .worklist__meta,
    .worklist__link .chip {
        grid-column: auto;
    }

    .worklist__preview {
        right: 14%;
    }
}

@media (hover: none) {
    .worklist__preview {
        display: none;
    }
}


/* ----------------------------------------------------------
   CONTACT
---------------------------------------------------------- */

.contact-b {
    position: relative;
    padding: clamp(8rem, 6rem + 5vw, 11rem) 0 clamp(4rem, 3rem + 4vw, 7rem);
}

.contact-b__inner {
    display: grid;
    gap: 3rem;
    align-items: start;
}

.contact-b__intro {
    display: grid;
    gap: 1.5rem;
}

.contact-b__title {
    font-size: clamp(2.8rem, 0.8rem + 5.6vw, 7.4rem);
}

.contact-b__anchor {
    height: clamp(140px, 14vw, 220px);
}

.contact-b__form {
    padding: clamp(1.5rem, 1rem + 2vw, 2.8rem);
}

.contact-b .contact-details {
    display: grid;
    gap: 1.2rem;
}

.contact-b .contact-details a {
    font-weight: 600;
}

@media (min-width: 980px) {
    .contact-b__inner {
        grid-template-columns: 1fr 1fr;
    }

    .contact-b__form {
        position: sticky;
        top: 7rem;
    }
}


/* ----------------------------------------------------------
   NEWS LIST
---------------------------------------------------------- */

.news-list-b {
    padding-top: 0;
}


/* ----------------------------------------------------------
   PACKAGE EXAMPLE SCREENSHOTS
---------------------------------------------------------- */

.b-package__example {
    margin: 0;
}

.b-package__example img {
    width: 100%;
    height: auto;
    border-radius: var(--b-radius-small);
    border: 1px solid var(--b-line);
}

.service-example-b__figure {
    margin: 2.5rem 0 0;
}

.service-example-b__frame {
    display: block;
    overflow: hidden;
    border: 1px solid var(--b-line-strong);
    border-radius: var(--b-radius);
    background: var(--b-night-2);
    box-shadow: 0 50px 120px -50px rgba(0, 0, 0, 0.9), 0 0 80px -40px rgba(238, 234, 224, 0.25);
}

.service-example-b__bar {
    display: flex;
    gap: 6px;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--b-line);
}

.service-example-b__bar i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--b-line-strong);
}

.service-example-b__frame img {
    display: block;
    width: 100%;
    height: auto;
}


/* ----------------------------------------------------------
   SCRUB GALLERY  (portfolio graphics follow the mouse)
   scripts/bold/scrub-gallery.js. Graphics are never cropped
   (object-fit: contain on a dark stage).
---------------------------------------------------------- */

.scrub-gallery {
    margin: 0;
}

.scrub-gallery__stage {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid var(--b-line);
    border-radius: var(--b-radius-small);
    background:
        radial-gradient(circle at 50% 40%, rgba(238, 234, 224, 0.08), transparent 70%),
        var(--b-night-2);
    cursor: ew-resize;
}

.scrub-gallery__image {
    position: absolute;
    inset: 6% 6% 14%;
    width: 88%;
    height: 80%;
    object-fit: contain;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.25s ease, transform 0.4s var(--b-ease);
}

.scrub-gallery__image.is-active {
    opacity: 1;
    transform: none;
}

.scrub-gallery__meta {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 5.5%;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--b-ivory);
}

.scrub-gallery__meta [data-scrub-count] {
    color: var(--b-muted);
    font-variant-numeric: tabular-nums;
}

.scrub-gallery__bar {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 3.5%;
    height: 2px;
    background: var(--b-line);
}

.scrub-gallery__bar span {
    display: block;
    height: 100%;
    background: var(--b-ivory);
    transition: width 0.25s ease;
}

.scrub-gallery--large .scrub-gallery__stage {
    aspect-ratio: 16 / 10;
}

.service-example-b__scrub {
    max-width: 980px;
    margin-top: 2.5rem;
}

@media (max-width: 700px) {
    .scrub-gallery--large .scrub-gallery__stage {
        aspect-ratio: 4 / 5;
    }
}

/* --- from styles/bold/shared.css --- */
/* ==========================================================
   BOLD LOOK FOR SHARED PAGES
   Project, news article and package pages use the templates of
   the normal website. These rules give them the bold look.
========================================================== */

/* BUTTONS of the shared pages: ivory pills with black text */
.bold .button {
    border-radius: 999px;
}

.bold .button--primary,
.bold .button--primary:hover,
.bold .button--primary:focus-visible {
    background-color: var(--b-ivory);
    color: var(--b-night);
}

.bold .button--ghost {
    border-color: var(--b-line-strong);
    color: var(--b-ivory);
}

.bold .button--ghost:hover,
.bold .button--ghost:focus-visible {
    background-color: rgba(238, 234, 224, 0.1);
    color: var(--b-ivory);
}

/* FILTERS + VIEW SWITCH (creatives, funnels) */
.bold .filter-bar__button,
.bold .view-switch__button {
    border-radius: 999px;
}

.bold .filter-bar__button[aria-pressed="true"],
.bold .view-switch__button[aria-pressed="true"] {
    background-color: var(--b-ivory);
    border-color: var(--b-ivory);
    color: var(--b-night);
}

/* HEADLINES: the bold variant writes them extended and uppercase */
.bold .heading-1,
.bold .heading-2,
.bold .heading-display {
    font-weight: 800;
    font-stretch: 108%;
    letter-spacing: -0.025em;
}

.bold .heading-accent {
    font-weight: 300;
    font-stretch: 100%;
    font-style: italic;
    text-transform: none;
}

/* Section backgrounds stay transparent, the stage shows through */
.bold .theme-light,
.bold .theme-sand,
.bold .theme-dark,
.bold .theme-green {
    background-color: transparent;
}

/* Cards and boxes of the shared pages get the glass look */
.bold .project-facts,
.bold .notice,
.bold .faq details,
.bold .package,
.bold .news-card {
    border-color: var(--b-line);
}

/* PACKAGE PAGE: the "what is included" card is dark glass here */
.bold .package--detail {
    background-color: transparent;
    background-image: linear-gradient(160deg, rgba(238, 234, 224, 0.07), rgba(238, 234, 224, 0.02));
    border: 1px solid var(--b-line-strong);
    border-radius: var(--b-radius);
    backdrop-filter: blur(18px);
}

.bold .package--detail .package__name,
.bold .package--detail .package__price,
.bold .package--detail .package__list,
.bold .package--detail .package__ideal {
    color: var(--b-ivory);
}

.bold .package--detail .package__ideal {
    color: var(--b-muted);
}


/* --- from styles/flyfishing.css --- */
/* ==========================================================
   FLY FISHING BUILDING BLOCKS
   HTML: /frontend/variants/flyfishing/pages/*.html
         /frontend/variants/flyfishing/templates/course-page.html
   Colours and type come from the bold tokens (ivory and black).
========================================================== */


/* ----------------------------------------------------------
   BRAND (navigation and footer subline "Fly Fishing")
---------------------------------------------------------- */

.nav__brand-text {
    display: grid;
    line-height: 1;
}

.nav__brand-sub {
    margin-top: 0.22rem;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    opacity: 0.72;
}

.foot__brand-sub {
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0.72;
}

.foot__note {
    margin-top: 1.2rem;
    font-size: 0.85rem;
    color: var(--b-muted);
}

/* three lines of particles need a little more room */
.foot__slogan {
    height: clamp(260px, 36vw, 560px);
}


/* ----------------------------------------------------------
   HERO (claim in three lines, the trout forms on the right)
---------------------------------------------------------- */

/* The longest word ("FLIEGENFISCHEN.") must fit its column without breaking */
.ff-hero__claim {
    font-size: min(clamp(2rem, 0.6rem + 6vw, 7.6rem), 8.6vw);
    word-break: keep-all;
    overflow-wrap: normal;
    font-weight: 850;
    font-stretch: 112%;
    line-height: 0.9;
    letter-spacing: -0.035em;
    text-transform: uppercase;
}

.ff-hero__claim span {
    display: block;
}

@media (min-width: 980px) {
    .ff-hero__claim {
        font-size: min(4.6vw, 6.4rem);
    }
}

.ff-hero__brand {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}


/* ----------------------------------------------------------
   IMAGES WITH CAPTION
   Shown in full, never cropped. AI images need the caption "KI-illustriert".
---------------------------------------------------------- */

.ff-figure {
    display: grid;
    gap: 0.7rem;
    margin: 0;
}

.ff-figure img {
    width: 100%;
    height: auto;
    border: 1px solid var(--b-line);
    border-radius: var(--b-radius-small);
    background: var(--b-night-2);
}

/* photos in a gallery share one format, so the rows stay even */
.ff-figure {
    align-content: start;
}

.ff-figure picture {
    display: block;
}

.ff-gallery .ff-figure img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.ff-gallery--large {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

/* real photo instead of the cut-out portrait (Über Lukas) */
.about-b__portrait--photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
    filter: none;
}

.ff-figure--narrow {
    max-width: 460px;
}

.ff-gallery {
    display: grid;
    gap: clamp(1rem, 0.6rem + 1.4vw, 1.8rem);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
    margin-top: clamp(2rem, 1.4rem + 2vw, 3.4rem);
}


/* ----------------------------------------------------------
   SPLIT SECTION (text next to an image)
---------------------------------------------------------- */

.ff-split {
    display: grid;
    gap: clamp(2rem, 1.4rem + 3vw, 4.5rem);
    align-items: center;
}

.ff-split__copy {
    display: grid;
    gap: 1.3rem;
    justify-items: start;
}

.ff-split__media,
.ff-split > .ff-figure {
    width: 100%;
    max-width: 640px;
}

@media (min-width: 900px) {
    .ff-split {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }

    .ff-split--reverse .ff-split__media {
        order: 2;
    }
}


/* ----------------------------------------------------------
   STATUS NOTE ("In Vorbereitung")
---------------------------------------------------------- */

.ff-status {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--b-line-strong);
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ff-status::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--b-ivory);
    animation: ff-pulse 2.4s var(--b-ease-in-out) infinite;
}

@keyframes ff-pulse {
    50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
    .ff-status::before { animation: none; }
}


/* ----------------------------------------------------------
   CARDS (courses, products, knowledge areas)
---------------------------------------------------------- */

.ff-cards {
    display: grid;
    gap: clamp(1rem, 0.6rem + 1.4vw, 1.8rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    margin-top: clamp(2.4rem, 1.6rem + 2.4vw, 4rem);
    padding: 0;
    list-style: none;
}

.ff-card {
    display: grid;
    align-content: start;
    gap: 1rem;
    height: 100%;
    padding: clamp(1.2rem, 1rem + 0.8vw, 1.8rem);
    color: inherit;
    text-decoration: none;
}

.ff-card__image img {
    width: 100%;
    height: auto;
    border-radius: var(--b-radius-small);
}

.ff-card__title {
    font-size: var(--b-h3);
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.ff-card__text {
    color: var(--b-muted);
}

.ff-card .chip-row {
    margin-top: 0.2rem;
}

.ff-card .arrow-link {
    margin-top: auto;
    justify-self: start;
}


/* ----------------------------------------------------------
   NUMBERED TOPIC LIST (knowledge pages)
---------------------------------------------------------- */

.ff-topics {
    display: grid;
    gap: 0;
    margin-top: clamp(2.4rem, 1.6rem + 2.4vw, 4rem);
    padding: 0;
    list-style: none;
    counter-reset: ff-topic;
}

.ff-topic {
    display: grid;
    gap: 0.6rem 2rem;
    padding: clamp(1.4rem, 1rem + 1vw, 2rem) 0;
    border-top: 1px solid var(--b-line);
    counter-increment: ff-topic;
}

.ff-topic:last-child {
    border-bottom: 1px solid var(--b-line);
}

.ff-topic__title {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    font-size: var(--b-h3);
    font-weight: 750;
    line-height: 1.1;
}

.ff-topic__title::before {
    content: counter(ff-topic, decimal-leading-zero);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--b-muted);
}

.ff-topic__text {
    max-width: 62ch;
    color: var(--b-muted);
}

.ff-topic__text a {
    color: var(--b-ivory);
}

@media (min-width: 900px) {
    .ff-topic {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
    }
}


/* ----------------------------------------------------------
   COURSE PAGE (template course-page.html)
---------------------------------------------------------- */

.ff-facts {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--b-line);
    border-radius: var(--b-radius-small);
    background: var(--b-line);
}

.ff-facts div {
    display: grid;
    gap: 0.35rem;
    padding: 1.1rem 1.2rem;
    background: var(--b-night);
}

.ff-facts dt {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--b-muted);
}

.ff-facts dd {
    margin: 0;
    font-weight: 600;
}

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

.ff-list li {
    position: relative;
    padding-left: 1.6rem;
}

.ff-list li::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: 0;
    width: 0.7rem;
    height: 1px;
    background: var(--b-ivory);
}

.ff-columns {
    display: grid;
    gap: clamp(2rem, 1.4rem + 3vw, 4rem);
}

@media (min-width: 900px) {
    .ff-columns {
        grid-template-columns: 1fr 1fr;
    }
}

.ff-columns h2,
.ff-block-title {
    margin-bottom: 1.4rem;
}


/* course title next to its image; long words ("MEERFORELLENFLIEGEN")
   must fit on phones too */
.page-course .page-b .h1 {
    font-size: min(clamp(2rem, 0.8rem + 4vw, 5.2rem), 6.2vw);
    hyphens: auto;
}

@media (min-width: 900px) {
    .page-course .page-b .ff-split {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    }

    .page-course .page-b .h1 {
        font-size: min(4.2vw, 5.2rem);
    }
}

.page-course .page-b .ff-split {
    margin-block: 1.6rem clamp(2rem, 1.4rem + 2vw, 3.4rem);
}


/* ----------------------------------------------------------
   ACCORDION (course modules and questions; <details>)
---------------------------------------------------------- */

.ff-accordion {
    display: grid;
    gap: 0.8rem;
    margin-top: clamp(1.8rem, 1.2rem + 2vw, 3rem);
}

.ff-accordion details {
    border: 1px solid var(--b-line);
    border-radius: var(--b-radius-small);
    background: var(--b-panel);
}

.ff-accordion summary {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.3rem;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}

.ff-accordion summary::-webkit-details-marker {
    display: none;
}

.ff-accordion summary::after {
    content: "+";
    flex: none;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
    transition: transform 0.4s var(--b-ease);
}

.ff-accordion details[open] summary::after {
    transform: rotate(45deg);
}

.ff-accordion summary:focus-visible {
    outline: 2px solid var(--b-ivory);
    outline-offset: 2px;
    border-radius: var(--b-radius-small);
}

.ff-accordion__body {
    display: grid;
    gap: 0.8rem;
    padding: 0 1.3rem 1.3rem;
    color: var(--b-muted);
}

.ff-accordion__label {
    color: var(--b-muted);
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    margin-right: 0.6rem;
}


/* ----------------------------------------------------------
   CALL BOX (course start info instead of a newsletter)
---------------------------------------------------------- */

.ff-callbox {
    display: grid;
    gap: 1.4rem;
    justify-items: start;
    padding: clamp(1.6rem, 1.2rem + 2vw, 3.4rem);
}

@media (min-width: 900px) {
    .ff-callbox {
        grid-template-columns: 1.4fr 1fr;
        align-items: center;
    }

    .ff-callbox .btn-row {
        justify-self: end;
    }
}

.ff-small {
    font-size: 0.88rem;
    color: var(--b-muted);
}


/* ----------------------------------------------------------
   FLIES FOR SALE (/fliegen/, shop, homepage)
---------------------------------------------------------- */

.ff-fly-group + .ff-fly-group {
    margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.ff-fly-group__head {
    display: grid;
    gap: 0.6rem;
    max-width: 60ch;
}

.ff-flies {
    display: grid;
    gap: clamp(1rem, 0.6rem + 1.4vw, 1.8rem);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    margin: clamp(1.6rem, 1.2rem + 1.6vw, 2.8rem) 0 2rem;
    padding: 0;
    list-style: none;
}

.ff-fly {
    display: grid;
    align-content: start;
    gap: 0.45rem;
}

.ff-fly__figure {
    margin: 0 0 0.5rem;
}

.ff-fly__figure picture {
    display: block;
}

.ff-fly__figure img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border: 1px solid var(--b-line);
    border-radius: var(--b-radius-small);
    background: #000;
}

.ff-fly__name {
    font-weight: 700;
}

.ff-fly__text {
    color: var(--b-muted);
    font-size: 0.92rem;
}

.ff-fly__price {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}


/* ----------------------------------------------------------
   CART  (navigation icon, buttons, toast, /warenkorb/)
---------------------------------------------------------- */

.nav__cart {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-left: auto;
    border-radius: 50%;
    color: inherit;
}

.nav__cart svg {
    width: 1.35rem;
    height: 1.35rem;
}

.nav__cart:hover,
.nav__cart:focus-visible {
    background: var(--b-panel-strong);
}

.nav__cart-count {
    position: absolute;
    top: 0.1rem;
    right: 0.05rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--b-ivory);
    color: var(--b-night);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.15rem;
    text-align: center;
}

.nav__cart-count[hidden] {
    display: none;
}

.ff-add {
    justify-self: start;
    margin-top: 0.4rem;
    padding: 0.62rem 1.05rem;
    border: 1px solid var(--b-ivory);
    border-radius: 999px;
    background: transparent;
    color: var(--b-ivory);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 650;
    cursor: pointer;
    transition: background 0.3s var(--b-ease), color 0.3s var(--b-ease);
}

.ff-add:hover,
.ff-add:focus-visible {
    background: var(--b-ivory);
    color: var(--b-night);
}

.ff-cart-toast {
    position: fixed;
    left: 50%;
    bottom: 1.4rem;
    z-index: 60;
    padding: 0.8rem 1.2rem;
    border: 1px solid var(--b-line-strong);
    border-radius: 999px;
    background: var(--b-night-2);
    color: var(--b-ivory);
    font-size: 0.9rem;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 1rem);
    transition: opacity 0.35s var(--b-ease), transform 0.35s var(--b-ease);
}

.ff-cart-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.ff-cart {
    display: grid;
    gap: clamp(2rem, 1.4rem + 2vw, 3.4rem);
    margin-top: clamp(2rem, 1.4rem + 2vw, 3.4rem);
}

.ff-cart__list {
    display: grid;
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ff-cart__list:empty {
    display: none;
}

.ff-cart-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 0.9rem 1.2rem;
    align-items: center;
    padding: 0.8rem;
    border: 1px solid var(--b-line);
    border-radius: var(--b-radius-small);
    background: var(--b-panel);
}

.ff-cart-row__image {
    width: 96px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
}

.ff-cart-row__info {
    display: grid;
    gap: 0.2rem;
}

.ff-cart-row__name {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

.ff-cart-row__price {
    color: var(--b-muted);
    font-size: 0.86rem;
}

.ff-cart-row__controls {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.ff-qty {
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid var(--b-line-strong);
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 1.1rem;
    cursor: pointer;
}

.ff-qty__value {
    min-width: 2ch;
    font-weight: 700;
    text-align: center;
}

.ff-cart-row__remove {
    margin-left: auto;
    border: 0;
    background: none;
    color: var(--b-muted);
    font: inherit;
    font-size: 0.86rem;
    text-decoration: underline;
    cursor: pointer;
}

@media (min-width: 700px) {
    .ff-cart-row {
        grid-template-columns: 120px 1fr auto;
    }

    .ff-cart-row__image {
        width: 120px;
        height: 80px;
    }

    .ff-cart-row__controls {
        grid-column: auto;
    }

    .ff-cart-row__remove {
        margin-left: 0.8rem;
    }
}

.ff-order {
    display: grid;
    gap: 1.3rem;
    padding: clamp(1.4rem, 1rem + 2vw, 2.6rem);
}

.ff-order[hidden],
.ff-order__shipping[hidden] {
    display: none;
}

.ff-order__shipping {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    border: 0;
}


/* ----------------------------------------------------------
   PHOTOS  (shop tiles, mosaic, hero photo)
---------------------------------------------------------- */

.ff-tiles {
    display: grid;
    gap: clamp(1rem, 0.6rem + 1.4vw, 1.8rem);
    margin-top: clamp(2rem, 1.4rem + 2vw, 3.4rem);
}

@media (min-width: 900px) {
    .ff-tiles {
        grid-template-columns: 1fr 1fr;
    }
}

.ff-tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--b-line);
    border-radius: var(--b-radius);
    color: var(--b-ivory);
    text-decoration: none;
}

.ff-tile picture,
.ff-tile img {
    display: block;
    width: 100%;
    height: 100%;
}

.ff-tile img {
    object-fit: cover;
    transition: transform 1.2s var(--b-ease);
}

.ff-tile:hover img,
.ff-tile:focus-visible img {
    transform: scale(1.05);
}

.ff-tile__text {
    position: absolute;
    inset: auto 0 0;
    display: grid;
    gap: 0.5rem;
    padding: clamp(1.2rem, 1rem + 1.4vw, 2.2rem);
    background: linear-gradient(to top, rgba(8, 8, 8, 0.92), rgba(8, 8, 8, 0));
}

.ff-tile__title {
    font-size: clamp(1.8rem, 1rem + 2.6vw, 3.4rem);
    font-weight: 850;
    font-stretch: 112%;
    line-height: 0.95;
    text-transform: uppercase;
}

.ff-mosaic {
    display: grid;
    gap: clamp(1rem, 0.6rem + 1.4vw, 1.8rem);
    margin: clamp(2rem, 1.4rem + 2vw, 3.4rem) 0 1.6rem;
}

.ff-mosaic__item {
    display: grid;
    align-content: start;
    gap: 0.6rem;
    margin: 0;
}

.ff-mosaic__item picture {
    display: block;
}

.ff-mosaic__item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--b-radius-small);
}

@media (min-width: 900px) {
    .ff-mosaic {
        grid-template-columns: 2fr 1fr;
    }

    .ff-mosaic__item--wide img {
        aspect-ratio: 16 / 9;
    }

    .ff-mosaic__item:not(.ff-mosaic__item--wide) img {
        aspect-ratio: auto;
        height: calc(100% - 2rem);
        min-height: 100%;
    }

    .ff-mosaic__item:nth-child(3) {
        order: 4;
    }
}

.ff-hero-figure {
    display: grid;
    gap: 0.6rem;
    width: 100%;
    max-width: 560px;
    margin: 0;
    justify-self: end;
}

.ff-hero-figure picture {
    display: block;
}

.ff-hero-figure img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid var(--b-line);
    border-radius: var(--b-radius);
}


/* ----------------------------------------------------------
   WORKSHOP PAGE  (template course-page.html)
---------------------------------------------------------- */

.ff-block-tight {
    padding-top: clamp(2rem, 1rem + 3vw, 4rem);
}

.ff-prose {
    display: grid;
    gap: 1.1rem;
    max-width: 62ch;
}

.ff-agenda {
    display: grid;
    gap: clamp(2.6rem, 2rem + 3vw, 5rem);
    margin: clamp(2.4rem, 1.6rem + 2.4vw, 4rem) 0;
    padding: 0;
    list-style: none;
}

.ff-agenda__step {
    display: grid;
    gap: clamp(1.4rem, 1rem + 2vw, 3rem);
    align-items: center;
}

.ff-agenda__copy {
    display: grid;
    gap: 1rem;
    max-width: 62ch;
}

.ff-agenda__number,
.ff-pattern__number {
    font-size: clamp(2.6rem, 1.6rem + 3vw, 4.6rem);
    font-weight: 850;
    font-stretch: 112%;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--b-ivory);
}

.ff-agenda__step .ff-figure {
    max-width: 560px;
}

@media (min-width: 900px) {
    .ff-agenda__step {
        grid-template-columns: 1.1fr 0.9fr;
    }

    .ff-agenda__step:nth-child(even) .ff-figure {
        order: -1;
    }

    .ff-agenda__step--wide {
        grid-template-columns: 1fr;
    }
}

.ff-patterns .ff-figure img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.ff-booking__price {
    margin: 0.6rem 0;
    font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.8rem);
    font-weight: 850;
    font-stretch: 112%;
    line-height: 1;
}

.ff-booking__price span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--b-muted);
}

.ff-closing {
    margin-top: 1.6rem;
    text-align: center;
}

.ff-split--offer .ff-facts {
    margin: 0.4rem 0;
}

.ff-facts dd {
    font-weight: 600;
}


/* ==========================================================
   NATURAL LOOK  (photos instead of particles)
   Layout: /frontend/variants/flyfishing/components/layout.html
   Background images never get a caption.
========================================================== */

.ff-natural body {
    background: #0b0c0a;
}

/* ---------- HERO: photo slideshow (crossfade + slow zoom) ---------- */

.ff-hero-photo {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 100svh;
    padding: 9rem 0 clamp(4rem, 3rem + 4vw, 7rem);
    overflow: hidden;
    isolation: isolate;
}

.ff-slides,
.ff-slides > * {
    position: absolute;
    inset: 0;
}

.ff-slides {
    z-index: -2;
}

.ff-slides > * {
    opacity: 0;
    animation: ff-slide 35s linear infinite;
}

.ff-slides img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ff-slides > :nth-child(1) { animation-delay: -1s; }
.ff-slides > :nth-child(2) { animation-delay: 6s; }
.ff-slides > :nth-child(3) { animation-delay: 13s; }
.ff-slides > :nth-child(4) { animation-delay: 20s; }
.ff-slides > :nth-child(5) { animation-delay: 27s; }

@keyframes ff-slide {
    0% { opacity: 0; transform: scale(1.1); }
    4% { opacity: 1; }
    20% { opacity: 1; }
    25% { opacity: 0; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}

/* dark gradient so the text stays readable on every photo */
.ff-hero-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, rgba(8, 9, 7, 0.92) 0%, rgba(8, 9, 7, 0.45) 45%, rgba(8, 9, 7, 0.25) 70%, rgba(8, 9, 7, 0.6) 100%),
        linear-gradient(to right, rgba(8, 9, 7, 0.7), rgba(8, 9, 7, 0) 65%);
}

.ff-hero-photo__inner {
    display: grid;
    gap: 1.4rem;
    justify-items: start;
}

.ff-hero-photo .ff-hero__claim {
    font-size: min(clamp(2.4rem, 0.8rem + 6.4vw, 8rem), 10vw);
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}

.ff-hero-photo__lead {
    max-width: 46ch;
    color: var(--b-ivory);
}

@media (prefers-reduced-motion: reduce) {
    .ff-slides > * {
        animation: none;
    }

    .ff-slides > :first-child {
        opacity: 1;
    }
}

/* ---------- PHOTO BAND between sections (with parallax) ---------- */

.ff-band {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(420px, 70vh, 760px);
    overflow: hidden;
    isolation: isolate;
}

.ff-band__image {
    position: absolute;
    inset: -14% 0;
    z-index: -2;
}

.ff-band__image picture,
.ff-band__image img {
    display: block;
    width: 100%;
    height: 100%;
}

.ff-band__image img {
    object-fit: cover;
}

.ff-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to right, rgba(8, 9, 7, 0.78), rgba(8, 9, 7, 0.2) 75%);
}

.ff-band__inner {
    display: grid;
    gap: 1.2rem;
    justify-items: start;
}

.ff-band__text {
    max-width: 22ch;
    font-size: clamp(1.9rem, 1rem + 3vw, 4rem);
    font-weight: 800;
    font-stretch: 108%;
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

/* ---------- PAGE HEADS and FOOTER with a background photo ---------- */

.ff-page-photo,
.ff-foot-photo {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.ff-page-photo__image {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.ff-page-photo__image picture,
.ff-page-photo__image img {
    display: block;
    width: 100%;
    height: 100%;
}

.ff-page-photo__image img {
    object-fit: cover;
    animation: ff-drift 40s ease-in-out infinite alternate;
}

@keyframes ff-drift {
    from { transform: scale(1.04) translate(0, 0); }
    to { transform: scale(1.12) translate(-1.5%, -1%); }
}

@media (prefers-reduced-motion: reduce) {
    .ff-page-photo__image img { animation: none; }
}

.ff-page-photo::before,
.ff-foot-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(8, 9, 7, 0.55), rgba(8, 9, 7, 0.88) 75%, #0b0c0a);
}

.ff-foot-photo::before {
    background: linear-gradient(to bottom, #0b0c0a, rgba(8, 9, 7, 0.82) 30%, rgba(8, 9, 7, 0.7));
}

/* without particles the claim in the footer is shown as text */
.ff-natural .foot__slogan {
    height: auto;
    padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}

.ff-natural .foot__slogan-text {
    color: transparent;
    -webkit-text-stroke: 1px rgba(238, 234, 224, 0.75);
}


/* ----------------------------------------------------------
   COURSE OFFERS  (/kurse/)
---------------------------------------------------------- */

.ff-offer-group + .ff-offer-group {
    margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.ff-offer-group__title {
    margin-bottom: clamp(1.4rem, 1rem + 1.4vw, 2.4rem);
}

.ff-offers {
    display: grid;
    gap: clamp(1rem, 0.6rem + 1.4vw, 1.8rem);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.ff-offer {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
}

.ff-offer__image {
    margin: 0;
}

.ff-offer__image picture,
.ff-offer__image img {
    display: block;
    width: 100%;
}

.ff-offer__image img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.ff-offer__body {
    display: grid;
    align-content: start;
    gap: 0.8rem;
    padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
}

.ff-offer__body .chip-row {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ff-offer__price {
    font-size: 1.6rem;
    font-weight: 800;
}

.ff-offer__price span {
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--b-muted);
}

.ff-offer .ff-add {
    text-decoration: none;
}


/* Call to action card in a page head (e.g. workshop on /fliegenbinden/) */
.ff-cta-card {
    display: grid;
    gap: 0.9rem;
    max-width: 460px;
    padding: clamp(1.3rem, 1rem + 1.4vw, 2.2rem);
    background: rgba(11, 12, 10, 0.72);
    backdrop-filter: blur(10px);
}

@media (min-width: 980px) {
    .ff-cta-card {
        justify-self: end;
    }
}

/* price levels of an offer (1 person / 2 to 3 persons) */
.ff-variants {
    display: grid;
    gap: 0;
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--b-line);
}

.ff-variant {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.3rem 1rem;
    align-items: center;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--b-line);
}

.ff-variant__label {
    font-weight: 600;
}

.ff-variant .ff-offer__price {
    grid-column: 1;
}

.ff-variant .ff-add {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
}

/* about page main photo: keep Lukas in the frame */
.about-b__portrait img.about-b__img--cast {
    object-position: 68% 50%;
}