/* ============================================================
   cube one GmbH – Premium Website Stylesheet
   Design System: Dark Professional · Life Science B2B
   change log: 09.09.2026 – Thomas Schäfer – Cookie banner body widened so the
               named Analytics and Clarity processors stay readable.
   change log: 07.09.2026 – Thomas Schäfer – Lightened site-wide text tokens
               (--text-primary/secondary/muted) and removed opacity washes on
               banner leads for better readability in bright rooms.
   change log: 05.09.2026 – Thomas Schäfer – Regenerated projekt-pmo hero banner (full-bleed, no black void).
   change log: 05.09.2026 – Thomas Schäfer – Footer: Products stacked under Brands column.
   change log: 05.09.2026 – Thomas Schäfer – Theme-banner hero CTAs left-aligned under the lead.
   change log: 05.09.2026 – Thomas Schäfer – Photo veils lightened again (hero 24%,
               contact band 16%) after first step was too subtle on bright motifs.
   change log: 05.09.2026 – Thomas Schäfer – Stacked sys-cube sections: halved
               gap before cube hub bridge on Softwareentwicklung.
   change log: 05.09.2026 – Thomas Schäfer – CSV layout: larger V-model column, full-width proof, left-aligned CTAs.
   change log: 05.09.2026 – Thomas Schäfer – Homepage CSV spotlight section (.csv-spotlight).
   change log: 05.09.2026 – Thomas Schäfer – Group hero photo uses the same
               center 8% focal point as the other theme banners.
   change log: 05.09.2026 – Thomas Schäfer – The about-us page joins the theme
               banner pattern: .page-hero--banner-unternehmen with a deeper
               0.63 veil, because white coats and lit brick sit right under the
               headline, plus a phone-side focal point so all three colleagues
               survive the cover crop.
   change log: 05.09.2026 – Thomas Schäfer – New .phase-track component: service
               portfolios read as a numbered sequence with the deliverable of
               each step, instead of a flat heading list.
   change log: 04.09.2026 – Thomas Schäfer – New .review-ask component for the
               feedback page: the two public review channels as equal-height,
               fully clickable cards with the accent hover of a clickable cube
               frame, plus the .page-hero--banner-feedback motif.
   change log: 04.09.2026 – Thomas Schäfer – Roster cards gain
               .roster-card__photo--pending: it keeps the 6/7 frame and shows a
               neutral outline mark while a real portrait is still missing, so
               the grid stays even without inventing a face.
   change log: 04.09.2026 – Thomas Schäfer – Footer CTA carries the same gradient
               fill and near-black label as the navigation CTA instead of a
               translucent orange wash that read as disabled, and reaches the
               44px touch height. .btn-secondary finally exists: the cube group
               brand cards used the class without any rule behind it, so those
               buttons were bare text on a dark card. Brand cards move its hover
               edge to berry and lime through --btn-edge.
   change log: 04.09.2026 – Thomas Schäfer – Article text column grows from 44rem
               to 50rem and the sidebar from 320px to 360px, with the body type
               stepping to 1.0625rem from 1280px so the line stays near 75
               characters. The centred block was leaving 216px of air per side
               against a full-width navigation.
   change log: 04.09.2026 – Thomas Schäfer – Article pages size the text column to
               the reading measure instead of capping the paragraphs inside a
               full-width track, which closes the black lane that opened between
               the copy and the sticky sidebar. The persona contact card keeps
               its portrait: the scrim covers 30% instead of 55% and ramps just
               above the label, which also lifts the label contrast from 3.3:1
               to 6.6:1.
   change log: 04.09.2026 – Thomas Schäfer – Primary buttons and the nav CTA lose
               the blue legacy cast shadow and the site-wide 4.5s pulse: warm
               shadow, shallow gradient and a lit top edge instead. The hero
               secondary CTA becomes frosted glass, and the six hero chips drop
               their permanent orange cage for dark glass with a cool hairline,
               a short accent marker and glow on hover and focus only.
   change log: 04.09.2026 – Thomas Schäfer – Every control visitors type into
               now sits on the white --field-* surface of the contact form:
               system and case-story search, the news filter select, and the
               shared placeholder tone, focus ring and 44px touch height for
               the page-local .form-field, .mf-field and .vm-field blocks.
   change log: 04.09.2026 – Thomas Schäfer – Sidebar links and hero labels are
               block, not flex: the glossary script splits their text when it
               wraps an abbreviation, and flex tore the fragments apart.
   change log: 04.09.2026 – Thomas Schäfer – Reference cube sections cap at four
               columns from 1280px up, so the 1600px container no longer opens a
               fifth track.
   change log: 02.09.2026 – Thomas Schäfer – Added the audit trail review theme
               banner modifier (background-image only).
   change log: 02.09.2026 – Thomas Schäfer – Added the digital signatures theme
               banner modifier (background-image only).
   change log: 02.09.2026 – Thomas Schäfer – Trust-bar chips drop the
               abbreviation dotted underline (.trust-badge .abbr-tip).
   change log: 01.09.2026 – Thomas Schäfer – Mega-menu column headings show
               their link affordance at rest: accent hairline under the label
               (.nav-mega-heading__label) and a chevron
               (.nav-mega-heading__arrow), plus focus ring and coarse-pointer
               target.
   change log: 31.08.2026 – Thomas Schäfer – Removed unused .footer-ai-notice
               styles after the footer AI disclaimer was dropped.
   change log: 30.08.2026 – Thomas Schäfer – Added the unique ALCOA+ theme
               banner modifier (background-image only).
   change log: 30.08.2026 – Thomas Schäfer – FAQ headers keep the plus marker at
               the right edge without spreading inline label parts.
   change log: 30.08.2026 – Thomas Schäfer – Added responsive Excel versus
               web app comparison frames and table for the validation service.
   change log: 30.08.2026 – Thomas Schäfer – ALCOA cube frames use the shared
               orange hover hairline and glow without sticky touch hover.
   change log: 30.08.2026 – Thomas Schäfer – Product dropdown entries keep their
               label on one line (.nav-dropdown-menu:not(.nav-mega) a).
   change log: 29.08.2026 – Thomas Schäfer – Added the shared abbreviation
               glass tooltip for hover, keyboard focus and touch.
   change log: 29.08.2026 – Thomas Schäfer – Added the accounting job hero motif
               .page-hero--banner-job-buchhaltung (background-image only).
   change log: 29.08.2026 – Thomas Schäfer – Career audience photo tiles keep
               their AI badge as a bottom-right chip: the blanket
               .audience-card--photo child rule no longer overrides
               .ki-badge position, which had stretched it into a full-width
               bar at the card foot (DE and EN share the rule).
   change log: 29.08.2026 – Thomas Schäfer – Banner veils are a flat wash
               again: same opacity across the frame, no darker centre core.
   change log: 29.08.2026 – Thomas Schäfer – Lightened the unified
               photo veils for bright-room viewing: narrower text cores,
               lower image-area washes and a clearer GX-1 services banner.
   change log: 29.08.2026 – Thomas Schäfer – Unified photo-hero
               veils around a localized text scrim and a light full-frame wash.
               Removed broad 0.80–0.93 blackouts from theme, contact, careers
               and cube care heroes; recalibrated homepage and CTA overlays
               plus the homepage services section for visible photo detail.
   change log: 29.08.2026 – Thomas Schäfer – Homepage hero secondary CTA
               (.hero-actions .btn-ghost) rest state now matches the consent
               reject button: --bg-card fill at 92% and a 1px --border-strong
               edge instead of the 2px near-white ring that out-shouted the
               primary CTA. Hover keeps the accent cube-frame and gains the
               documented accent glow, so the ring no longer needs extra
               border width and the button never shifts. Cube diagonal radius
               and copy unchanged; DE and EN share this rule.
   change log: 29.08.2026 – Thomas Schäfer – Homepage hero Leistungsgebiet chips
               (.hero-tags, .hero-tags .tag) step below the two primary CTAs:
               content-width flex row instead of the equal-width stretch grid,
               13px/500 type, 0.375rem 0.75rem padding, 40px min-height,
               --radius-sm and a 13.5rem chip cap. Glow, cube radius family and
               copy unchanged; .services-bento untouched.
   change log: 28.08.2026 – Thomas Schäfer – Consent bar no longer reserves
               extra right padding for the removed Microsoft chat bubble.
   change log: 28.08.2026 – Thomas Schäfer – Case-story article back control
               (.cs-back) spacing under the hero.
   change log: 28.08.2026 – Thomas Schäfer – Theme hero modifiers for
               Firmenlauf, Prokura and Vibe Marketing
               (.page-hero--banner-firmenlauf, -prokura, -vibe-marketing).
   change log: 28.08.2026 – Thomas Schäfer – Theme hero modifiers for job
               postings and two news articles (.page-hero--banner-gxp-consultant,
               -job-it-administrator, -job-projektmanager, -job-softwareentwickler,
               -ausbildung-fachinformatiker, -initiativbewerbung, -pharmacongress,
               -abteilungsmesse).
   change log: 28.08.2026 – Thomas Schäfer – Case-Stories overview: KI badge
               excluded from the .sys-cube--photo flex-content rule (it was
               forced to position: relative and floated mid-card); the badge
               now keeps its absolute bottom-right pin inside the photo frame,
               obsolete top-right override removed.
   change log: 28.08.2026 – Thomas Schäfer – Leistungen mega-menu: centered
               Netzplan lead row (.nav-mega-lead) above the six columns,
               separated by a subtle 1px border divider.
   change log: 28.08.2026 – Thomas Schäfer – Mobile nav repaired: the navbar's
               backdrop-filter made it the containing block of the fixed
               .nav-links overlay (height collapsed to 0), so the overlay now
               gets an explicit viewport height, scrolls, and the dropdown
               panels become static full-width accordion sections (single
               mega column) below 768px.
   change log: 28.08.2026 – Thomas Schäfer – Homepage presence section
               (.presence): full-width world map from the corporate deck
               (slide 6), cube diagonal radius, no crop on small viewports.
   change log: 28.08.2026 – Thomas Schäfer – Homepage hero secondary CTA
               (.hero-actions .btn-ghost) sits on a dark chip with a 2px
               near-white edge so the photo veil no longer swallows it.
   change log: 28.08.2026 – Thomas Schäfer – Homepage services bento tiles drop
               the orange rest/hover perimeter: cool 1px hairline at rest,
               slightly stronger cool edge plus a soft glow on hover/focus/
               spotlight. Permanent orange stays the short top-edge marker.
   change log: 27.08.2026 – Thomas Schäfer – Case-Stories overview (.cs-overview)
               groups programmes by the six Leistungsbereiche, uses larger
               photo cubes (2-col from 768) and a cross-section search/filter.
   change log: 27.08.2026 – Thomas Schäfer – Theme hero for Produktionsanlagen-
               Qualifizierung (.page-hero--banner-produktionsanlagen).
   change log: 27.08.2026 – Thomas Schäfer – Highlight boxes keep a gap before
               the CTA so Annex 11 / Part 11 / Grundschutz links stay readable.
   change log: 27.08.2026 – Thomas Schäfer – Homepage hero Leistungsgebiet chips
               all share the Kontakt-aufnehmen glow at rest (synced pulse, no
               sequential walk); hover/focus intensify; reduced-motion is static.
   change log: 27.08.2026 – Thomas Schäfer – Homepage hero Leistungsgebiet chips
               walk with the Kontakt-aufnehmen outer glow (0 0 18px 3px); rest
               stays dark glass plus orange hairline; pause on hover/focus.
   change log: 27.08.2026 – Thomas Schäfer – Services bento walk restored to the
               photo dim/spotlight (no CTA button pulse, overflow hidden again).
   change log: 27.08.2026 – Thomas Schäfer – Sys-cube manufacturer marks inherit
               the anthracite cube fill (transparent wells on --bg-card #161616);
               grayscale at rest, brand colour on hover/focus; invert then
               grayscale so dark wordmarks stay readable.
   change log: 27.08.2026 – Thomas Schäfer – Typographic sys-cube mark for unnamed
               GxP equipment (no invented manufacturer logo).
   change log: 27.08.2026 – Thomas Schäfer – Leistung sys-cube grids: full-width
               section headers, manufacturer marks on black (invert dark
               wordmarks), larger logos, and shared search/category filter.
   change log: 27.08.2026 – Thomas Schäfer – Contact CTA banners halved in
               height (min-height / padding tokens cut ~50%); Sie/Er crops
               retuned so heads and hair stay in the shorter window.
   change log: 26.08.2026 – Thomas Schäfer – Case-story overview tiles are photo
               cube-frames (theme stills, accent hover glow, whole-tile links).
   change log: 26.08.2026 – Thomas Schäfer – Keep people-banner heads (including
               hair) in frame: raise theme-hero focal point, stop the contact
               composite from bottom-cropping at 1536–2560, and pin CTA portraits
               on phones.
  change log: 26.08.2026 – Thomas Schäfer – Theme hero for the SYSPRO Annex 11
               case story (Canadian pharmaceutical manufacturer, site in Germany).
   change log: 27.08.2026 – Thomas Schäfer – Homepage client strip restored
               to named customer logos; unused industry-label rules removed.
   change log: 26.08.2026 – Thomas Schäfer – Wikimedia manufacturer marks on
               sys-cubes sit in a square light field (no diagonal radius on
               the trademark itself; radius stays on the card).
   change log: 26.08.2026 – Thomas Schäfer – Theme heroes for the remaining PPTX
               case stories (DI-Gap, ESSV, Ressourcenplaner, 70-PC Change Control,
               Periodic Review, Spektralphotometer, Lieferantenqualifizierung,
               Produktionsequipment).
   change log: 26.08.2026 – Thomas Schäfer – Phone CTAs drop the tall min-height
               so 16:9 split portraits are not cropped off the sides at 360×740.
   change log: 26.08.2026 – Thomas Schäfer – Dedicated 21:9 heroes for the
               LIMS, NanoDrop and CAPA case stories (no generic service reuse).
   change log: 26.08.2026 – Thomas Schäfer – Contact CTA crop raised further
               (min-height 58rem / focal point 4%) so er hair stays inside
               the frame at 2560×1440; veil opacity unchanged.
   change log: 26.08.2026 – Thomas Schäfer – People banners keep heads in
               frame (CTA + theme heroes), career audience cubes span the
               1600px container as three equal columns, homepage bento tiles
               are whole-tile links, and sys-cube reference grids share the
               homepage cube-frame hover.
   change log: 25.08.2026 – Thomas Schäfer – Audience photo-tile hover raised
               above page-local .audience-card:hover so the cube-frame uses
               full accent border + 28px glow.
   change log: 25.08.2026 – Thomas Schäfer – Legal heroes (AGB, Datenschutz,
               Impressum) plus career audience photo-tiles and a lighter jobs
               section banner; cube-frame hover on the audience cards.
   change log: 25.08.2026 – Thomas Schäfer – Homepage gap between values-duo
               and Geschäftsführung halved: .values-duo padding-bottom clamp
               halved, .team-band-section--banner padding-top clamp halved
               (homepage-only; news-page .team-band-section unchanged).
   change log: 25.08.2026 – Thomas Schäfer – Homepage gap above the client
               logo strip halved: .industries bottom padding clamp halved,
               .client-logos padding-top halved (both homepage-only).
   change log: 25.08.2026 – Thomas Schäfer – Homepage hero Leistungsgebiet
               chips (.hero-tags .tag) rest as dark glass with a visible
               orange hairline; the 1.5s walk and hover/focus-visible use the
               Kontakt-aufnehmen outer glow (0 0 18px 3px rgba(249,115,22,0.45)).
   change log: 25.08.2026 – Thomas Schäfer – Homepage hero Leistungsgebiet
               chips (.hero-tags .tag) rest on a muted border-strong frame
               with --radius-sm, light orange on hover/focus-visible, and a
               1.5s CSS walk (9s cycle).
   change log: 25.08.2026 – Thomas Schäfer – Homepage cube frames (product
               cards, hub pillars, news teasers, contact card/form) get the
               values-duo orange hover glow; cube hub cards use lime.
   change log: 25.08.2026 – Thomas Schäfer – Homepage industry frames
               (.industry-frame) light orange on hover and focus-within,
               matching the values-duo cube-frame hover.
   change log: 25.08.2026 – Thomas Schäfer – Homepage management banner
               (.team-band-section--banner .team-band) keeps the 1240px width
               cap and centres it so the photo and name row share one box on
               1920/2560 viewports.
   change log: 24.08.2026 – Thomas Schäfer – Values-duo cube frames carry a
               claim on the top edge and light orange on hover and focus-within.
  change log: 25.08.2026 – Thomas Schäfer – Client logo strip auto-cycles the
               grayscale-to-color hover reveal, one logo per 1.5 seconds.
   change log: 24.08.2026 – Thomas Schäfer – Contact form status line for SMTP
               send errors (.form-status.is-error / .is-success).
   change log: 24.08.2026 – Thomas Schäfer – Products banner veil lightened: dark
               core only behind the centered header text (AA verified), light wash
               over the motif, fade re-anchored to the image bottom edge.
   change log: 23.08.2026 – Thomas Schäfer – Career benefit tiles each carry
               a thematic AI photograph with a readable veil and top-right badge.
   change log: 23.08.2026 – Thomas Schäfer – Homepage services bento photos
               sit brighter (thinner rest scrim, slight image lift).
   change log: 23.08.2026 – Thomas Schäfer – History Chronograph frames sit
               another step lower (--history-card-height plus tighter year/padding).
   change log: 23.08.2026 – Thomas Schäfer – History Chronograph frames sit a
               bit lower (--history-card-height, shared by cards and the 2016 node).
   change log: 23.08.2026 – Thomas Schäfer – Career benefits sections use a
               dedicated AI-labelled workplace banner with a contrast veil.
   change log: 23.08.2026 – Thomas Schäfer – Products banner is an exception to the
               full-width homepage intros: its lead is capped at the headline width so
               the two personas in the motif stay clear of the text.
   change log: 23.08.2026 – Thomas Schäfer – CUBE HUB pillars headline uses a lime-to-green
               brand gradient (--hub-accent-light/--hub-accent-deep tokens) instead of the
               global orange heading gradient; DE and EN share the same selector.
   change log: 23.08.2026 – Thomas Schäfer – Leistungen mega-menu uses a 3×2
               grid: six orange service-area headings with nested subpages.
   change log: 22.08.2026 – Thomas Schäfer – Homepage intro headings and leads now
               use their full section-container width; intentional content/media
               grids remain unchanged.
   change log: 22.08.2026 – Thomas Schäfer – History Chronograph rail replaces the
               decorative chart/card grid with a centre-snap, manually controlled
               CUBE-frame timeline and standalone 2016 building node.
   change log: 22.08.2026 – Thomas Schäfer – Careers hero now uses the shared
               AI-labelled theme-banner treatment with its recruiting avatar motif.
   change log: 22.08.2026 – Thomas Schäfer – Content-area primary links retain the shared
               dark-on-orange button palette in rest, hover, focus and active states.
   change log: 22.08.2026 – Thomas Schäfer – Product-banner veil isolated from the generic
               product glow so inherited fixed dimensions cannot create a hard-edged block.
   change log: 16.08.2026 – Thomas Schäfer – Primary buttons (.btn-primary, .nav-cta) use near-black label on orange for WCAG AA contrast (2.8:1 → 7.1:1).
               16.08.2026 – Thomas Schäfer – Aktuelles/News feed (Concept C featured + chronicle, homepage teaser, filter/reveal); history-band for Unternehmen retained.
               16.08.2026 – Thomas Schäfer – Reusable .video-embed component for responsive privacy-friendly video embeds.
               16.08.2026 – Thomas Schäfer – Chronicle media fills the full card height from 720px up; logo-safe object-position modifier.
               16.08.2026 – Thomas Schäfer – Persona contact card and booking CTA for the homepage contact section.
               16.08.2026 – Thomas Schäfer – Trust-bar label link styles for Regulatory Expertise Center.
               16.08.2026 – Thomas Schäfer – CUBE HUB pillars block for the homepage products section.
               16.08.2026 – Thomas Schäfer – Homepage contact columns share one height above 1024px; message field absorbs the slack.
               16.08.2026 – Thomas Schäfer – Footer brands column gets its own grid track from 1360px upwards.
               16.08.2026 – Thomas Schäfer – Homepage contact left column rebuilt as a cube-care-style direct-line card (phone/booking above, persona photo mid-card with live chip, e-mail/address below); form card gets an inline heading.
               16.08.2026 – Thomas Schäfer – Slim cookie consent bar (.c1-consent) and footer revocation link.
               16.08.2026 – Thomas Schäfer – History band scope note: the milestone band now also carries both homepages.
               16.08.2026 – Thomas Schäfer – Chip and badge containers (.tag, .hero-badge, .product-badge, .ref-tag, .product-hero-badge) use the diagonal --radius-sm token instead of pill radii.
               16.08.2026 – Thomas Schäfer – Trust bar centred horizontally (label + badges group, every wrapped row); badge links stretch to the full badge height with a visible focus ring and 44px touch targets on coarse pointers.
               17.08.2026 – Thomas Schäfer – Content width cap: .container and .nav-container max out at 1600px (centred) so text and cards keep breathing room at 1920/2560px; full-bleed photo banners and the 1984px team band stay untouched.
               17.08.2026 – Thomas Schäfer – Homepage hero photo (.hero-photo) wired to local HB-6 lab banner: cover sizing, transform-based Ken Burns with reduced-motion opt-out, centre-weighted scrim for the centred headline.
               17.08.2026 – Thomas Schäfer – EU AI Act (Art. 50) badge component (.ki-badge) for AI-generated imagery plus .ki-bild-host positioning helper and the footer AI notice line.
               17.08.2026 – Thomas Schäfer – Badge icon as background-image span (immune to card img rules); hover expansion via .has-ki-badge state class; homepage hero badge docks top-right below the fixed navbar so the chat button and consent bar can never cover it.
               17.08.2026 – Thomas Schäfer – Clean badge design: icon-only 24px chip at rest, "AI GENERATED" expands on badge :hover/:focus-visible or via .is-expanded (tap toggle); badge is now interactive (cursor, focus ring), .has-ki-badge host rules removed.
               17.08.2026 – Thomas Schäfer – Services banner veil switched to the GX-1 orange duotone gradient (accent wash → near-black, dark radial core behind the header); products banner veil unchanged.
               17.08.2026 – Thomas Schäfer – Orphaned .services-bento-tile__badge rules removed (icon chips dropped from the homepage bento tiles).
               17.08.2026 – Thomas Schäfer – Team band section: GX-1 orange duotone background (photo untouched), compacted padding/header gap, band width capped at 1240px.
               17.08.2026 – Thomas Schäfer – Homepage products and contact sections compacted (clamp section padding, tighter card/pillar/form spacing, smaller contact media min-height) to even out the vertical rhythm.
               17.08.2026 – Thomas Schäfer – Homepage-only .contact--compact variant: full-width section header above the grid, tightened card/form spacing, persona photo moves beside the contact rows from 1280px; shared contact classes (career page) untouched.
               17.08.2026 – Thomas Schäfer – Team band headline white instead of the orange gradient (gradient/text-fill reset scoped to .team-band-section .section-title; drop shadow kept).
               17.08.2026 – Thomas Schäfer – LinkedIn chip link (.contact-linkedin) for the homepage contact card: inline SVG glyph, diagonal radius, footer-style accent hover, 44px touch target.
               17.08.2026 – Thomas Schäfer – .contact--compact rolled out beyond the homepage (career pages opt in via the class); .contact-left/.contact-right get min-width: 0 so the unbreakable phone number cannot widen narrow viewports.
               19.08.2026 – Thomas Schäfer – Client logo strip (.client-logos) for the homepage: quiet 3/1 logo grid below the services banner, dimmed grayscale at rest, brand color on hover/focus.
               19.08.2026 – Thomas Schäfer – History band: cube care milestone accents (--care node, card and KPI badge modifiers in the magenta brand color) for the new September 2026 healthcare milestone.
               19.08.2026 – Thomas Schäfer – Values redesign W-2: editorial manifesto section (.values-manifest*) with inline SVG value icons, hairline dividers, hover accent bar and CSS-only reveal; old .values-grid/.value-* card rules removed; .about-grid--solo modifier for the values-free About section.
               20.08.2026 – Thomas Schäfer – Testimonials block (.testimonials, .testimonials-grid, .testimonial-*) removed; section dropped from both homepages. .trust-bar-label rule in the 600px media query kept.
               20.08.2026 – Thomas Schäfer – CUBE HUB brand tokens (--hub-accent lime, sampled from the official icon) plus lime accents for the hub pillars block and the homepage .product-card--hub modifier.
               20.08.2026 – Thomas Schäfer – .client-logos__link: outbound partner link fills the logo box (touch target) with a visible :focus-visible accent ring; grayscale-to-color reveal keeps working via :focus-within.
               20.08.2026 – Thomas Schäfer – .product-card--hub .product-title: headline switched from the global orange heading gradient to the lime --hub-accent (gradient and text fill reset).
               21.08.2026 – Thomas Schäfer – Homepage news cards now share the group cards'
               shift-free two-line accent hover and focus frame.
               21.08.2026 – Thomas Schäfer – Added the article-specific cube care medical-practice hero banner.
               21.08.2026 – Thomas Schäfer – cube care article hero: label line and headline switched from the global orange heading gradient to the cube care berry (gradient and text fill reset, deeper berry reserved for the marker bar).
               21.08.2026 – Thomas Schäfer – Lightened the shared banner veils while preserving WCAG AA headline contrast.
               21.08.2026 – Thomas Schäfer – Responsive About/values two-card manifesto and reusable DEKRA ISO 9001 seal treatments.
               21.08.2026 – Thomas Schäfer – Team-band photo height reduced to two-thirds (aspect-ratio 5/2) with a lab-grade crop.
               21.08.2026 – Thomas Schäfer – Certification marks keep square corners (documented exception to the diagonal radius): .iso-seal-link, .iso-seal-img, .history-iso-seal.
               21.08.2026 – Thomas Schäfer – History cards read as a chain: .history-item__mark is now a node dot plus a rail that fades into the grid gap toward the next card (all breakpoints).
               22.08.2026 – Thomas Schäfer – Form controls now keep a 44px minimum touch target while retaining the white --field-* surface and orange focus ring.
               21.08.2026 – Thomas Schäfer – Form fields sit on white (--field-* tokens): .form-input, .form-select and the consent checkbox read as light input surfaces on the dark page.
               21.08.2026 – Thomas Schäfer – Contact triptych band (.contact-triptych) for the contact pages: three motif panels joined by the cube diagonal-corner divider.
               22.08.2026 – Thomas Schäfer – Homepage product cards: the square product logo is pinned to the card's top-right corner so badge, headline and tagline move up (markup untouched, DE/EN identical).
               22.08.2026 – Thomas Schäfer – cube hub pillar cards (.hub-pillar): icon moved to the top-right corner, label and headline pulled up into the freed top-left space (markup untouched, DE/EN identical).
               22.08.2026 – Thomas Schäfer – Contact pages: the three-panel .contact-triptych is replaced by one merged industry banner (.contact-band) inside the hero, directly below headline and lead; .page-hero-split carries the headline/lead row with its accent hairline.
               22.08.2026 – Thomas Schäfer – Contact hero adopts the shared theme-banner pattern (.page-hero--banner-kontakt-branchen: bottom-anchored background-image, deepened veil for the white lab coats behind the copy, KI badge docked top-right below the navbar); the now unused .contact-band rules are removed.
               22.08.2026 – Thomas Schäfer – Responsive CUBE-frame industries component added for pharma, medical technology and food production.
               22.08.2026 – Thomas Schäfer – Homepage services bento tiles now read as their own layer above the orange-washed section banner: deeper two-part scrim with corner vignette, cool hairline edge, resting drop shadow, accent top-edge marker, and orange reserved for hover/focus/spotlight states (grid mechanics and markup untouched, DE/EN identical).
               22.08.2026 – Thomas Schäfer – Services bento touch states now crossfade resting labels and tap-activated details; no-JS touch fallback shows one static detail layer without text overlap.
               22.08.2026 – Thomas Schäfer – Team band: the graduation-cap disclosure (.team-band-edu*) is restored after it was overwritten by a full-section rewrite; the education list is hidden again at rest and only opens on the cap (hover, focus-within, tap), floating above the label from 1280px. The always-visible .team-band-qual rows with their per-row cap icons are gone.
               22.08.2026 – Thomas Schäfer – Team-band focus copy removed; desktop labels reduced to their measured two-line height.
               23.08.2026 – Thomas Schäfer – Homepage-only .team-band-section--banner variant: the group portrait leaves the container and runs full bleed like the services and products banners (frame and diagonal radius dropped, height capped at 44rem, taller crops below 1280px, container gutters for the stacked labels).
               23.08.2026 – Thomas Schäfer – Management banner header area on plain black: the orange duotone wash is dropped on .team-band-section--banner (background-image: none), leaving the base --bg-primary background-color; the plain .team-band-section on the news pages keeps its duotone.
               24.08.2026 – Thomas Schäfer – Homepage gap between the services banner and the industries section halved: .services bottom padding 7rem → 3.5rem, .industries top padding clamp halved (both classes are homepage-only, DE/EN identical).
               04.09.2026 – Thomas Schäfer – Cube-frame hover formalised in two tiers: a.feature-item gets the full accent state, a non-clickable .feature-item only a muted accent edge; the .feature-item--cube-frame special case is dropped. New .csa-lever component (Computer Software Assurance as an efficiency layer instead of a sibling option) and .quiz-callout-grid (self-checks as equal-height cards with a paragraph-glyph watermark). .sys-cube-toolbar lifted onto its own panel layer with a cool hairline, resting shadow, accent marker, search magnifier and a two-column split from 900px.
               04.09.2026 – Thomas Schäfer – Dead component blocks removed: .services-grid/.service-* (superseded by the services bento), .team/.team-grid/.team-card/.team-avatar/.avatar-initials/.team-name/.team-role/.team-focus/.team-quals (superseded by .team-band-*), and .ref-card/.ref-card-title/.ref-tag/.ref-title/.ref-desc (the references page renders .project-card). .ref-grid is kept because it is still in use. Orphan media-query entries dropped as well; .product-card keeps its narrow-viewport padding.
               04.09.2026 – Thomas Schäfer – Removed the redundant quiz-callout icon boxes; the regulatory kicker and paragraph watermark remain.
               04.09.2026 – Thomas Schäfer – CSA efficiency layer replaces its boxed lightning icon with a large, low-contrast stopwatch watermark.
               04.09.2026 – Thomas Schäfer – Quiz entry points share the generic .quiz-callout component; the CSA card opts out of article-link underlines. Case Stories use the lifted filter panel and three desktop cube columns.
   ============================================================ */

/* --- CSS Variables --- */
:root {
    --bg-primary:     #080808;
    --bg-secondary:   #0F0F0F;
    --bg-card:        #161616;
    --bg-card-hover:  #1E1E1E;
    --bg-glass:       rgba(22, 22, 22, 0.7);
    --border:         rgba(255,255,255,0.07);
    --border-strong:  rgba(255,255,255,0.13);

    --accent:         #F97316;
    --accent-light:   #FB923C;
    --accent-glow:    rgba(249, 115, 22, 0.22);
    --accent-teal:    #FBBF24;
    --accent-purple:  #EF4444;

    /* CUBE HUB brand lime (mean tone sampled from the official icon gradient).
       Used only in clearly CUBE-HUB-branded elements – orange stays the
       cube one primary. Contrast on #080808: 10.4:1. */
    --hub-accent:      #B4C511;
    --hub-accent-glow: rgba(180, 197, 17, 0.16);
    /* Light and deep stops for CUBE-HUB gradient text. Both keep WCAG AA on the
       dark layout (#080808): light 15.6:1, deep 6.0:1 – a saturated forest green
       below that would drop under 4.5:1 in the darkest glyph areas. */
    --hub-accent-light: #D4E157;
    --hub-accent-deep:  #4C9E2A;

    --text-primary:   #FFFFFF;
    --text-secondary: #D6D6D6;
    --text-muted:     #BDBDBD;
    --text-accent:    #FB923C;

  /* Photo veils are a flat wash. The same opacity covers the whole frame
     so the photograph does not pick up a darker centre. Copy stays
     readable via the existing drop-shadows. */
  --photo-hero-veil: linear-gradient(
    180deg,
    rgba(8, 8, 8, 0.24),
    rgba(8, 8, 8, 0.24)
  );
  --photo-band-veil: linear-gradient(
    180deg,
    rgba(8, 8, 8, 0.16),
    rgba(8, 8, 8, 0.16)
  );

    /* Form fields are the one light surface in the dark layout: a filled
       white input reads as "here you type" and keeps entered text at
       maximum contrast (16.1:1) on every background we place a form on. */
    --field-bg:          #FFFFFF;
    --field-bg-disabled: #E5E7EB;
    --field-ink:         #111827;
    --field-placeholder: #6B7280;
    --field-border:      rgba(17,24,39,0.18);

    --font-sans:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display:   'IBM Plex Sans', var(--font-sans);

    --radius-sm:      6px 0 6px 0;   /* ↘ diagonal: oben-links + unten-rechts rund */
    --radius-md:      12px 0 12px 0;
    --radius-lg:      20px 0 20px 0;
    --radius-xl:      32px 0 32px 0;

    --shadow-sm:      0 1px 3px rgba(0,0,0,0.5);
    --shadow-md:      0 4px 24px rgba(0,0,0,0.6);
    --shadow-lg:      0 16px 48px rgba(0,0,0,0.7);
    --shadow-glow:    0 0 40px rgba(249,115,22,0.15);

    --transition:     0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   Shared abbreviation glass tooltip
   Injected by js/abbr-tooltip.js on every public page.
   ============================================================ */

.abbr-tip {
  padding: 0;
  color: inherit;
  font: inherit;
  text-decoration: none;
  border: 0;
  border-bottom: 1px dotted rgba(184, 199, 214, 0.75);
  background: transparent;
  cursor: help;
  touch-action: manipulation;
}

.abbr-tip:hover,
.abbr-tip:focus-visible,
.abbr-tip.is-expanded {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

.abbr-tip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.abbr-tooltip {
  position: fixed;
  z-index: 10050;
  display: grid;
  gap: 0.3rem;
  max-width: min(23rem, calc(100vw - 1.5rem));
  padding: 0.8rem 0.95rem;
  color: var(--text-primary);
  background:
    linear-gradient(135deg, rgba(28, 33, 39, 0.94), rgba(10, 12, 15, 0.96));
  border: 1px solid rgba(184, 199, 214, 0.42);
  border-radius: var(--radius-md);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.52),
    inset 1px 0 0 rgba(249, 115, 22, 0.72);
  backdrop-filter: blur(14px) saturate(125%);
  pointer-events: none;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.abbr-tooltip[hidden] {
  display: none;
}

.abbr-tooltip__term {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.09em;
  color: var(--accent-light);
  text-transform: uppercase;
}

.abbr-tooltip__expansion {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {
  .abbr-tooltip {
    transition: none;
  }
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    font-size: 16px;
    scrollbar-gutter: stable;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* --- Container --- */
.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* --- Typography --- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-teal) 60%, var(--accent-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
h2 { text-align: center; font-size: clamp(1.75rem, 2.8vw, 2.25rem); }

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: all var(--transition);
    cursor: pointer;
    white-space: nowrap;
}

/* Near-black label instead of white: white on --accent only reaches 2.8:1,
   the dark label reaches 7.1:1 on --accent and 8.8:1 on the lighter hover.

   The fill is a shallow top-to-bottom gradient rather than one flat orange, and
   the two inset lines give the edge a lit top and a shaded underside. A flat
   rectangle of a single saturated colour is what makes a button look stamped on
   instead of made. The cast shadow is warm now: it used to be
   rgba(59,130,246,...), a blue left over from an earlier accent colour, which
   put a cold halo under every orange button on the site.

   --btn-cast carries the cast-shadow hue as raw RGB channels so brand variants
   (cube care magenta, cube hub lime) can retune the halo without restating the
   whole four-layer box-shadow, which is how they ended up with the orange one. */
.btn-primary,
.content-main .btn-primary {
    --btn-cast: 194, 65, 12;
    background: linear-gradient(180deg,
        var(--accent-light) 0%,
        var(--accent) 55%,
        color-mix(in srgb, var(--accent) 88%, #000) 100%);
    color: var(--bg-primary);
    text-decoration: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        inset 0 -1px 0 rgba(88, 30, 0, 0.28),
        0 1px 2px rgba(0, 0, 0, 0.50),
        0 10px 24px -10px rgba(var(--btn-cast), 0.65);
}
.btn-primary:hover,
.btn-primary:focus-visible,
.content-main .btn-primary:hover,
.content-main .btn-primary:focus-visible {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--accent-light) 82%, #fff) 0%,
        var(--accent-light) 55%,
        var(--accent) 100%);
    color: var(--bg-primary);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        inset 0 -1px 0 rgba(88, 30, 0, 0.24),
        0 2px 4px rgba(0, 0, 0, 0.50),
        0 14px 30px -12px rgba(var(--btn-cast), 0.80);
    transform: translateY(-2px);
}

.btn-primary:focus-visible,
.content-main .btn-primary:focus-visible {
    outline: 3px solid var(--text-primary);
    outline-offset: 3px;
}

/* Pressed: gradient flips to the darker half and the cast shadow collapses into
   an inner one, so the button reads as pushed into the page. */
.btn-primary:active,
.content-main .btn-primary:active {
    background: linear-gradient(180deg,
        var(--accent) 0%,
        color-mix(in srgb, var(--accent) 88%, #000) 100%);
    color: var(--bg-primary);
    box-shadow:
        inset 0 2px 4px rgba(88, 30, 0, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.50);
    transform: translateY(0);
}

.btn-ghost {
    background: transparent;
    color: var(--text-primary);
    border: 1.5px solid var(--border-strong);
}
.btn-ghost:hover {
    background: var(--bg-card);
    border-color: var(--accent);
    color: var(--accent-light);
    transform: translateY(-2px);
}

/* .btn-secondary was used on the cube group brand cards for weeks without ever
   being defined in a stylesheet, so those buttons rendered as bare label text
   on the dark card: no surface, no edge, invisible next to the filled primary.
   It is the documented partner of .btn-primary on dark surfaces and repeats the
   hero pairing: a slightly lifted translucent surface with a cool hairline.
   Cool, because every surface it sits on is warm or near-black; an orange edge
   at rest would compete with the primary beside it.
   --btn-edge lets the brand cards move the hover edge to their own hue instead
   of restating the whole hover block, the same lever --btn-cast gives the fill. */
.btn-secondary {
    --btn-edge: var(--accent);
    --btn-edge-glow: var(--accent-glow);
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--btn-edge);
    color: var(--text-primary);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 0 1px var(--btn-edge),
        0 0 24px var(--btn-edge-glow);
    transform: translateY(-2px);
}

.btn-secondary:focus-visible {
    outline: 3px solid var(--text-primary);
    outline-offset: 3px;
}

.btn-outline {
    background: transparent;
    color: var(--accent-light);
    border: 1.5px solid var(--accent);
}
.btn-outline:hover {
    background: var(--accent-glow);
    transform: translateY(-2px);
}

.btn-full { width: 100%; }

/* Buttons used to breathe: a pseudo element pulsed an orange halo on every .btn
   on the page at once, every 4.5 seconds. Motion that repeats forever and means
   nothing reads as a placeholder animation, and with several buttons in view the
   page throbbed. Glow is now reserved for hover and focus, where it answers an
   action. position: relative stays; layered button contents rely on it. */
.btn {
    position: relative;
}

@media (prefers-reduced-motion: reduce) {
    .btn-primary,
    .btn-primary:hover,
    .btn-primary:focus-visible,
    .btn-primary:active,
    .content-main .btn-primary,
    .content-main .btn-primary:hover,
    .content-main .btn-primary:focus-visible,
    .content-main .btn-primary:active {
        transition: none;
        transform: none;
    }
}

/* --- Section Shared --- */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-light);
    margin-bottom: 1rem;
}
.section-label::before {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}

.section-title {
    font-size: clamp(1.875rem, 3.5vw, 2.75rem);
    line-height: 1.18;
    margin-bottom: 1.25rem;
}

.section-sub {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    max-width: 580px;
    line-height: 1.7;
}

.section-header {
    margin-bottom: 4rem;
    max-width: 700px;
}

.section-header.centered {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    display: flex;
    flex-direction: column;
}

/* --- Animations --- */
[data-animate] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
[data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1.25rem 0;
    background: rgba(7, 11, 20, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 var(--border);
    transition: background var(--transition), backdrop-filter var(--transition), box-shadow var(--transition), padding var(--transition);
}

.navbar.scrolled {
    background: rgba(7, 11, 20, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 var(--border);
    padding: 0.875rem 0;
}

.nav-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
}

/* Logo image */
.nav-logo-img {
    height: 32px;
    width: auto;
    display: block;
    object-fit: contain;
}
.nav-logo-fallback {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

/* Footer logo (in glass card, no bottom margin — brand column handles spacing) */
.footer-logo-img {
    height: 26px;
    width: auto;
    display: block;
    object-fit: contain;
    margin-bottom: 1rem;
}

/* Language switcher */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0 1rem;
}
.lang-btn {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-sm);
    transition: color var(--transition);
}
.lang-btn:hover { color: var(--accent); }
.lang-btn.lang-active {
    color: var(--accent);
    border: 1px solid var(--accent);
}
.lang-sep {
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1;
}

.nav-logo {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: baseline;
    gap: 0;
    flex-shrink: 0;
}
.logo-cube { color: var(--text-primary); }
.logo-one  { color: var(--accent); }
.logo-tag  {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    margin-left: 0.4rem;
    align-self: center;
}

.nav-links {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 0;
}

.nav-link {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 0.5rem clamp(0.35rem, 1.2vw, 0.875rem);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: all var(--transition);
}
.nav-link:hover {
    color: var(--text-primary);
    background: var(--bg-card);
}

/* Same treatment as .btn-primary, one size down: the nav CTA is the same button
   in a smaller slot, so it carries the same gradient, lit top edge and warm cast
   shadow rather than the old blue one. */
.nav-link.nav-cta {
    background: linear-gradient(180deg,
        var(--accent-light) 0%,
        var(--accent) 55%,
        color-mix(in srgb, var(--accent) 88%, #000) 100%);
    color: var(--bg-primary);
    padding: 0.5rem 1.25rem;
    margin-left: 0.5rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        inset 0 -1px 0 rgba(88, 30, 0, 0.28),
        0 1px 2px rgba(0, 0, 0, 0.45),
        0 8px 18px -8px rgba(194, 65, 12, 0.60);
}
.nav-link.nav-cta:hover {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--accent-light) 82%, #fff) 0%,
        var(--accent-light) 55%,
        var(--accent) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        inset 0 -1px 0 rgba(88, 30, 0, 0.24),
        0 2px 4px rgba(0, 0, 0, 0.45),
        0 12px 24px -10px rgba(194, 65, 12, 0.75);
    transform: translateY(-1px);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
}

.nav-burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 28px;
    padding: 4px;
}
.nav-burger span {
    display: block;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all var(--transition);
}
.nav-burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8rem 2rem 6rem;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-photo {
    position: absolute;
    inset: 0;
    background-image: url("../img/allgemein/cubeone-themenbanner-startseite-hero.jpg");
    background-size: cover;
    background-position: 50% 42%;
    background-repeat: no-repeat;
    z-index: 0;
    animation: heroPanZoom 26s ease-in-out infinite alternate;
}

/* Film-Grain Textur */
.hero-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.055;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

.hero-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--photo-hero-veil);
}

.hero .hero-sub {
  color: var(--text-primary);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: orbFloat 10s ease-in-out infinite;
}
.hero-orb-1 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(249,115,22,0.18) 0%, transparent 70%);
    top: -200px; right: -100px;
    animation-delay: 0s;
}
.hero-orb-2 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(251,191,36,0.10) 0%, transparent 70%);
    bottom: 100px; left: -100px;
    animation-delay: -4s;
}
.hero-orb-3 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(239,68,68,0.08) 0%, transparent 70%);
    top: 40%; left: 40%;
    animation-delay: -7s;
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(30px, -40px) scale(1.05); }
    66%       { transform: translate(-20px, 20px) scale(0.95); }
}

/* Ken Burns: slow transform-based zoom + minimal pan (compositor-friendly) */
@keyframes heroPanZoom {
    0%   { transform: scale(1) translateX(0); }
    100% { transform: scale(1.06) translateX(-0.6%); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-photo {
        animation: none;
    }
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 860px;
    text-align: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    padding: 0.4rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 2rem;
    letter-spacing: 0.03em;
}
.badge-dot {
    width: 6px; height: 6px;
    background: #22C55E;
    border-radius: 50%;
    box-shadow: 0 0 8px #22C55E;
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

.hero-headline {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

.headline-gradient {
    background: linear-gradient(135deg, #F97316 0%, #FBBF24 60%, #FB923C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-sub {
    font-size: clamp(1rem, 2vw, 1.1875rem);
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 640px;
    margin: 0 auto 2.5rem;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

/* Secondary CTA on the photo hero: frosted glass, the one place on the site that
   earns it. The hero is the only surface with a photo directly behind a control,
   so blurring that photo is a real material rather than decoration, and it gives
   the secondary action a different substance from the solid primary instead of
   competing with it on colour.
   The fill stays near-black at 55% because the motif has bright patches; blur
   smears them but does not darken them, and the label needs its contrast on
   every frame of the photo. The lit top edge is the same one the primary button
   carries, so both read as lit from above.
   Hover/focus keep the accent cube-frame; its ring comes from box-shadow so the
   1px resting width never shifts on hover. */
.hero-actions .btn-ghost {
  background: rgba(8, 8, 8, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 28px rgba(0, 0, 0, 0.45);
}

/* Without blur the translucent fill would sit unfiltered on the motif, so fall
   back to the opaque card surface the button had before. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-actions .btn-ghost {
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
    border-color: color-mix(in srgb, var(--text-primary) 13%, var(--bg-card));
  }
}

.hero-actions .btn-ghost:hover,
.hero-actions .btn-ghost:focus-visible {
  background: rgba(8, 8, 8, 0.62);
  border-color: var(--accent);
  color: var(--accent-light);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px var(--accent),
    0 0 28px var(--accent-glow);
  transform: translateY(-2px);
}

.hero-actions .btn-ghost:focus-visible {
  outline: 3px solid var(--text-primary);
  outline-offset: 3px;
}

/* Content-width chips instead of a stretch grid: the equal-width columns made
   every chip 390px wide, half again as wide as the widest hero CTA, so the
   secondary links out-shouted the two primary buttons. Flex wrapping sizes each
   chip to its label; stretch keeps every chip in a wrapped row the same height,
   so the shared glow still reads as one group. */
.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 68rem;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
}

@media (min-width: 768px) {
  .hero-tags {
    gap: 0.625rem;
  }
}

.tag {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: rgba(249, 115, 22, 0.07);
    border: 1px solid rgba(249, 115, 22, 0.35);
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.08);
    transition: color var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
a.tag:hover {
    color: var(--text-primary);
    border-color: var(--accent);
    background: rgba(249, 115, 22, 0.15);
    box-shadow: 0 0 18px rgba(249, 115, 22, 0.22);
}

/* Homepage Leistungsgebiet chips only. Global .tag (other pages) stays the
   compact orange rest style.
   These six sat in a permanent orange cage: a 1px orange border, a second orange
   ring from box-shadow on top of it, an orange halo and a pulse. Six of them
   under the two CTAs turned the strongest colour on the site into background
   noise and left nothing for the buttons to stand out against. They are dark
   glass now, the same material as the secondary CTA above them, held by a cool
   hairline. Cool because the surroundings are warm: an orange edge on an orange
   wash separates nothing. Permanent orange is down to the short marker at the
   top edge, the signature the bento tiles already use, and the glow only appears
   on hover and focus, where it answers a pointer.
   Scale sits deliberately below .hero-actions .btn (15px/600, 14px 32px
   padding, --radius-md): smaller type, lighter weight, a quarter of the
   horizontal padding and the smaller cube radius. The 40px min-height keeps
   these link chips tappable; max-width forces the long qualification label to
   wrap instead of growing past a CTA. */
.hero-tags .tag {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: min(100%, 13.5rem);
  min-height: 40px;
  padding: 0.375rem 0.75rem;
  font-size: clamp(0.75rem, 1.05vw, 0.8125rem);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  color: var(--text-primary);
  background: rgba(8, 8, 8, 0.55);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 6px 18px rgba(0, 0, 0, 0.40);
  transition:
    color var(--transition),
    border-color var(--transition),
    background var(--transition),
    box-shadow var(--transition);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-tags .tag {
    background: rgba(8, 8, 8, 0.78);
  }
}

/* The one permanent piece of orange: a short marker at the top edge, inset past
   the rounded corner. Fixed length rather than a fraction of the chip, otherwise
   the wide labels get a long orange rule and the narrow ones a dash, and the six
   chips stop reading as one set. */
.hero-tags .tag::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0.625rem;
  width: 28px;
  height: 2px;
  background: var(--accent);
  transition: background var(--transition);
  pointer-events: none;
}

.hero-tags .tag:hover,
.hero-tags .tag:focus-visible {
  color: var(--text-primary);
  background: rgba(8, 8, 8, 0.62);
  border-color: var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 1px var(--accent),
    0 0 24px var(--accent-glow);
  outline: none;
}

.hero-tags .tag:hover::after,
.hero-tags .tag:focus-visible::after {
  background: var(--accent-light);
}

.hero-scroll {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    animation: scrollBounce 2s ease-in-out infinite;
}
.scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--text-muted), transparent);
}
@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(8px); }
}

/* ============================================================
   STATS
   ============================================================ */
.stats {
    padding: 4rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.stats-grid {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 2rem;
}

.stat-item {
    display: flex;
    align-items: baseline;
    gap: 0.1rem;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    position: relative;
    min-width: 140px;
}

.stat-number {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.03em;
}

.stat-plus {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.stat-label {
    width: 100%;
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 0.25rem;
    letter-spacing: 0.03em;
}

.stat-divider {
    width: 1px;
    height: 60px;
    background: var(--border);
    flex-shrink: 0;
}

/* ============================================================
   SERVICES
   ============================================================ */
/* Bottom padding is half the top: the following industries section carries
   its own (also halved) top padding, so the combined seam stays balanced. */
.services {
    padding: 7rem 0 3.5rem;
}

/* ============================================================
   SERVICES BENTO (homepage Leistungsschwerpunkte)
   Equal-height row grid over .services--banner. Tiles carry their own photo
   + CSS scrim so contrast stays ≥ 4.5:1 above the section veil.
   change log: 16.08.2026 – Thomas Schäfer – Konzept C bento grid rollout.
   change log: 16.08.2026 – Thomas Schäfer – Detail panel moved to an overlay;
               hover now animates opacity only, so the grid no longer reflows.
   change log: 16.08.2026 – Thomas Schäfer – Staggered entrance and gentle
               light accent (Fade-3), gated behind JS-set classes.
   change log: 16.08.2026 – Thomas Schäfer – Replaced asymmetric placement
               with equal-height 1/2/3-column rows and accessible white titles.
   change log: 22.08.2026 – Thomas Schäfer – Tiles read as their own layer above
               the orange-washed section banner: deeper scrim with corner
               vignette, visible cool hairline edge, resting drop shadow, and an
               accent top-edge marker. Orange is reserved for the interactive
               and spotlight states (hover/focus glow), never a permanent wash.
   change log: 22.08.2026 – Thomas Schäfer – Touch uses a JS-enhanced tap
               crossfade; the no-JS fallback exposes one static detail layer.
   change log: 23.08.2026 – Thomas Schäfer – Tile photos sit brighter: the
               rest-state scrim is thinned and the photo is lifted slightly so
               the six Leistungsschwerpunkte read as pictures, not dark plates.
   change log: 27.08.2026 – Thomas Schäfer – CTA button-pulse walk reverted;
               auto-walk is again the photo dim plus a calm spotlight edge.
   change log: 28.08.2026 – Thomas Schäfer – Rest/hover/spotlight perimeters
               are cool hairlines again; orange lives in the top marker and
               a restrained interaction glow, not a full tile frame.
   ============================================================ */

/* Component tokens for the tile-over-banner separation. The resting edge is
   deliberately cool white: the section veil is a warm orange wash, so a neutral
   hairline plus a black drop shadow separates far better than an orange one.
   Hover, focus and spotlight only brighten that cool edge and add a soft
   accent glow – never a solid orange rectangle. */
.services-bento {
  --bento-edge:        rgba(255, 255, 255, 0.20);
  --bento-edge-active: rgba(255, 255, 255, 0.28);
  --bento-edge-hover:  rgba(255, 255, 255, 0.38);
  --bento-lift:
    0 18px 38px -14px rgba(0, 0, 0, 0.75),
    0 3px 10px rgba(0, 0, 0, 0.45);
  --bento-lift-strong:
    0 24px 52px -16px rgba(0, 0, 0, 0.80),
    0 4px 14px rgba(0, 0, 0, 0.50);
  --bento-glow:      0 0 22px -8px rgba(249, 115, 22, 0.22);
  --bento-glow-soft: 0 0 18px -8px rgba(249, 115, 22, 0.14);

  display: grid;
  grid-template-columns: minmax(min(280px, 100%), 1fr);
  gap: clamp(0.75rem, 1.4vw, 1.1rem);
}

.services-bento-tile {
  position: relative;
  display: flex;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--bento-edge);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  background: var(--bg-card);
  box-shadow: var(--bento-lift);
  text-decoration: none;
  cursor: pointer;
}

.services-bento-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: brightness(1.42) contrast(1.05) saturate(1.08);
  transition: transform var(--transition);
  transition-duration: 0.6s;
}

/* Two-part scrim. The linear pass keeps the label zone at full contrast and no
   longer thins out to near-transparent at the top – that was where the tile
   photo used to run straight into the section banner. The radial pass darkens
   the corners so the tile reads as a framed plate instead of a cut-out. */
.services-bento-tile__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      120% 85% at 50% 0%,
      rgba(8, 8, 8, 0) 48%,
      rgba(8, 8, 8, 0.16) 100%
    ),
    linear-gradient(
      0deg,
      rgba(8, 8, 8, 0.78) 0%,
      rgba(8, 8, 8, 0.42) 34%,
      rgba(8, 8, 8, 0.14) 64%,
      rgba(8, 8, 8, 0.04) 100%
    );
  transition: opacity var(--transition);
}

/* Signature: a short accent rule on the tile's top edge, aligned with the body
   padding so it sits above the title. It marks the one edge the scrim cannot
   fully own and is the only permanent orange on the tile. Grows with the
   rotating spotlight – transform only, so nothing reflows. */
.services-bento-tile__scrim::after {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(1rem, 1.6vw, 1.4rem);
  width: clamp(2rem, 3.4vw, 2.75rem);
  height: 2px;
  background: var(--accent);
  opacity: 0.55;
  transform-origin: left center;
  transition:
    transform var(--transition),
    opacity var(--transition);
}

.services-bento-tile__body {
  margin-top: auto;
  width: 100%;
  padding: clamp(1rem, 1.6vw, 1.4rem);
}

.services-bento-tile__cat {
  transition: opacity var(--transition);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}

.services-bento-tile__title {
  transition: opacity var(--transition);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-top: 0.2rem;
  background: none;
  color: var(--text-primary);
  -webkit-text-fill-color: var(--text-primary);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.95);
}

/* Detail panel as an overlay inside the tile – same principle as the reference
   cards on ueber-uns/referenzen.html. Taking it out of flow keeps the tile
   height constant, so hovering one tile can never reflow the grid.
   No `visibility` here: the link must stay focusable so :focus-within can
   reveal the panel for keyboard users. */
.services-bento-tile__reveal {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: auto;
  padding: clamp(1rem, 1.6vw, 1.4rem);
  background: linear-gradient(
    0deg,
    rgba(8, 8, 8, 0.97) 0%,
    rgba(8, 8, 8, 0.92) 45%,
    rgba(8, 8, 8, 0.78) 100%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}

.services-bento-tile__desc {
  color: rgba(245, 245, 245, 0.9);
  font-size: 0.88rem;
  max-width: 46ch;
  margin-bottom: 0.75rem;
}

.services-bento-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.8rem;
}

.services-bento-chip {
  font-size: 0.75rem;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.6rem;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.services-bento-tile__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  font-weight: 600;
  color: var(--accent-light);
  transition: color var(--transition);
}

.services-bento-tile__link svg {
  transition: transform var(--transition);
}

.services-bento-tile__link:hover {
  color: var(--text-primary);
}

.services-bento-tile__link:hover svg {
  transform: translateX(4px);
}

.services-bento-tile__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Keyboard users get the same brighter cool edge and soft glow as pointer
   hover. The 2px solid accent outline is reserved for the inner detail link
   (:focus-visible there) so the photo tile itself never becomes a neon box. */
.services-bento-tile:focus-within {
  border-color: var(--bento-edge-hover);
  box-shadow:
    var(--bento-lift-strong),
    var(--bento-glow);
}

.services-bento-tile:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.45);
  outline-offset: 3px;
}

.services-bento-tile:focus-within .services-bento-tile__scrim::after {
  opacity: 1;
  transform: scaleX(1.5);
}

.services-bento-tile:focus-within .services-bento-tile__reveal {
  opacity: 1;
  pointer-events: auto;
}

.services-bento-tile:focus-within .services-bento-tile__cat,
.services-bento-tile:focus-within .services-bento-tile__title {
  opacity: 0;
}

/* Calm hover highlight: paint-only, no transform, no reflow. */
.services-bento-tile {
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

/* Reveal on hover for pointer devices; focus-within for keyboard */
@media (hover: hover) {
  .services-bento-tile:hover {
    border-color: var(--bento-edge-hover);
    box-shadow:
      var(--bento-lift-strong),
      var(--bento-glow);
  }

  .services-bento-tile:hover .services-bento-tile__scrim::after {
    opacity: 1;
    transform: scaleX(1.5);
  }

  .services-bento-tile:hover .services-bento-tile__reveal,
  .services-bento-tile:focus-within .services-bento-tile__reveal {
    opacity: 1;
    pointer-events: auto;
  }

  /* Crossfade: the resting label steps back while the panel takes over, so
     nothing shifts position. Faded per element, not on __body – the panel is
     a child of __body and would inherit the opacity. */
  .services-bento-tile:hover .services-bento-tile__cat,
  .services-bento-tile:hover .services-bento-tile__title,
  .services-bento-tile:focus-within .services-bento-tile__cat,
  .services-bento-tile:focus-within .services-bento-tile__title {
    opacity: 0;
  }
}

/* Touch is progressively enhanced. Without JS, one static detail layer remains
   visible and the resting labels step away, so content never overlaps. With JS,
   .is-touch-ready restores the concise labels until a tile is tapped. */
@media (hover: none), (pointer: coarse) {
  .services-bento-tile__reveal {
    opacity: 1;
    pointer-events: auto;
  }

  .services-bento-tile__cat,
  .services-bento-tile__title {
    opacity: 0;
  }

  .services-bento.is-touch-ready .services-bento-tile__reveal {
    opacity: 0;
    pointer-events: none;
  }

  .services-bento.is-touch-ready .services-bento-tile__cat,
  .services-bento.is-touch-ready .services-bento-tile__title {
    opacity: 1;
  }

  .services-bento.is-touch-ready .services-bento-tile.is-touch-active
    .services-bento-tile__reveal,
  .services-bento.is-touch-ready .services-bento-tile:focus-within
    .services-bento-tile__reveal {
    opacity: 1;
    pointer-events: auto;
  }

  .services-bento.is-touch-ready .services-bento-tile.is-touch-active
    .services-bento-tile__cat,
  .services-bento.is-touch-ready .services-bento-tile.is-touch-active
    .services-bento-tile__title,
  .services-bento.is-touch-ready .services-bento-tile:focus-within
    .services-bento-tile__cat,
  .services-bento.is-touch-ready .services-bento-tile:focus-within
    .services-bento-tile__title {
    opacity: 0;
  }
}

/* Tablet and normal desktop: two equal-height columns. */
@media (min-width: 768px) {
  .services-bento {
    grid-template-columns: repeat(2, minmax(min(280px, 100%), 1fr));
  }

  .services-bento-tile {
    aspect-ratio: 4 / 3;
  }
}

/* Wide desktop: three equal-height columns and two complete rows. */
@media (min-width: 1280px) {
  .services-bento {
    grid-template-columns: repeat(3, minmax(min(280px, 100%), 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-bento-tile,
  .services-bento-tile__img,
  .services-bento-tile__link svg,
  .services-bento-tile__scrim,
  .services-bento-tile__scrim::after,
  .services-bento-tile__cat,
  .services-bento-tile__title,
  .services-bento-tile__reveal {
    transition: none;
  }
}

/* ------------------------------------------------------------
   Bento motion: staggered entrance + gentle light accent.
   Every hiding rule is gated behind .is-reveal-ready and the accent behind
   .is-spotlight – both are set by js/services-bento.js only. Without
   JavaScript (or with reduced motion) the grid renders fully visible and
   completely static; nothing here can leave the section blank.
   ------------------------------------------------------------ */

/* Accent layer sits below the in-flow text (negative z-index), so it only
   dims the photo – title and category keep their full contrast. Kept lighter
   than the original 0.4 because the tile scrim itself is now deeper; the
   spotlight difference stays readable without blacking out the motif. */
.services-bento-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(8, 8, 8, 0.26);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   INDUSTRIES (homepage)
   Mobile keeps every image before its copy. Desktop alternates the visual
   direction without changing the semantic source order.
   ============================================================ */
.industries {
  /* Top padding halved against the services banner above. Bottom padding is
     also halved so the seam into the client-logo strip is not a tall void. */
  padding: clamp(1.75rem, 3.5vw, 3.5rem) 0;
  background:
    radial-gradient(circle at 85% 10%, rgba(249, 115, 22, 0.1), transparent 32%),
    var(--bg-primary);
}

.industries__header {
  max-width: 920px;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.industries__header .section-sub {
  max-width: 860px;
}

.industries__header .section-sub a {
  color: var(--accent-light);
  text-decoration: underline;
  text-decoration-color: rgba(251, 146, 60, 0.45);
  text-underline-offset: 0.2em;
}

.industries__header .section-sub a:hover {
  color: var(--text-primary);
}

.industries__header .section-sub a:focus-visible {
  border-radius: var(--radius-sm);
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.industries__frames {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.industry-frame {
  display: grid;
  /* Visible so the accent hover glow can sit outside the cube frame.
     Photos still clip via .industry-frame__media { overflow: hidden }. */
  overflow: visible;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(30, 30, 30, 0.96), rgba(12, 12, 12, 0.98));
  box-shadow: var(--shadow-md);
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.industry-frame:hover,
.industry-frame:focus-within {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 28px var(--accent-glow);
}

.industry-frame__media {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
}

.industry-frame__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(8, 8, 8, 0.55));
}

.industry-frame__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.industry-frame__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(1.5rem, 4vw, 3.25rem);
}

.industry-frame__index {
  margin-bottom: 0.75rem;
  color: var(--accent-light);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.industry-frame__title {
  margin-bottom: 1rem;
  color: var(--text-primary);
  font-size: clamp(1.4rem, 3.2vw, 2.25rem);
  line-height: 1.15;
}

.industry-frame__text {
  margin-bottom: 1.5rem;
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.6vw, 1.08rem);
  line-height: 1.7;
}

.industry-frame__rules-title {
  margin-bottom: 0.75rem;
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.industry-frame__rules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.industry-frame__rules li {
  position: relative;
  min-width: 0;
  padding-left: 1rem;
}

.industry-frame__rules li::before {
  content: "";
  position: absolute;
  top: 0.78rem;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}

.industry-frame__rules a {
  display: inline-block;
  min-height: 44px;
  padding: 0.55rem 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.45;
  text-decoration: none;
  transition:
    color var(--transition),
    transform var(--transition);
}

.industry-frame__rules a:hover {
  color: var(--accent-light);
  transform: translateX(3px);
}

.industry-frame__rules a:focus-visible {
  border-radius: var(--radius-sm);
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .industry-frame {
    grid-template-areas: "media content";
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: stretch;
  }

  .industry-frame--reverse {
    grid-template-areas: "content media";
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }

  .industry-frame__media {
    grid-area: media;
    height: 100%;
    aspect-ratio: auto;
    border-radius: var(--radius-xl);
  }

  .industry-frame__content {
    grid-area: content;
  }
}

@media (prefers-reduced-motion: reduce) {
  .industry-frame {
    transition: none;
  }

  .industry-frame__rules a {
    transition: none;
  }

  .industry-frame__rules a:hover {
    transform: none;
  }
}

.services-bento.is-reveal-ready .services-bento-tile {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    border-color var(--transition),
    box-shadow var(--transition);
}

.services-bento.is-reveal-ready .services-bento-tile.is-in {
  opacity: 1;
  transform: none;
}

.services-bento.is-spotlight .services-bento-tile::before {
  opacity: 1;
}

.services-bento.is-spotlight .services-bento-tile.is-active::before {
  opacity: 0;
}

/* The lit tile gains a slightly brighter cool edge and a soft halo – ahead of
   its neighbours, but far below hover so the 6s rotation stays calm.
   The :not() guards matter: JS pins .is-active to the tile under the pointer,
   and this selector would otherwise outweigh the hover rule and mute its glow. */
.services-bento.is-spotlight .services-bento-tile.is-active:not(:hover):not(:focus-within) {
  border-color: var(--bento-edge-active);
  box-shadow:
    var(--bento-lift-strong),
    var(--bento-glow-soft);
}

.services-bento.is-spotlight
  .services-bento-tile.is-active:not(:hover):not(:focus-within)
  .services-bento-tile__scrim::after {
  opacity: 1;
  transform: scaleX(1.4);
}

@media (prefers-reduced-motion: reduce) {
  .services-bento.is-reveal-ready .services-bento-tile {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .services-bento-tile::before {
    transition: none;
  }
}

/* ============================================================
   PRESENCE (homepage world map)
   Corporate graphic from the deck (slide 6, Kundenstandorte). The map
   stays fully visible: no cover-crop, width 100%, height auto.
   ============================================================ */
.presence {
  padding: clamp(2rem, 5vw, 4rem) 0;
  background: var(--bg-primary);
}

.presence .section-header {
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.presence .section-header.centered .section-sub {
  max-width: 40rem;
}

.presence__figure {
  position: relative;
  margin: 0 auto;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}

.presence__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* ============================================================
   CLIENT LOGOS (Kunden-Referenzbanner)
   ============================================================ */
/* Quiet client logo strip directly below the services banner. Real customer
   logos (no AI badge). Rest state is a dimmed light-gray monochrome so the
   strip stays calm on the dark background; hover/focus restores brand color.
   Without reduced motion the same reveal walks the eight logos, one per 1.5 seconds. */
.client-logos {
    padding: clamp(1.25rem, 2.5vw, 1.75rem) 0 clamp(2.5rem, 5vw, 3.5rem);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
}

.client-logos__title {
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    color: var(--text-muted);
}

.client-logos__grid {
    --logo-min: 150px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--logo-min)), 1fr));
    gap: clamp(0.75rem, 2vw, 1.5rem);
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Wider minimum from tablet up caps the strip at four columns (8 logos =
   two even rows) instead of an orphaned single logo on a second row. */
@media (min-width: 768px) {
    .client-logos__grid {
        --logo-min: 230px;
        max-width: 1240px;
        margin-left: auto;
        margin-right: auto;
    }
}

.client-logos__item {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 1;
    padding: 0.5rem 0.75rem;
    min-width: 0;
}

.client-logos__item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* brightness lifts dark brand marks to a uniform light gray on #080808 */
    filter: grayscale(1) brightness(1.8);
    opacity: 0.55;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

/* Outbound partner link wrapping a logo: fills the whole logo box so the
   touch target stays large; visible focus ring for keyboard users. */
.client-logos__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-sm);
}

.client-logos__link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.client-logos__item:hover img,
.client-logos__item:focus-within img {
    animation: none;
    filter: none;
    opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
    .client-logos__item img {
        animation: client-logo-lit 12s linear infinite;
    }

    .client-logos__item:nth-child(1) img {
        animation-delay: 0s;
    }

    .client-logos__item:nth-child(2) img {
        animation-delay: -10.5s;
    }

    .client-logos__item:nth-child(3) img {
        animation-delay: -9s;
    }

    .client-logos__item:nth-child(4) img {
        animation-delay: -7.5s;
    }

    .client-logos__item:nth-child(5) img {
        animation-delay: -6s;
    }

    .client-logos__item:nth-child(6) img {
        animation-delay: -4.5s;
    }

    .client-logos__item:nth-child(7) img {
        animation-delay: -3s;
    }

    .client-logos__item:nth-child(8) img {
        animation-delay: -1.5s;
    }

    .client-logos__grid:hover .client-logos__item img,
    .client-logos__grid:focus-within .client-logos__item img {
        animation-play-state: paused;
    }
}

@keyframes client-logo-lit {
    0%,
    10% {
        filter: none;
        opacity: 1;
    }

    14%,
    100% {
        filter: grayscale(1) brightness(1.8);
        opacity: 0.55;
    }
}

/* ============================================================
   PRODUCTS
   ============================================================ */
.products {
    /* Compacted from a flat 7rem: the section was the tallest homepage block
       (2029px at 1440px) and broke the vertical rhythm. */
    padding: clamp(3.5rem, 6vw, 4rem) 0;
    background: var(--bg-secondary);
    position: relative;
    overflow: hidden;
}

/* The global 4rem header gap is too generous for this dense section. */
.products .section-header {
    margin-bottom: clamp(1.75rem, 3vw, 2.25rem);
}

/* Banner variants own their full-section ::before veil. Keeping this decorative
   glow on plain product sections prevents its fixed box and transform from
   clipping the banner veil into a hard-edged rectangle over the background. */
.products:not(.products--banner)::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 800px; height: 400px;
    background: radial-gradient(ellipse, rgba(249,115,22,0.06) 0%, transparent 70%);
    pointer-events: none;
}

/* Product overviews can grow beyond two cards without fixed column counts.
   change log: 16.08.2026 – Thomas Schäfer – Support responsive product catalogues. */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
    position: relative;
    /* Visible so the accent hover glow can sit outside the cube frame.
       The featured overlay is inset: 0 and does not need clipping. */
    overflow: visible;
}
.product-card:hover,
.product-card:focus-within {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow:
        0 0 0 1px var(--accent),
        0 0 28px var(--accent-glow);
}

.product-card-featured {
    background: linear-gradient(135deg, #161616 0%, #1A0E06 100%);
    border-color: rgba(249,115,22,0.25);
}
.product-card-featured::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at top right, rgba(249,115,22,0.08) 0%, transparent 60%);
    pointer-events: none;
}

.product-badge {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-light);
    background: var(--accent-glow);
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-sm);
    width: fit-content;
    border: 1px solid rgba(249,115,22,0.3);
}

.product-icon-large {
    width: 64px; height: 64px;
    color: var(--accent);
    opacity: 0.9;
    margin: 0.25rem 0;
}
.product-icon-large svg { width: 100%; height: 100%; }

.product-icon-large.product-logo {
    width: 80px;
    height: 80px;
    opacity: 1;
}
.product-icon-large.product-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 18px 0 18px 0;
}

/* The product logo is pinned to the card's top-right corner, which frees the
   space below the badge for the headline: taking the logo out of the flex flow
   pulls badge, headline, tagline and copy up as one block without touching the
   markup, so DE and EN stay structurally identical. The inset follows the card
   padding, the reserved right gutter keeps the longest labels
   ("PRODUKTE"/"C1-STREAM") clear of the logo. */
.product-card {
    --product-logo-size: 80px;
    --product-logo-inset: 2rem;
    --product-logo-gutter: calc(var(--product-logo-size) + 0.75rem);
}
.product-card > .product-icon-large.product-logo {
    position: absolute;
    top: var(--product-logo-inset);
    right: var(--product-logo-inset);
    width: var(--product-logo-size);
    height: var(--product-logo-size);
    margin: 0;
    /* Keeps the logo above the featured card's radial accent overlay. */
    z-index: 1;
}
.product-card > .product-badge {
    max-width: calc(100% - var(--product-logo-gutter));
}
.product-card > .product-title {
    padding-right: var(--product-logo-gutter);
}

/* CUBE HUB product card: badge, headline, tagline and the outline CTA carry
   the official lime brand accent instead of cube one orange (mirrors the cube
   care magenta pattern on the group page). */
.product-card--hub .product-badge {
    color: var(--hub-accent);
    background: var(--hub-accent-glow);
    border-color: rgba(180, 197, 17, 0.3);
}
.product-card--hub .product-title {
    /* The global heading rule paints h1–h4 with the orange gradient via
       background-clip: text, so the fill colour has to be reset as well –
       plain `color` alone stays invisible behind the transparent text fill. */
    background: none;
    -webkit-text-fill-color: var(--hub-accent);
    color: var(--hub-accent);
}
.product-card--hub .product-tagline {
    color: var(--hub-accent);
}
.product-card--hub .btn-outline {
    color: var(--hub-accent);
    border-color: var(--hub-accent);
}
.product-card--hub .btn-outline:hover,
.product-card--hub .btn-outline:focus-visible {
    background: var(--hub-accent-glow);
}
.product-card--hub .btn-outline::after {
    /* Idle button pulse follows the hub lime instead of the orange default. */
    box-shadow: 0 0 18px 3px rgba(180, 197, 17, 0.45);
}

.product-card--hub:hover,
.product-card--hub:focus-within {
    border-color: var(--hub-accent);
    box-shadow:
        0 0 0 1px var(--hub-accent),
        0 0 28px var(--hub-accent-glow);
}

@media (prefers-reduced-motion: reduce) {
    .product-card:hover,
    .product-card:focus-within {
        transform: none;
    }
}

.product-page-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}
.product-page-logo img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 16px 0 16px 0;
    box-shadow: 0 0 24px rgba(249,115,22,0.25);
}

.product-title {
    font-family: var(--font-display);
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
}

.product-tagline {
    font-size: 0.9375rem;
    color: var(--accent-light);
    font-weight: 500;
}

.product-desc {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    flex: 1;
}

/* ============================================================
   ABOUT
   ============================================================ */
.about {
    padding: 7rem 0;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

/* Values moved into their own manifesto section: the About grid keeps a
   single readable text column instead of an empty right half. */
.about-grid--solo {
    grid-template-columns: 1fr;
    max-width: 760px;
}

.about-text {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 1.25rem;
}

.about-cert {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin: 2rem 0;
    max-width: 380px;
}
.cert-icon {
    width: 40px; height: 40px;
    color: #22C55E;
    flex-shrink: 0;
}
.cert-icon svg { width: 100%; height: 100%; }
.cert-title { font-weight: 700; color: var(--text-primary); font-size: 0.9375rem; }
.cert-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.15rem; }

/* ============================================================
   VALUES MANIFESTO (W-2)
   Editorial list instead of cards: six type rows with hairline
   dividers; the orange lives in the value icons and in a hover
   marker instead of a surface.
   ============================================================ */
.values-manifest {
    padding: clamp(3rem, 6vw, 5rem) 0;
    background: var(--bg-primary);
}

.values-manifest .section-header {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.values-manifest-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border-strong);
}

.values-manifest-row {
    position: relative;
    display: grid;
    grid-template-columns: clamp(3.5rem, 8vw, 6rem) minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: center;
    padding: clamp(1.15rem, 2.5vw, 1.6rem) 0.75rem;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
}

/* Hover marker: a 3px accent bar sliding in at the left edge. */
.values-manifest-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-light) 100%);
    opacity: 0;
    transform: scaleY(0.4);
    transition: opacity var(--transition), transform var(--transition);
}

.values-manifest-row:hover {
    background: rgba(255, 255, 255, 0.025);
}

.values-manifest-row:hover::before {
    opacity: 1;
    transform: scaleY(1);
}

.values-manifest-icon {
    display: block;
    width: clamp(2.25rem, 4vw, 2.75rem);
    height: clamp(2.25rem, 4vw, 2.75rem);
    color: var(--accent);
    transition: color var(--transition);
}

.values-manifest-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.values-manifest-row:hover .values-manifest-icon {
    color: var(--accent-light);
}

.values-manifest-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0;
    /* Global heading rule clips an orange gradient into h3 glyphs; the
       names stay white so only icon and hover marker carry the accent. */
    background: none;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
}

.values-manifest-desc {
    font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
}

/* On-load reveal, pure CSS: rows fade up in sequence. Content is never
   hidden permanently (animation runs without JS) and reduced motion
   users see the static list. */
@media (prefers-reduced-motion: no-preference) {
    .values-manifest-row {
        animation: values-manifest-reveal 0.6s ease both;
    }
    .values-manifest-row:nth-child(2) { animation-delay: 0.08s; }
    .values-manifest-row:nth-child(3) { animation-delay: 0.16s; }
    .values-manifest-row:nth-child(4) { animation-delay: 0.24s; }
    .values-manifest-row:nth-child(5) { animation-delay: 0.32s; }
    .values-manifest-row:nth-child(6) { animation-delay: 0.4s; }
}

@keyframes values-manifest-reveal {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 767px) {
    .values-manifest-row {
        grid-template-columns: clamp(2.75rem, 12vw, 3.5rem) 1fr;
    }
    .values-manifest-desc {
        grid-column: 2;
    }
}

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline {
    padding: 7rem 0;
    overflow: hidden;
}

.timeline-track { position: relative; margin-top: 3rem; }

.timeline-line {
    position: absolute;
    left: 80px;
    top: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--border-strong) 10%, var(--border-strong) 90%, transparent);
}

.timeline-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.timeline-item {
    display: grid;
    grid-template-columns: 80px 24px 1fr;
    gap: 0 1.5rem;
    align-items: flex-start;
    padding: 1.5rem 0;
    transition: all var(--transition);
}
.timeline-item:hover .tl-content { color: var(--text-primary); }

.tl-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border-strong);
    margin-top: 0.3rem;
    grid-column: 2;
    transition: all var(--transition);
    flex-shrink: 0;
    justify-self: center;
}
.tl-dot-active {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 16px var(--accent-glow);
}
.timeline-item:hover .tl-dot {
    background: var(--accent);
    border-color: var(--accent);
}

.tl-year {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-muted);
    text-align: right;
    grid-column: 1;
    margin-top: 0.15rem;
    transition: color var(--transition);
}
.tl-year-active { color: var(--accent); }
.timeline-item:hover .tl-year { color: var(--accent-light); }

.tl-content { grid-column: 3; }
.tl-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}
.tl-desc { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.55; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
    /* Compacted from a flat 7rem: at 1600px this was the second-tallest
       homepage section; the equal-height columns keep their behaviour. */
    padding: clamp(3.5rem, 6vw, 4.5rem) 0;
    background: var(--bg-secondary);
    position: relative;
    overflow: hidden;
}
.contact::before {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 600px; height: 600px;
    background: radial-gradient(ellipse at bottom right, rgba(249,115,22,0.06) 0%, transparent 60%);
    pointer-events: none;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 5rem;
    align-items: flex-start;
}

/* Grid children must be allowed to shrink below their min-content width: the
   phone number in the contact card is one unbreakable token whose automatic
   minimum size would otherwise widen the single-column track beyond a 320px
   viewport and give the whole page a horizontal scrollbar. */
.contact-left,
.contact-right {
    min-width: 0;
}

.contact-intro {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.75rem;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.contact-icon {
    width: 40px; height: 40px;
    color: var(--accent);
    background: var(--accent-glow);
    border-radius: var(--radius-md);
    padding: 8px;
    flex-shrink: 0;
}
.contact-icon svg { width: 100%; height: 100%; }
.contact-detail-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}
.contact-detail-value { font-size: 0.9375rem; color: var(--text-primary); line-height: 1.55; }
.contact-detail-sub { color: var(--text-muted); font-size: 0.875rem; }
.contact-link { color: var(--accent-light); transition: color var(--transition); }
.contact-link:hover { color: var(--text-primary); }

/* Form */
.contact-form {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

.contact-form:hover,
.contact-form:focus-within {
    border-color: var(--accent);
    box-shadow:
        0 0 0 1px var(--accent),
        0 0 28px var(--accent-glow);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group { display: flex; flex-direction: column; gap: 0.4rem; }

.form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}

.form-input {
    background: var(--field-bg);
    border: 1.5px solid var(--field-border);
    border-radius: var(--radius-md);
    min-height: 44px;
    padding: 0.75rem 1rem;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    color: var(--field-ink);
    color-scheme: light;
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
    width: 100%;
}
.form-input::placeholder { color: var(--field-placeholder); }
.form-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(249,115,22,0.28);
}
.form-input:disabled {
    background: var(--field-bg-disabled);
    color: var(--field-placeholder);
    cursor: not-allowed;
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}
.form-select option {
    background: var(--field-bg);
    color: var(--field-ink);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
    font-family: var(--font-sans);
}

/* Application and demo forms bring their own field block per page
   (.form-field on the job pages, .mf-field in the product enquiry modals,
   .vm-field on the design role). The white surface is set there next to that
   page's geometry; placeholder tone, focus ring and touch height live here so
   all three stay in step with the contact form instead of repeating the same
   three declarations two dozen times. */
.form-field input,
.form-field textarea,
.form-field select,
.mf-field input,
.mf-field textarea,
.vm-field input,
.vm-field textarea {
    min-height: 44px;
}

/* The file pickers are <label> elements inside .form-field, so the page-local
   `.form-field label` rule (0,1,1) outranks their own `.form-upload-label`
   (0,1,0) and was painting them --text-secondary: 2.3:1 once the surface went
   white. Two class selectors settle it. The 44px height is stated here as well
   because two of the page-local variants sized these off a 0.8125rem font and
   landed near 34px. */
.form-field .form-upload-label {
    min-height: 44px;
    color: var(--field-placeholder);
}

.form-field .form-upload-label:hover {
    color: var(--field-ink);
}

.form-field input::placeholder,
.form-field textarea::placeholder,
.mf-field input::placeholder,
.mf-field textarea::placeholder,
.vm-field input::placeholder,
.vm-field textarea::placeholder {
    color: var(--field-placeholder);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus,
.mf-field input:focus,
.mf-field textarea:focus,
.vm-field input:focus,
.vm-field textarea:focus {
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.28);
}

.form-hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: -0.25rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
/* ============================================================
   FOOTER — Glass Card with Orange Glow Orbs
   ============================================================ */
.footer {
    position: relative;
    padding: 5rem 0 2.5rem;
    background: var(--bg-primary);
    overflow: hidden;
}

/* Orange glow orbs (inspired by demo.tsx, adapted to brand orange) */
.footer-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.footer-orb-1 {
    top: -6rem;
    left: 8%;
    width: 26rem;
    height: 26rem;
    background: radial-gradient(circle, rgba(249,115,22,0.16) 0%, transparent 70%);
    filter: blur(48px);
}
.footer-orb-2 {
    bottom: -5rem;
    right: 6%;
    width: 32rem;
    height: 32rem;
    background: radial-gradient(circle, rgba(249,115,22,0.10) 0%, transparent 70%);
    filter: blur(60px);
}

/* Glass card container */
.footer-glass {
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    background: radial-gradient(ellipse at 15% 50%, rgba(249,115,22,0.07) 0%, rgba(22,22,22,0.88) 55%, rgba(8,8,8,0.94) 100%);
    border: 1px solid rgba(249,115,22,0.14);
    border-radius: var(--radius-xl);
    padding: clamp(2rem, 3vw, 3rem);
    margin-bottom: 2rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1.25fr;
    gap: 2rem;
}

/* Brand column */
.footer-logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: 1rem;
    text-decoration: none;
}
.footer-logo-img { height: 28px; width: auto; }

.footer-tagline {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 1.25rem;
    max-width: 220px;
}

.footer-social {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    flex-wrap: wrap;
}

.social-link {
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all var(--transition);
}
.social-link svg { width: 16px; height: 16px; }
.social-link:hover {
    background: var(--accent-glow);
    border-color: var(--accent);
    color: var(--accent-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(249,115,22,0.2);
}
.social-link-text {
    width: auto;
    padding: 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* Column headers — orange tracking label style */
.footer-col-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-light);
    margin-bottom: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.footer-col-title::before {
    content: '';
    display: block;
    width: 16px;
    height: 1.5px;
    background: var(--accent);
    border-radius: 2px;
    flex-shrink: 0;
}

.footer-col-title--stacked {
    margin-top: 1rem;
}

.footer-product-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-product-link img {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    flex-shrink: 0;
    object-fit: contain;
}

/* Nav links */
.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.footer-links a {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    transition: color var(--transition), padding-left var(--transition);
}
.footer-links a:hover {
    color: var(--text-primary);
    padding-left: 0.25rem;
}

/* Contact list with icons */
.footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-bottom: 1.5rem;
}
.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}
.footer-contact-icon {
    width: 16px;
    height: 16px;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 0.15rem;
}
.footer-contact-item a,
.footer-contact-address {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-style: normal;
    line-height: 1.6;
    transition: color var(--transition);
}
.footer-contact-item a:hover { color: var(--text-primary); }

/* CTA button in contact column */
/* The footer CTA is the same offer as the navigation CTA, so it carries the same
   fill: the lit-from-above gradient with a near-black label. It used to be a
   translucent orange wash with an orange label, which on the near-black footer
   read as a disabled button rather than the one action of the column.
   min-height meets the 44px touch target the 0.625rem padding fell short of. */
.footer-cta-btn {
    --btn-cast: 194, 65, 12;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(180deg,
        var(--accent-light) 0%,
        var(--accent) 55%,
        color-mix(in srgb, var(--accent) 88%, #000) 100%);
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bg-primary);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        inset 0 -1px 0 rgba(88, 30, 0, 0.28),
        0 1px 2px rgba(0, 0, 0, 0.50),
        0 10px 24px -10px rgba(var(--btn-cast), 0.65);
    transition: all var(--transition);
    white-space: nowrap;
}
.footer-cta-btn::after {
    content: '›';
    font-size: 1.1rem;
    font-weight: 700;
    transition: transform var(--transition);
}
.footer-cta-btn:hover,
.footer-cta-btn:focus-visible {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--accent-light) 82%, #fff) 0%,
        var(--accent-light) 55%,
        var(--accent) 100%);
    border-color: var(--accent-light);
    color: var(--bg-primary);
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        inset 0 -1px 0 rgba(88, 30, 0, 0.24),
        0 2px 4px rgba(0, 0, 0, 0.50),
        0 14px 30px -12px rgba(var(--btn-cast), 0.80);
}

.footer-cta-btn:focus-visible {
    outline: 3px solid var(--text-primary);
    outline-offset: 3px;
}
.footer-cta-btn:hover::after,
.footer-cta-btn:focus-visible::after { transform: translateX(3px); }

/* Bottom bar */
.footer-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    flex-wrap: nowrap;
    gap: 0.75rem;
}
.footer-copyright {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    flex: 0 1 auto;
    min-width: 0;
}
.footer-legal {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: clamp(0.75rem, 1.4vw, 1.25rem);
}
.footer-legal a {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    transition: color var(--transition);
    white-space: nowrap;
}
.footer-legal a:hover { color: var(--text-primary); }

/* Six columns from laptop width up so Marken/Produkte stay beside Kontakt. */
@media (min-width: 1200px) {
    .footer-grid {
        grid-template-columns:
            minmax(0, 1.35fr)
            minmax(0, 1fr)
            minmax(0, 0.88fr)
            minmax(0, 0.95fr)
            minmax(0, 1.05fr)
            minmax(0, 0.82fr);
        gap: clamp(1.25rem, 1.8vw, 2rem);
    }
}
.footer-brands-col .footer-links a {
    word-break: break-word;
}

/* Responsive */
@media (max-width: 1024px) {
    .footer-glass { padding: 2.5rem; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
@media (max-width: 640px) {
    .footer-glass { padding: 2rem 1.5rem; border-radius: var(--radius-lg); }
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer-tagline { max-width: 100%; }
}

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal-prose h2 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.legal-prose p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 1rem;
}
.legal-prose a {
    color: var(--accent);
    text-decoration: none;
}
.legal-prose a:hover {
    text-decoration: underline;
}
.legal-notice {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(249, 115, 22, 0.28);
  border-radius: var(--radius-md);
  background: rgba(249, 115, 22, 0.08);
  color: var(--text-primary);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .about-grid,
    .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
    .products-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 1100px) {
    /* --- Navbar --- */
    .nav-container { gap: 1rem; padding: 0 1.5rem; }
    .nav-link { font-size: 0.85rem; }
    .nav-link.nav-cta { padding: 0.5rem 1rem; }
}

@media (max-width: 768px) {
    /* --- Navbar --- */
    .nav-container { display: flex; justify-content: space-between; padding: 0 1.25rem; gap: 0.75rem; }
    .nav-logo-img { height: 26px; }
    .lang-switcher { display: none; }

    .nav-links {
        display: none;
        position: fixed;
        inset: 0;
        top: 72px;
        /* The navbar's backdrop-filter makes it the containing block for this
           fixed overlay, so bottom: 0 resolves against the ~72px-tall navbar
           and collapses the menu to height 0. An explicit viewport-based
           height keeps the overlay full-screen regardless. */
        height: calc(100vh - 72px);
        overflow-y: auto;
        background: rgba(7,11,20,0.97);
        backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: center;
        /* "safe" keeps the first items reachable once an open accordion makes
           the menu taller than the viewport; without it centered overflow is
           clipped at the top and cannot be scrolled to. */
        justify-content: safe center;
        gap: 1.5rem;
        z-index: 999;
        padding: 1.5rem 1rem;
    }
    .nav-links.open { display: flex; }
    .nav-link { font-size: 1.25rem; padding: 0.75rem 1.5rem; }
    .nav-actions .nav-cta { display: none; }
    .nav-burger { display: flex; }

    /* Dropdown panels become static full-width accordion sections inside the
       overlay. The absolute desktop panel would otherwise shrink to the width
       of its <li> and squeeze the mega grid into overlapping columns. The
       open-state selector must repeat here because the desktop rule
       (.nav-dropdown.open …) is more specific than the plain media override. */
    /* text-align centers the shrink-wrapped trigger link inside the
       full-width list item. */
    .nav-dropdown {
        width: 100%;
        text-align: center;
    }
    .nav-dropdown-menu,
    .nav-dropdown-menu.nav-mega {
        position: static;
        min-width: 0;
        width: 100%;
        box-shadow: none;
        text-align: left;
    }
    /* .nav-links raises specificity above the desktop open-state rule, which
       appears later in the file and would win at equal specificity. */
    .nav-links .nav-dropdown.open .nav-dropdown-menu.nav-mega {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* --- Hero Headline --- */
    .hero { padding: 6rem 1.5rem 4rem; }
    .hero-headline { font-size: clamp(2rem, 8vw, 3rem); }
    .hero-sub { font-size: 1rem; }
    .hero-badge { font-size: 0.75rem; padding: 0.35rem 0.8rem; }
    .hero-scroll { display: none; }

    /* --- Footer --- */
    .stats-grid { gap: 1.5rem; }
    .stat-divider { display: none; }
    .form-row { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; flex-wrap: wrap; }
    .footer-legal { flex-wrap: wrap; gap: 0.75rem 1rem; }
    .footer-legal a,
    .footer-legal .footer-cookie-btn { white-space: normal; }
    .hero-actions { flex-direction: column; align-items: center; }
    .page-hero--banner .hero-actions { align-items: flex-start; }
    .contact-form { padding: 1.75rem; }
    .timeline-line { left: 60px; }
    .timeline-item { grid-template-columns: 60px 20px 1fr; gap: 0 1rem; }
}

@media (max-width: 480px) {
    /* --- Navbar --- */
    .navbar { padding: 1rem 0; }
    .navbar.scrolled { padding: 0.75rem 0; }
    .nav-container { padding: 0 1rem; }
    .nav-logo-img { height: 22px; }

    /* --- Hero Headline --- */
    .container { padding: 0 1.25rem; }
    .hero { padding: 5rem 1.25rem 3.5rem; }
    .hero-headline { font-size: clamp(1.75rem, 9vw, 2.5rem); line-height: 1.2; }
    .hero-sub { font-size: 0.9375rem; }
    .hero-badge { margin-bottom: 1.25rem; }

    /* --- Footer --- */
    .product-card { padding: 1.5rem; }
    /* Corner logo follows the reduced card padding and shrinks so the headline
       still fits on one line next to it. */
    .product-card {
        --product-logo-size: 64px;
        --product-logo-inset: 1.5rem;
    }
    .section-title { font-size: 1.75rem; }
    .footer-glass { padding: 1.5rem 1rem; }
    .footer-bottom { align-items: center; text-align: center; }
    .footer-legal { justify-content: center; }
    .footer-copyright { text-align: center; }
}

/* Below 360px the longest German CTA labels no longer fit on one line, and the button
   would push the page wider than the viewport. Wrapping is only permitted here, so the
   single-line appearance on every common phone, tablet and desktop width stays identical.
   change log: 16.08.2026 – Thomas Schäfer – Allow CTA labels to wrap on very narrow screens. */
@media (max-width: 359px) {
    .btn {
        white-space: normal;
        text-align: center;
    }
    /* Smallest phones: the corner logo gives up width so "C1-STREAM" keeps to
       one line beside it. */
    .product-card {
        --product-logo-size: 52px;
        --product-logo-inset: 1.25rem;
    }
}

/* ============================================================
   SUCCESS STATE (Form)
   ============================================================ */
.form-success {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    padding: 3rem 2rem;
}
.form-success.visible { display: flex; }
.form-success-icon { font-size: 3rem; }
.form-success-title { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
.form-success-sub { font-size: 0.9375rem; color: var(--text-secondary); }
.form-success-icon svg { color: var(--accent); }

.form-status {
  min-height: 1.25rem;
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.form-status.is-success {
  color: var(--accent-light);
}

.form-status.is-error {
  color: #F87171;
}

/* ============================================================
   SUBPAGE STYLES
   ============================================================ */

.page-hero {
    padding: 9rem 0 5rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}
.page-hero::after {
    content: '';
    position: absolute;
    top: 50%; right: -100px;
    transform: translateY(-50%);
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(249,115,22,0.08) 0%, transparent 70%);
    pointer-events: none;
}
.page-hero .container {
    position: relative;
    z-index: 1;
    text-align: center;
}

.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}
.breadcrumb a { color: var(--text-muted); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--accent-light); }
.breadcrumb-sep { color: var(--text-muted); opacity: 0.4; }

/* Block with an inline dash, not flex: the glossary script splits the label
   into several nodes when it wraps an abbreviation ("Leistungen · CSA"), and
   flex would give each fragment its own item plus gap. Centering comes from
   the inherited text-align. */
.page-hero-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-light);
    margin-bottom: 0.875rem;
}
.page-hero-label::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 24px; height: 2px;
    margin-right: 0.5rem;
    background: var(--accent);
    border-radius: 2px;
}

.page-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    max-width: 800px;
    margin: 0 auto 1.25rem;
    line-height: 1.15;
}

.page-hero-sub {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    max-width: 680px;
    line-height: 1.75;
    margin: 0 auto;
}

.page-content {
    padding: 5rem 0;
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 4rem;
    align-items: flex-start;
}

/* News and article pages: the reading measure belongs to the column, not to the
   paragraphs inside it. Capping only the <p> elements at 74ch left the track at
   1fr, so every viewport wider than the measure opened a dead black lane
   between the text and the sticky sidebar (230px at 1440, roughly 490px at
   1920). Sizing the track to the measure moves that leftover space to the
   outside of the grid, where it reads as page margin instead of a hole, and
   pulls the article photo, the facts row and the headings onto the same right
   edge as the body copy.
   The first attempt sized the track at 44rem, the measure the paragraphs had at
   0.9375rem. That closed the lane but left 216px of air on each side of the
   block at 1600, and against the full-width navigation the page read as if it
   were ignoring the space it has. The track is 50rem now and the body type
   steps up to 1.0625rem from 1280 (see below), which keeps the line at roughly
   75 characters while the block grows to about 1264px with the wider sidebar.
   The remaining slack halves to around 128px per side, which reads as margin.
   The 0 floor keeps the track shrinking normally down to the breakpoint.
   The min-width query is load-bearing, not a convenience: :has() carries the
   specificity of its argument, so this selector counts as two classes and beat
   the single-column .content-grid rule in the max-width: 1024px block below.
   Unscoped, phones kept both tracks and the article column resolved to 0px. */
@media (min-width: 1025px) {
    .content-grid:has(.article-body) {
        grid-template-columns: minmax(0, 50rem) 360px;
        justify-content: center;
    }
}

/* The wider track needs bigger type, otherwise the line runs past 80 characters
   and the article reads like a wall. 1.0625rem puts 50rem at roughly 75
   characters. This deliberately overrides the 0.9375rem the news pages set in
   their own <style> blocks: the extra class in the selector wins, so the four
   older articles and the brand portraits finally share one body size. */
@media (min-width: 1280px) {
    .content-main .article-body p,
    .content-main .article-body li {
        font-size: 1.0625rem;
    }
}

/* As a grid item this column defaults to min-width: auto, so a single wide child (long German
   compound word, data table) would stretch the whole page. Cap the floor and let words break.
   change log: 16.08.2026 – Thomas Schäfer – Guard against horizontal overflow on narrow viewports. */
.content-main {
    min-width: 0;
    overflow-wrap: break-word;
}

.content-main h2 {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 700;
    margin: 2.5rem 0 1rem;
    letter-spacing: -0.01em;
}
.content-main h2:first-child { margin-top: 0; }

.content-main h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 1.75rem 0 0.75rem;
}

.content-main p {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1.25rem;
}

.content-main ul, .content-main ol {
    margin: 1rem 0 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.content-main li {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    padding-left: 1.25rem;
    position: relative;
    line-height: 1.65;
}
.content-main ul li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
}
.content-main ol { counter-reset: item; }
.content-main ol li { counter-increment: item; }
.content-main ol li::before {
    content: counter(item) '.';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 700;
    font-size: 0.8125rem;
}

.content-main a {
    color: var(--accent-light);
    text-decoration: underline;
    text-decoration-color: rgba(251,146,60,0.3);
    text-underline-offset: 3px;
    transition: color 0.2s;
}
.content-main a:hover { color: var(--text-primary); }

.content-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.content-sidebar:not(.content-sidebar--split):not(.sw-dev-sidebar--split) {
    position: sticky;
    top: 100px;
}

/* Split sticky sidebar: compact contact stays pinned; link cards stick below it. */
.content-grid:has(.content-sidebar--split),
.content-grid:has(.sw-dev-sidebar--split),
.sw-dev-layout:has(.content-sidebar--split),
.sw-dev-layout:has(.sw-dev-sidebar--split) {
    align-items: stretch;
}

.content-sidebar.content-sidebar--split,
.content-sidebar.sw-dev-sidebar--split,
.sw-dev-layout__sidebar.content-sidebar--split,
.sw-dev-layout__sidebar.sw-dev-sidebar--split {
    position: static;
    top: auto;
    align-self: stretch;
    --sidebar-sticky-offset: 100px;
    --sidebar-contact-height: 18.5rem;
    --sidebar-links-gap: 1.25rem;
    --sidebar-links-top: calc(
        var(--sidebar-sticky-offset) + var(--sidebar-contact-height) + var(--sidebar-links-gap)
    );
}

.sw-dev-sidebar__sticky {
    position: sticky;
    top: var(--sidebar-sticky-offset, 100px);
    z-index: 3;
}

.sw-dev-sidebar__sticky-links {
    position: sticky;
    top: var(--sidebar-links-top, 26rem);
    z-index: 2;
    align-self: start;
    width: 100%;
    margin-top: var(--sidebar-links-gap, 1.25rem);
}

.content-sidebar--split .contact-sidebar-card--compact,
.sw-dev-sidebar--split .contact-sidebar-card--compact {
    padding: 0 1.15rem 1.15rem;
}

.content-sidebar--split .contact-sidebar-card--compact.contact-sidebar-card--persona,
.sw-dev-sidebar--split .contact-sidebar-card--compact.contact-sidebar-card--persona {
    padding-top: 0;
}

.content-sidebar--split .contact-persona--compact,
.sw-dev-sidebar--split .contact-persona--compact {
    margin: 0 -1.15rem 0.85rem;
    width: calc(100% + 2.3rem);
    height: 176px;
    border-bottom: 1px solid rgba(249, 115, 22, 0.45);
}

.content-sidebar--split .contact-persona--compact .contact-persona-image,
.sw-dev-sidebar--split .contact-persona--compact .contact-persona-image {
    object-position: center 18%;
    width: 100%;
    height: 100%;
}

.content-sidebar--split .contact-persona--compact .contact-persona-overlay,
.sw-dev-sidebar--split .contact-persona--compact .contact-persona-overlay {
    inset: auto 0.85rem 0.55rem;
}

.content-sidebar--split .contact-persona--compact .contact-persona-label,
.sw-dev-sidebar--split .contact-persona--compact .contact-persona-label {
    font-size: 0.625rem;
    letter-spacing: 0.1em;
}

.content-sidebar--split .contact-persona--compact .contact-persona-title,
.sw-dev-sidebar--split .contact-persona--compact .contact-persona-title {
    font-size: 0.95rem;
    margin-top: 0.15rem;
}

.sw-dev-sidebar__teaser {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.sw-dev-sidebar__cta-row {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.sw-dev-sidebar__phone {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s;
}

.sw-dev-sidebar__phone:hover {
    color: var(--accent-light);
}

.sw-dev-sidebar__phone:focus-visible {
    outline: 2px solid var(--accent-light);
    outline-offset: 2px;
    border-radius: 2px;
}

.content-sidebar--split .contact-sidebar-card--compact .btn,
.sw-dev-sidebar--split .contact-sidebar-card--compact .btn {
    width: 100%;
    margin: 0;
}

.content-sidebar--split .sidebar-demo-link,
.sw-dev-sidebar--split .sidebar-demo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--accent);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.content-sidebar--split .sidebar-demo-link:hover,
.sw-dev-sidebar--split .sidebar-demo-link:hover {
    color: #fdba74;
}

.content-sidebar--split .sidebar-demo-link:focus-visible,
.sw-dev-sidebar--split .sidebar-demo-link:focus-visible {
    outline: 2px solid var(--accent-light);
    outline-offset: 2px;
    border-radius: 2px;
}

.sw-dev-sidebar__links {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0;
}

@media (max-width: 1024px) {
    .sw-dev-sidebar__sticky,
    .sw-dev-sidebar__sticky-links {
        position: static;
    }

    .sw-dev-sidebar__sticky-links {
        margin-top: 1.25rem;
    }

    .content-sidebar--split .contact-persona--compact,
    .sw-dev-sidebar--split .contact-persona--compact {
        height: clamp(200px, 42vw, 280px);
    }
}

.sidebar-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    position: relative;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
    box-shadow: 0 0 18px rgba(249,115,22,0.07), 0 2px 12px rgba(0,0,0,0.25);
}
.sidebar-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(249,115,22,0.06) 0%, transparent 60%);
    pointer-events: none;
}
.sidebar-card:hover {
    border-color: rgba(249,115,22,0.4);
    box-shadow: 0 0 32px rgba(249,115,22,0.18), 0 8px 28px rgba(0,0,0,0.35);
    transform: translateY(-2px);
}
.sidebar-card-title {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}
.sidebar-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* Block, not flex: the glossary script (js/abbr-tooltip.js) splits the label
   into several nodes when it wraps an abbreviation, and a flex container would
   turn each fragment into its own item with a gap, tearing "GAMP 5" and the
   brackets around "(CSA)" apart. Hanging indent keeps wrapped lines clear of
   the marker. */
.sidebar-links a {
    font-size: 0.875rem;
    color: var(--text-muted);
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--border);
    transition: color 0.2s;
    display: block;
    padding-left: 1rem;
    text-indent: -1rem;
}
.sidebar-links a::before {
    content: '›';
    display: inline-block;
    width: 1rem;
    color: var(--accent);
    font-size: 1rem;
    font-weight: 700;
    text-indent: 0;
}
.sidebar-links a:last-child { border-bottom: none; }
.sidebar-links a:hover { color: var(--accent-light); }

.contact-sidebar-card {
    background: linear-gradient(135deg, #161616 0%, #1A0E06 100%);
    border-color: rgba(249,115,22,0.25);
}
.contact-sidebar-card .btn { width: 100%; }

/* Persona variant of the contact card: the portrait bleeds to the card edges and
   carries the card head, instead of sitting above the text as a small framed
   thumbnail. Modifier class, because legal and news pages use the plain card. */
.contact-sidebar-card--persona {
  padding-top: 0;
  overflow: hidden;
}

.contact-persona {
  position: relative;
  /* Negative side margins cancel the .sidebar-card padding (1.5rem) so the
     photo touches the card edges; keep both values in sync. */
  margin: 0 -1.5rem 1.25rem;
  aspect-ratio: 6 / 7;
  border-bottom: 1px solid rgba(249, 115, 22, 0.5);
}

/* Scrim keeps the overlaid label and title readable on bright photo areas.
   It covers 30% rather than the 55% it started at, and ramps to full strength
   just above the label instead of fading across the whole lower half. The long
   soft fade darkened 204px of a 371px portrait to protect a 66px label block:
   the torso sank into the card and the photo read as a squat head-and-shoulders
   crop rather than a portrait. The steeper ramp also measures better where it
   matters, because the old gradient was still thin behind the small orange
   label: on the two headset portraits the label goes from 3.3:1 to 6.6:1 and
   the title from 10.6:1 to 16:1, checked in the 318x371 sidebar frame, the
   600x420 homepage card and the 704x420 stacked crop. */
.contact-persona::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(to bottom,
    rgba(8, 8, 8, 0) 0%,
    rgba(8, 8, 8, 0.85) 40%,
    rgba(8, 8, 8, 0.95) 100%);
  pointer-events: none;
}

.contact-persona-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keeps the face in frame when the crop gets wider on stacked layouts. */
  object-position: center 18%;
}

.contact-persona-overlay {
  position: absolute;
  inset: auto 1.25rem 1rem 1.25rem;
  z-index: 1;
}

.contact-persona-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-light);
}

.contact-persona-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 0.2rem;
}

/* Below 1024px the sidebar stacks to full content width, where a strict 6:7
   portrait would outgrow the viewport; cap the height and let the crop widen. */
@media (max-width: 1024px) {
  .contact-persona {
    aspect-ratio: auto;
    height: clamp(320px, 46vw, 420px);
  }
}

.faq-section { margin-top: 3rem; }
.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.faq-question {
    padding: 1.25rem 1.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.25rem;
    transition: background 0.2s;
}
.faq-question:hover { background: var(--bg-card-hover); }
.faq-question::after {
    content: '+';
    color: var(--accent);
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 1rem;
    transition: transform 0.2s;
}
.faq-item.open .faq-question::after { transform: rotate(45deg); }
.faq-answer {
    display: none;
    padding: 0 1.5rem 1.25rem;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.75;
    border-top: 1px solid var(--border);
}
.faq-item.open .faq-answer { display: block; }

.highlight-box {
    background: var(--bg-card);
    border: 1px solid rgba(249,115,22,0.25);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
}
.highlight-box h2,
.highlight-box h3 {
    margin-top: 0;
}
.highlight-box p { color: var(--text-primary); margin: 0; }
.highlight-box .btn {
    margin-top: 1rem;
}

.feature-grid {
    display: grid;
    /* min() caps the track floor at the container width, so a narrow column can never
       force the page wider than the viewport. */
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 1rem;
    margin: 2rem 0;
}
.feature-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    transition: all 0.25s;
}
.feature-item-title { font-weight: 700; color: var(--text-primary); font-size: 0.9375rem; margin-bottom: 0.375rem; }
.feature-item-desc { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.55; }
.feature-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }

/* Cube-frame hover in two tiers. A frame that leads somewhere gets the full
   accent state (orange edge, ring, glow) so the affordance is unmistakable. A
   non-clickable info tile gets a muted accent edge only: it keeps the orange
   language of the site without promising a target that does not exist. Touch
   devices keep the resting frame, because an emulated hover would strand the
   state on the tile after a tap. */
@media (hover: hover) and (pointer: fine) {
    .feature-item:hover {
        border-color: rgba(249, 115, 22, 0.4);
        transform: translateY(-2px);
    }
    a.feature-item:hover {
        border-color: var(--accent);
        box-shadow:
            0 0 0 1px var(--accent),
            0 0 28px var(--accent-glow);
        transform: translateY(-2px);
    }
}

/* Computer Software Assurance is not a sibling alternative to the neighbouring
   validation topics, it is the method that makes a CSV project leaner. The
   large stopwatch watermark expresses saved time without adding another boxed
   foreground icon to the card. */
.csa-lever {
    display: block;
    position: relative;
    overflow: hidden;
    margin: 2rem 0;
    padding: 1.5rem 1.75rem;
    background:
        radial-gradient(65% 180% at 100% 50%, rgba(249, 115, 22, 0.16), transparent 68%),
        var(--bg-card);
    border: 1px solid rgba(249, 115, 22, 0.45);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.25s;
}

.content-main a.csa-lever {
    text-decoration: none;
}

/* Short accent marker at the top edge, the same signature the bento tiles use. */
.csa-lever::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 96px;
    height: 2px;
    background: var(--accent);
}

.csa-lever-watermark {
    position: absolute;
    top: 50%;
    right: 1.25rem;
    width: 11rem;
    height: 11rem;
    color: var(--accent);
    opacity: 0.09;
    pointer-events: none;
    transform: translateY(-50%) rotate(-7deg);
}

.csa-lever-body {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.csa-lever-eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-light);
    margin-bottom: 0.375rem;
}

.csa-lever-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.csa-lever-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 0.75rem;
}

.csa-lever-cta {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent);
}

@media (hover: hover) and (pointer: fine) {
    .csa-lever:hover {
        border-color: var(--accent);
        box-shadow:
            0 0 0 1px var(--accent),
            0 0 28px var(--accent-glow);
        transform: translateY(-2px);
    }
}

@media (max-width: 599px) {
    .csa-lever {
        padding: 1.25rem;
    }
    .csa-lever-watermark {
        right: -1rem;
        width: 8rem;
        height: 8rem;
    }
}

/* Every public quiz or quick-check entry point uses one visual language:
   regulatory kicker, paragraph watermark, equal-height card and a bottom-aligned
   action. The generic name keeps the component usable beyond Annex 11. */
.quiz-callout-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 2rem 0;
}

.quiz-callout-grid--single {
    grid-template-columns: minmax(0, 1fr);
}

.quiz-callout {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem;
    background:
        radial-gradient(90% 120% at 100% 0%, rgba(249, 115, 22, 0.16), transparent 62%),
        var(--bg-card);
    border: 1px solid rgba(249, 115, 22, 0.25);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    transition: all 0.25s;
}

/* Decorative glyph. Kept out of the accessibility tree via aria-hidden on the
   element that carries it, and out of pointer handling so the buttons stay hit. */
.quiz-callout-watermark {
    position: absolute;
    top: -2.5rem;
    right: 0.25rem;
    font-size: 11rem;
    line-height: 1;
    font-weight: 700;
    color: rgba(249, 115, 22, 0.09);
    pointer-events: none;
    user-select: none;
}

.quiz-callout-kicker {
    position: relative;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-light);
    margin-bottom: 0.25rem;
}

.quiz-callout-title {
    position: relative;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.625rem;
}

.quiz-callout-desc {
    position: relative;
    font-size: 0.875rem;
    color: var(--text-primary);
    line-height: 1.65;
    margin: 0 0 1.25rem;
}

/* Pushes both buttons onto the same baseline no matter how long the copy runs. */
.quiz-callout .btn {
    position: relative;
    margin-top: auto;
    align-self: flex-start;
}

.quiz-callout-grid--index .quiz-callout:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

@media (max-width: 767px) {
    .quiz-callout-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .quiz-callout-grid--index .quiz-callout:last-child:nth-child(odd) {
        grid-column: auto;
    }
    .quiz-callout-watermark {
        font-size: 8rem;
        top: -1.75rem;
    }
}

/* A service portfolio that is in truth a project sequence. The numeral and the
   rail carry the order, so a reader sees where a project starts and where it
   ends instead of six identically weighted headings. The counter lives in the
   stylesheet, so reordering the markup cannot desynchronise the numbers. */
.phase-track {
    counter-reset: phase;
    display: grid;
    gap: 1.5rem;
    margin: 1.5rem 0 2rem;
}

.phase-step {
    position: relative;
    counter-increment: phase;
    padding-left: 3.75rem;
}

.phase-step::before {
    content: counter(phase, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.75rem;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--accent);
}

/* Rail from one numeral to the next. It reaches into the grid gap so the steps
   read as one continuous path; the last step drops it. */
.phase-step::after {
    content: '';
    position: absolute;
    left: 1.375rem;
    top: 2.25rem;
    bottom: -1.5rem;
    width: 1px;
    background: linear-gradient(180deg, rgba(249, 115, 22, 0.45), rgba(249, 115, 22, 0.08));
}

.phase-step:last-child::after {
    display: none;
}

/* Overrides the generic .content-main h3 spacing: the numeral sets the baseline. */
.content-main .phase-step-title {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    color: var(--text-primary);
}

.content-main .phase-step-desc {
    margin: 0;
}

.phase-step-result {
    display: flex;
    gap: 0.625rem;
    margin-top: 0.875rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--border);
}

.phase-step-result-label {
    flex-shrink: 0;
    padding-top: 0.15rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-light);
}

.content-main .phase-step-result-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

@media (max-width: 599px) {
    .phase-step {
        padding-left: 2.75rem;
    }
    .phase-step::before {
        width: 2rem;
        font-size: 1.375rem;
    }
    .phase-step::after {
        left: 1rem;
        top: 2rem;
    }
    .phase-step-result {
        flex-direction: column;
        gap: 0.25rem;
    }
    .phase-step-result-label {
        padding-top: 0;
    }
}

/* Public review channels. Each card carries exactly one action, so the whole
   card is the link and gets the full accent hover of a clickable cube frame.
   Same card language as the quiz callouts, but with an outline glyph instead of
   a typographic watermark, because the channel and not a norm is the subject. */
.review-ask-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 2rem 0;
}

.review-ask {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem;
    background:
        radial-gradient(90% 120% at 100% 0%, rgba(249, 115, 22, 0.16), transparent 62%),
        var(--bg-card);
    border: 1px solid rgba(249, 115, 22, 0.25);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.25s;
}

/* Article links are underlined by default; the card is a surface, not a word. */
.content-main a.review-ask {
    text-decoration: none;
}

.review-ask-mark {
    position: absolute;
    top: -1rem;
    right: -0.5rem;
    width: 9.5rem;
    height: 9.5rem;
    color: var(--accent);
    opacity: 0.1;
    pointer-events: none;
}

.review-ask-body {
    position: relative;
    min-width: 0;
}

.review-ask-kicker {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-light);
    margin-bottom: 0.25rem;
}

.review-ask-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.625rem;
}

.review-ask-desc {
    font-size: 0.875rem;
    color: var(--text-primary);
    line-height: 1.65;
    margin: 0 0 1.25rem;
}

/* Keeps both call-to-action rows on one baseline, however long the copy runs. */
.review-ask-cta {
    position: relative;
    margin-top: auto;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent);
}

.review-ask-cta::after {
    content: ' \203A';
}

@media (hover: hover) and (pointer: fine) {
    .review-ask:hover {
        border-color: var(--accent);
        box-shadow:
            0 0 0 1px var(--accent),
            0 0 28px var(--accent-glow);
        transform: translateY(-2px);
    }
}

@media (max-width: 767px) {
    .review-ask-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .review-ask-mark {
        width: 7.5rem;
        height: 7.5rem;
    }
}

/* The Excel service comparison remains a readable table on wide screens and
   scrolls within its own cube frame on narrow screens. */
.excel-path-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.excel-path-grid .feature-item {
  height: 100%;
}

.excel-comparison {
  margin: 1.75rem 0 2rem;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.excel-comparison-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.excel-comparison-table th,
.excel-comparison-table td {
  padding: 0.875rem 1rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.excel-comparison-table th {
  color: var(--text-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.excel-comparison-table th:nth-child(3),
.excel-comparison-table td:nth-child(3) {
  background: rgba(249, 115, 22, 0.06);
}

.excel-comparison-table th:nth-child(3) {
  color: var(--accent-light);
}

.excel-comparison-table td {
  color: var(--text-secondary);
  line-height: 1.55;
}

.excel-comparison-table th:last-child,
.excel-comparison-table td:last-child {
  border-right: 0;
}

.excel-comparison-table tbody tr:last-child td {
  border-bottom: 0;
}

@media (hover: hover) and (pointer: fine) {
  .excel-path-grid .feature-item:hover {
    border-color: var(--accent);
    box-shadow:
      0 0 0 1px var(--accent),
      0 0 28px var(--accent-glow);
  }

  .excel-comparison-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.03);
  }

  .excel-comparison-table tbody tr:hover td:nth-child(3) {
    background: rgba(249, 115, 22, 0.1);
  }
}

/* SVG-Icons in Icon-Boxen: einheitlich in Marken-Orange (ersetzt frühere Emojis) */
.feature-icon svg,
.benefit-icon svg,
.risk-item-icon svg,
.saving-icon svg,
.scope-item-icon svg,
.doc-item-icon svg {
  color: var(--accent);
  display: block;
  flex-shrink: 0;
}

.page-cta {
    padding: 5rem 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    text-align: center;
}
.page-cta h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
}
.page-cta p { color: var(--text-secondary); margin-bottom: 2rem; font-size: 1.0625rem; }

/* Full-width contact CTA banner: lab + persona imagery behind a controllable veil.
   Background paths are resolved relative to this stylesheet, so they work on every
   page depth without per-page adjustment. The veil is a CSS overlay so opacity and
   colour stay centrally tunable and the headline stays legible.

   Two motifs alternate across the site so male and female visitors are addressed
   equally: pair one page with --banner-sie, the next with --banner-er, and keep the
   DE and EN version of the same page on the same motif. */
.page-cta--banner {
  position: relative;
  isolation: isolate;
  /* Middle ground between the halved mugshot strip and the old ~58rem
     band. A thicker cover slice shows head, shoulders and lab context
     without restoring the near-viewport height. */
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  min-height: clamp(20rem, 34vw, 40rem);
  background-size: cover;
  background-position: center 16%;
  background-repeat: no-repeat;
  /* No divider line: a light border reads as a seam against the dark imagery. */
  border-top: none;
}
.page-cta--banner-sie {
  background-image: url("../img/allgemein/cubeone-kontakt-banner-sie.jpg");
  /* 21:9 zoom-out: Sie faces sit high. 15% keeps hair inside the
     cover window at 2560 while shoulders and lab bench stay visible. */
  background-position: center 15%;
}
.page-cta--banner-er {
  background-image: url("../img/allgemein/cubeone-kontakt-banner-er.jpg");
  /* 21:9 zoom-out: Er heads sit lower than Sie; 22% keeps hair in
     frame as more torso and server-room context enter the crop. */
  background-position: center 22%;
}
.page-cta--banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--photo-band-veil);
}
.page-cta--banner .container {
  position: relative;
  z-index: 1;
}
/* The global heading rule paints h2 with a clipped gradient over a transparent
   text fill, which makes colour and text-shadow inoperative here. drop-shadow
   acts on the rendered glyphs instead and separates the type from the photo. */
.page-cta--banner h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.75));
}
.page-cta--banner p {
  color: var(--text-primary);
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
}

/* Phone viewports are taller than 21:9. A large min-height makes cover crop
   the left and right people off the split. Let padding plus copy set height,
   and pin each motif on a portrait so hair stays in the remaining window. */
@media (max-width: 599px) {
  .page-cta--banner {
    min-height: 0;
    padding: 1.75rem 0;
  }
  .page-cta--banner-sie {
    background-position: 12% 8%;
  }
  .page-cta--banner-er {
    background-position: 100% 10%;
  }
}

/* Theme hero banners: full-width photo heroes with a CSS veil (not baked into
   the asset). Base class owns layout + veil; motif modifiers set only the
   background-image. Paths are relative to this stylesheet so DE/EN page depth
   does not matter. Setting follows the page topic (lab only where content fits).
   change log: 15.08.2026 – Thomas Schäfer – Initial theme-banner hero component.
   change log: 16.08.2026 – Thomas Schäfer – Added Access-to-web-app case-story motif.
   change log: 28.08.2026 – Thomas Schäfer – Added Netzplan metro/conductor motif.
   change log: 28.08.2026 – Thomas Schäfer – Firmenlauf, Prokura, Vibe Marketing.
   change log: 29.08.2026 – Thomas Schäfer – Added Market Research procurement motif. */
.page-hero--banner {
  isolation: isolate;
  background-color: var(--bg-primary);
  background-size: cover;
  /* Extra headroom in the assets plus a high focal point so hair stays inside
     the cover crop at 2560×1440, 1920×1080 and common laptop/phone viewports. */
  background-position: center 8%;
  background-repeat: no-repeat;
  border-bottom: none;
  padding: clamp(8rem, 14vw, 11rem) 0 clamp(4rem, 8vw, 6rem);
}
/* The shared veil is a flat wash: same opacity from edge to centre. */
.page-hero--banner::before {
  background-image: none;
  background: var(--photo-hero-veil);
  mask-image: none;
  z-index: 0;
}
/* cube-group.css loads after this file. The element qualifier keeps the
   shared flat veil authoritative without editing that module. */
html .group-hero {
  background:
    var(--photo-hero-veil),
    url("../img/allgemein/cubeone-themenbanner-cube-group.jpg") center 8% / cover no-repeat;
}
/* Hide the floating accent blob; the photo already carries orange accents. */
.page-hero--banner::after {
  display: none;
}
.page-hero--banner .container {
  position: relative;
  z-index: 1;
}
.page-hero--banner .page-hero-title {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.75));
}
.page-hero--banner .page-hero-sub {
  color: var(--text-primary);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
}
/* Service banner CTAs sit bottom-left under the lead, not centred like the homepage hero. */
.page-hero--banner .hero-actions {
  justify-content: flex-start;
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
  margin-bottom: 0;
}
.page-hero--banner .breadcrumb,
.page-hero--banner .breadcrumb a,
.page-hero--banner .breadcrumb-sep {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}
.page-hero--banner-csv {
  background-image: url("../img/allgemein/cubeone-themenbanner-csv-validierung.jpg");
}
.page-hero--banner-datenintegritaet {
  background-image: url("../img/allgemein/cubeone-themenbanner-datenintegritaet.jpg");
  background-position: center 4%;
}
.page-hero--banner-alcoa-plus {
  background-image: url("../img/allgemein/cubeone-themenbanner-alcoa-plus.jpg");
}
.page-hero--banner-digitale-signaturen {
  background-image: url("../img/allgemein/cubeone-themenbanner-digitale-signaturen.jpg");
}
.page-hero--banner-audit-trail-review {
  background-image: url("../img/allgemein/cubeone-themenbanner-audit-trail-review.jpg");
}
.page-hero--banner-qualifizierung {
  background-image: url("../img/allgemein/cubeone-themenbanner-qualifizierung.jpg");
  background-position: center 4%;
}
.page-hero--banner-produktionsanlagen {
  background-image: url("../img/allgemein/cubeone-themenbanner-produktionsanlagen-qualifizierung.jpg");
  background-position: center 16%;
}
.page-hero--banner-projekt-pmo {
  background-image: url("../img/allgemein/cubeone-themenbanner-projekt-pmo.jpg");
}
.page-hero--banner-market-research {
  background-image: url("../img/allgemein/cubeone-themenbanner-market-research.jpg");
}
@media (max-width: 1023px) {
  .page-hero--banner-market-research {
    background-position: 72% 8%;
  }
}
.page-hero--banner-change-management {
  background-image: url("../img/allgemein/cubeone-themenbanner-change-management.jpg");
}
.page-hero--banner-softwareentwicklung {
  background-image: url("../img/allgemein/cubeone-themenbanner-softwareentwicklung.jpg");
}
.page-hero--banner-it-administration {
  background-image: url("../img/allgemein/cubeone-themenbanner-it-administration.jpg");
}
.page-hero--banner-ki-workflows {
  background-image: url("../img/allgemein/cubeone-themenbanner-ki-workflows.jpg");
}
.page-hero--banner-ki-anlagenqualifizierung {
  background-image: url("../img/allgemein/cubeone-themenbanner-ki-anlagenqualifizierung.jpg");
}
.page-hero--banner-labor-team {
  background-image: url("../img/allgemein/cubeone-themenbanner-labor-team.jpg");
}
.page-hero--banner-c1-radar {
  background-image: url("../img/allgemein/cubeone-themenbanner-c1-radar-monitoring.jpg");
}
.page-hero--banner-c1-stream {
  background-image: url("../img/allgemein/cubeone-themenbanner-c1-stream-datenmigration.jpg");
}
.page-hero--banner-referenzen {
  background-image: url("../img/allgemein/cubeone-themenbanner-referenzen.jpg");
}
.page-hero--banner-unternehmen {
  background-image: url("../img/allgemein/cubeone-themenbanner-unternehmen.jpg");
}
/* White shirts and lit brick sit directly under the headline here, so the
   shared hero veil leaves the text zone brighter than on the other banners.
   A slightly deeper flat wash keeps contrast on par with the default motif. */
.page-hero--banner-unternehmen::before {
  background: linear-gradient(180deg, rgba(8, 8, 8, 0.34), rgba(8, 8, 8, 0.34));
}
/* On phones the cover crop keeps only the middle 56 percent of the frame, which
   cut the third colleague in half. The group sits right of centre, so the
   focal point moves with it and all three stay whole. */
@media (max-width: 767px) {
  .page-hero--banner-unternehmen {
    background-position: 62% 8%;
  }
}
.page-hero--banner-neuigkeiten {
  background-image: url("../img/allgemein/cubeone-themenbanner-neuigkeiten.jpg");
}
.page-hero--banner-cube-care-article {
  background-image: url("../img/blog/cube-care-it-fuer-arztpraxen-banner.jpg");
}
.page-hero--banner-access-webapp {
  background-image: url("../img/allgemein/cubeone-themenbanner-access-zu-webapp.jpg");
}
.page-hero--banner-karriere {
  background-image: url("../img/allgemein/cubeone-themenbanner-karriere.jpg");
}
.page-hero--banner-branche-pharma {
  background-image: url("../img/allgemein/cubeone-themenbanner-branche-pharma.jpg");
}
.page-hero--banner-branche-medizintechnik {
  background-image: url("../img/allgemein/cubeone-themenbanner-branche-medizintechnik.jpg");
}
.page-hero--banner-branche-lebensmittel {
  background-image: url("../img/allgemein/cubeone-themenbanner-branche-lebensmittel.jpg");
}
.page-hero--banner-agb {
  background-image: url("../img/allgemein/cubeone-themenbanner-agb.jpg");
}
.page-hero--banner-datenschutz {
  background-image: url("../img/allgemein/cubeone-themenbanner-datenschutz.jpg");
}
.page-hero--banner-impressum {
  background-image: url("../img/allgemein/cubeone-themenbanner-impressum.jpg");
}
.page-hero--banner-case-stories {
  background-image: url("../img/allgemein/cubeone-themenbanner-case-stories.jpg");
}
.page-hero--banner-feedback {
  background-image: url("../img/allgemein/cubeone-themenbanner-feedback.jpg");
}
.page-hero--banner-data-readability {
  background-image: url("../img/allgemein/cubeone-themenbanner-data-readability.jpg");
}
.page-hero--banner-virtualisierung {
  background-image: url("../img/allgemein/cubeone-themenbanner-system-virtualisierung.jpg");
}
.page-hero--banner-datenarchivierung {
  background-image: url("../img/allgemein/cubeone-themenbanner-datenarchivierung.jpg");
}
.page-hero--banner-databridge {
  background-image: url("../img/allgemein/cubeone-themenbanner-databridge.jpg");
}
.page-hero--banner-chromeleon {
  background-image: url("../img/allgemein/cubeone-themenbanner-chromeleon.jpg");
}
.page-hero--banner-lims-rollout {
  background-image: url("../img/allgemein/cubeone-themenbanner-lims-rollout.jpg");
}
.page-hero--banner-nanodrop {
  background-image: url("../img/allgemein/cubeone-themenbanner-nanodrop.jpg");
}
.page-hero--banner-netzplan {
  background-image: url("../img/allgemein/cubeone-themenbanner-netzplan.jpg");
}
/* Conductor stands at ~76% of the frame width: bias the crop right on
   narrow phones so his head and cap stay in frame (people-banner rule). */
@media (max-width: 599px) {
  .page-hero--banner-netzplan {
    background-position: 78% 16%;
  }
}
.page-hero--banner-capa {
  background-image: url("../img/allgemein/cubeone-themenbanner-capa.jpg");
}
.page-hero--banner-di-gap {
  background-image: url("../img/allgemein/cubeone-themenbanner-di-gap.jpg");
}
.page-hero--banner-essv {
  background-image: url("../img/allgemein/cubeone-themenbanner-essv.jpg");
}
.page-hero--banner-ressourcenplaner {
  background-image: url("../img/allgemein/cubeone-themenbanner-ressourcenplaner.jpg");
}
.page-hero--banner-change-control-70-pcs {
  background-image: url("../img/allgemein/cubeone-themenbanner-change-control-70-pcs.jpg");
}
.page-hero--banner-periodic-review {
  background-image: url("../img/allgemein/cubeone-themenbanner-periodic-review.jpg");
}
.page-hero--banner-spektralphotometer {
  background-image: url("../img/allgemein/cubeone-themenbanner-spektralphotometer.jpg");
}
.page-hero--banner-lieferantenqualifizierung {
  background-image: url("../img/allgemein/cubeone-themenbanner-lieferantenqualifizierung.jpg");
}
.page-hero--banner-produktionsequipment {
  background-image: url("../img/allgemein/cubeone-themenbanner-produktionsequipment.jpg");
}
.page-hero--banner-syspro-annex-11 {
  background-image: url("../img/allgemein/cubeone-themenbanner-syspro-annex-11.jpg");
}
.page-hero--banner-gxp-consultant {
  background-image: url("../img/allgemein/cubeone-themenbanner-gxp-consultant.jpg");
}
.page-hero--banner-job-buchhaltung {
  background-image: url("../img/allgemein/cubeone-themenbanner-job-buchhaltung.jpg");
}
.page-hero--banner-job-it-administrator {
  background-image: url("../img/allgemein/cubeone-themenbanner-job-it-administrator.jpg");
}
.page-hero--banner-job-projektmanager {
  background-image: url("../img/allgemein/cubeone-themenbanner-job-projektmanager.jpg");
}
.page-hero--banner-job-softwareentwickler {
  background-image: url("../img/allgemein/cubeone-themenbanner-job-softwareentwickler.jpg");
}
.page-hero--banner-ausbildung-fachinformatiker {
  background-image: url("../img/allgemein/cubeone-themenbanner-ausbildung-fachinformatiker.jpg");
}
.page-hero--banner-initiativbewerbung {
  background-image: url("../img/allgemein/cubeone-themenbanner-initiativbewerbung.jpg");
}
.page-hero--banner-pharmacongress {
  background-image: url("../img/allgemein/cubeone-themenbanner-pharmacongress.jpg");
}
.page-hero--banner-abteilungsmesse {
  background-image: url("../img/allgemein/cubeone-themenbanner-abteilungsmesse.jpg");
}
.page-hero--banner-firmenlauf {
  background-image: url("../img/allgemein/cubeone-themenbanner-firmenlauf.jpg");
}
@media (max-width: 599px) {
  .page-hero--banner-firmenlauf {
    background-position: 62% 12%;
  }
}
.page-hero--banner-prokura {
  background-image: url("../img/allgemein/cubeone-themenbanner-prokura.jpg");
}
.page-hero--banner-vibe-marketing {
  background-image: url("../img/allgemein/cubeone-themenbanner-vibe-marketing.jpg");
}

/* The benefits motif is separate from the careers hero and keeps the heading
   readable. Photo tiles sit on top of the section banner with their own veil. */
.benefits-section.benefits-section--banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: url("../img/allgemein/cubeone-themenbanner-karriere-benefits.jpg");
  background-position: center;
  background-size: cover;
}
.benefits-section--banner::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--photo-band-veil);
  content: "";
}
.benefits-section--banner > .container {
  position: relative;
  z-index: 1;
}
.benefits-section--banner > .ki-badge {
  top: clamp(72px, 8vw, 96px);
  right: 12px;
  bottom: auto;
}

/* Each career benefit card is a photo plate. Content sits in the darker lower
   third; the KI chip docks top-right so it does not cover the title. */
.bitem.bitem--photo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(14.5rem, 32vw, 18rem);
  background-color: var(--bg-card);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bitem--photo::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(8, 8, 8, 0.22) 0%,
      rgba(8, 8, 8, 0.46) 46%,
      rgba(8, 8, 8, 0.88) 100%
    );
  content: "";
}

.bitem--photo > * {
  position: relative;
  z-index: 1;
}

.bitem--photo > .ki-badge {
  top: 10px;
  right: 10px;
  bottom: auto;
}

.bitem--gxp-projekte {
  background-image: url("../img/karriere/cubeone-karriere-benefit-gxp-projekte.jpg");
}

.bitem--weiterbildung {
  background-image: url("../img/karriere/cubeone-karriere-benefit-weiterbildung.jpg");
}

.bitem--homeoffice {
  background-image: url("../img/karriere/cubeone-karriere-benefit-homeoffice.jpg");
}

.bitem--team {
  background-image: url("../img/karriere/cubeone-karriere-benefit-team.jpg");
}

.bitem--verguetung {
  background-image: url("../img/karriere/cubeone-karriere-benefit-verguetung.jpg");
}

.bitem--netzwerk {
  background-image: url("../img/karriere/cubeone-karriere-benefit-netzwerk.jpg");
}

.bitem--gestaltung {
  background-image: url("../img/karriere/cubeone-karriere-benefit-gestaltung.jpg");
}

.bitem--ausbildung {
  background-image: url("../img/karriere/cubeone-karriere-benefit-ausbildung.jpg");
}

/* Career audience cubes: photo plates with a readable veil and the orange
   cube-frame hover used on the homepage. Overflow stays visible so the glow
   is not clipped; the photo itself is clipped on the media child. */
.audience-card.audience-card--photo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  overflow: visible;
  min-height: clamp(16rem, 36vw, 22rem);
  padding: 2.25rem 2rem;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

.audience-card--photo::before {
  display: none;
}

.audience-card__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background-color: var(--bg-card);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.audience-card__media::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(8, 8, 8, 0.22) 0%,
      rgba(8, 8, 8, 0.48) 46%,
      rgba(8, 8, 8, 0.90) 100%
    );
  content: "";
}

/* The injected .ki-badge is excluded: with :not() this blanket rule outweighs
   the base .ki-badge rule and would replace its position: absolute, dropping
   the chip into the column flex flow where align-items: stretch blows it up
   into a full-width bar. The badge keeps its bottom-right 10px pin inside the
   photo frame, same as the sys-cube photo tiles. */
.audience-card--photo > *:not(.audience-card__media):not(.ki-badge) {
  position: relative;
  z-index: 1;
}

.audience-card--photo .audience-icon {
  display: none;
}

.audience-card--photo .audience-title,
.audience-card--photo .audience-desc,
.audience-card--photo .audience-arrow {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75);
}

.audience-card--experts .audience-card__media {
  background-image: url("../img/karriere/cubeone-karriere-audience-experts.jpg");
}

.audience-card--starters .audience-card__media {
  background-image: url("../img/karriere/cubeone-karriere-audience-starters.jpg");
}

.audience-card--apprentices .audience-card__media {
  background-image: url("../img/karriere/cubeone-karriere-audience-apprentices.jpg");
}

.audience-card.audience-card--photo:hover,
.audience-card.audience-card--photo:focus-within {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 28px var(--accent-glow);
}

@media (prefers-reduced-motion: reduce) {
  .audience-card--photo {
    transition: none;
  }
}

/* Open-positions band: brighter workplace motif, lighter veil than the
   usual cinematic heroes so the photo stays visible on a bright monitor. */
.jobs-section.jobs-section--banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--bg-primary);
  background-image: url("../img/allgemein/cubeone-themenbanner-karriere-stellen.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.jobs-section--banner::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--photo-band-veil);
  content: "";
}

.jobs-section--banner > .container {
  position: relative;
  z-index: 1;
}

.jobs-section--banner .section-title,
.jobs-section--banner .section-sub,
.jobs-section--banner .section-label {
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.65);
}

.jobs-section--banner > .ki-badge {
  top: clamp(72px, 8vw, 96px);
  right: 12px;
  bottom: auto;
}

/* Keep the corrected career group in frame when the 21:9 artwork covers the
   much taller hero. Mobile stays closer to center so the portal remains visible
   behind the copy without pushing every person beyond the right edge. */
.careers-hero {
  background-position: 72% center;
}
@media (max-width: 768px) {
  .careers-hero {
    background-position: 64% center;
  }
}
/* Contact pages: the merged industry band (medical technology, laboratory, food
   technology, composited by scripts/build-contact-band.ps1) sits behind the hero
   copy instead of below it, because the message is that all three worlds ask the
   same GxP questions. The band is bottom-weighted (people and equipment in the
   lower two thirds), so it is anchored to the bottom edge – "center" would crop
   the faces away on the wide desktop hero. Below 900px the cover crop narrows to
   the middle laboratory panel, which is the intended fallback: one readable
   scene beats three slivers. */
.page-hero--banner-kontakt-branchen {
  background-image: url("../img/allgemein/cubeone-themenbanner-kontakt-branchen.jpg");
  /* Bottom-weighted composite: keep faces in the visible slice. `center bottom`
     crops hair off at 1536×864 and wider because the short hero only shows the
     lower ~40% of the 21:9 artwork. */
  background-position: center 68%;
}
@media (min-width: 1280px) {
  .page-hero--banner-kontakt-branchen {
    min-height: clamp(36rem, 42vw, 48rem);
    background-position: center 52%;
  }
}
/* White coats sit under both columns of the split copy. A slightly deeper
   but still flat wash keeps the type readable without a darker centre. */
.page-hero--banner-kontakt-branchen::before {
  background: linear-gradient(
    180deg,
    rgba(8, 8, 8, 0.28),
    rgba(8, 8, 8, 0.28)
  );
}

/* cube care brand portrait hero (the DE + EN article pair only): label line and
   headline speak the sister brand's berry instead of the cube one orange. Berry
   scale mirrored from the cube care milestone accents further down this file.
   --care-accent-light is the only berry bright enough for type here (7.9:1 on
   #080808); --care-accent-bright stays at 3.8:1 and is therefore limited to the
   non-text marker bar.
   change log: 21.08.2026 – Thomas Schäfer – Initial berry hero treatment. */
.page-hero--banner-cube-care-article {
  --care-accent: #a11e54;
  --care-accent-bright: #c72c6c;
  --care-accent-light: #ef7fae;
}
.page-hero--banner-cube-care-article .page-hero-label {
  color: var(--care-accent-light);
}
.page-hero--banner-cube-care-article .page-hero-label::before {
  background: var(--care-accent-bright);
}
/* The global h1–h4 rule clips the orange gradient into the glyphs, so the
   transparent text fill has to be reset as well – a plain `color` alone stays
   invisible behind it (same reason as .product-card--hub .product-title).
   The banner drop-shadow from .page-hero--banner stays in place. */
.page-hero--banner-cube-care-article .page-hero-title {
  background: none;
  color: var(--care-accent-light);
  -webkit-text-fill-color: var(--care-accent-light);
}

/* Homepage services section theme banner (not a page-hero). Scoped to
   .services so opaque service cards remain readable. Veil is a warm orange
   duotone (GX-1): accent wash from the top-left fading into near-black, plus
   a dark radial core behind the centered header that keeps the headline
   gradient at >= 4.5:1 against the brightest photo areas (verified via
   .persona-review/gxp-orange). The products banner keeps its own darker veil.
   change log: 16.08.2026 – Thomas Schäfer – Initial services-section banner.
   change log: 17.08.2026 – Thomas Schäfer – GX-1 orange duotone veil replaces
               the near-opaque black veil; photo stays visible and warm-toned. */
.services--banner {
  isolation: isolate;
  position: relative;
  background-color: var(--bg-primary);
  background-image: url("../img/allgemein/cubeone-themenbanner-leistungen.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.services--banner::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 44% at 50% 18%, rgba(8, 8, 8, 0.48) 0%, rgba(8, 8, 8, 0.16) 52%, rgba(8, 8, 8, 0) 76%),
    linear-gradient(135deg, rgba(249, 115, 22, 0.30) 0%, rgba(249, 115, 22, 0.14) 32%, rgba(8, 8, 8, 0.18) 66%, rgba(8, 8, 8, 0.42) 100%),
    linear-gradient(180deg, rgba(8, 8, 8, 0.12) 0%, rgba(8, 8, 8, 0) 30%, rgba(8, 8, 8, 0) 58%, rgba(8, 8, 8, 0.38) 100%);
}

.services--banner > .container {
  position: relative;
  z-index: 1;
}

.services--banner .section-title {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.75));
}

.services--banner .section-sub {
  color: var(--text-primary);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
}

/* Homepage products section theme banner (not a page-hero). Same CSS-veil
   pattern as .services--banner, scoped to .products so opaque product cards
   remain readable. Center-weighted veil matches the centered header text.
   change log: 16.08.2026 – Thomas Schäfer – Initial products-section banner.
   change log: 21.08.2026 – Thomas Schäfer – Preserve the wide motif scale
               instead of enlarging it to cover the tall product catalogue.
   change log: 22.08.2026 – Thomas Schäfer – Deepen the continuous radial veil
               so all header text remains at WCAG AA contrast without hard edges.
   change log: 24.08.2026 – Thomas Schäfer – Lighten the veil: since the lead is
               capped at heading width, only a rem-sized core behind the centered
               text column stays dark (~0.6); the motif keeps a light 0.14 wash so
               personas and glass cubes read. The vertical fade re-darkens exactly
               at the image bottom edge (image is 2000x857 at width
               max(100%, 60rem), so height = max(42.85vw, 25.71rem)) to blend into
               --bg-primary without a seam. Contrast re-measured >= 4.5:1. */
.products--banner {
  isolation: isolate;
  position: relative;
  background-color: var(--bg-primary);
  background-image: url("../img/allgemein/cubeone-themenbanner-produkte.jpg");
  background-size: max(100%, 60rem) auto;
  background-position: center top;
  background-repeat: no-repeat;
}

.products--banner::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(42rem 26rem at 50% 12rem, rgba(8, 8, 8, 0.66) 0%, rgba(8, 8, 8, 0.60) 60%, rgba(8, 8, 8, 0) 100%),
    linear-gradient(90deg, rgba(249, 115, 22, 0.14) 0%, transparent 28%, transparent 72%, rgba(249, 115, 22, 0.12) 100%),
    linear-gradient(
      180deg,
      rgba(8, 8, 8, 0.30) 0%,
      rgba(8, 8, 8, 0.14) 8rem,
      rgba(8, 8, 8, 0.14) calc(max(42.85vw, 25.71rem) - 12rem),
      rgba(8, 8, 8, 0.80) max(42.85vw, 25.71rem),
      rgba(8, 8, 8, 0.80) 100%
    );
}

.products--banner > .container {
  position: relative;
  z-index: 1;
}

.products--banner .section-title {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.75));
}

.products--banner .section-sub {
  color: var(--text-primary);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
}

/* Documented exception to the full-width homepage intros further below: over
   this banner the motif carries a face in the left and right outer third, and a
   full-width lead runs straight across them. The header therefore shrinks to the
   width of its widest heading line and the lead is capped at that width.
   Mechanism: the header opts out of the flex column and becomes a shrink-to-fit
   block, so its width follows the heading. The lead contributes 0 to that
   intrinsic width (width: 0) and is then stretched back to the resolved header
   width (min-width: 100%) – without this pair the long sentence would define the
   width instead of the heading.
   change log: 23.08.2026 – Thomas Schäfer – Cap the products lead at the heading
               width so the banner faces stay clear of the text. */
.products--banner > .container > .section-header.centered {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
}

.products--banner > .container > .section-header.centered .section-sub {
  width: 0;
  min-width: 100%;
  margin-inline: auto;
}

/* Mega-Dropdown nav for subpages */
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 220px;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 0.5rem;
    z-index: 1001;
    box-shadow: var(--shadow-lg);
}
.nav-dropdown.open .nav-dropdown-menu {
    display: block;
    animation: navDropdownIn 0.15s ease;
}
.nav-dropdown-menu.nav-mega {
    min-width: min(72rem, calc(100vw - 2rem));
    padding: 1.5rem;
    gap: 1.5rem 1.75rem;
}
.nav-dropdown.open .nav-dropdown-menu.nav-mega {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}
@keyframes navDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.nav-mega-col {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.25rem;
}
/* Centered Netzplan lead row above the six service columns. The subtle divider
   uses the neutral border token on purpose: an accent line would compete with
   the orange column headings below it. */
.nav-mega-lead {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
}
.nav-dropdown-menu .nav-mega-lead a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  color: var(--text-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
}
.nav-dropdown-menu .nav-mega-lead a:hover,
.nav-dropdown-menu .nav-mega-lead a:focus-visible {
  background: var(--bg-card-hover);
  color: var(--accent-light);
}
.nav-dropdown-menu a {
    display: block;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}
.nav-dropdown-menu a:hover { background: var(--bg-card-hover); color: var(--accent-light); }
/* Simple dropdowns (Produkte, Über uns) hold short product and page labels next
   to a 20px icon in a flex row. Keeping them on one line stops a stray wrap
   between the product name and its descriptor. The mega menu is excluded: its
   headings are long and must wrap inside their column. */
.nav-dropdown-menu:not(.nav-mega) a {
    white-space: nowrap;
}
/* Each mega column opens with a link to the service overview, and the entries
   below it are separate pages rather than children of a label. Orange weight
   alone made that line read as a caption, so the resting state carries the link
   signal itself: a hairline under the label plus a chevron for "opens the
   overview". Hover, focus and touch only strengthen what is already visible.
   The entries keep their muted styling, so the heading stays the primary
   target of the column. */
.nav-dropdown-menu a.nav-mega-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
    padding: 0.4rem 0.75rem;
    color: var(--accent);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.3;
    text-transform: none;
}
.nav-mega-heading__label {
    text-decoration-line: underline;
    text-decoration-color: rgba(249, 115, 22, 0.55);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s, text-decoration-thickness 0.2s;
}
/* The label wraps in narrow columns; the chevron stays optically centred on the
   first line instead of drifting to the middle of the block. */
.nav-mega-heading__arrow {
    flex-shrink: 0;
    margin-top: 0.15rem;
    opacity: 0.7;
    transition: transform 0.2s, opacity 0.2s;
}
.nav-dropdown-menu a.nav-mega-heading:hover,
.nav-dropdown-menu a.nav-mega-heading:focus-visible {
    background: var(--bg-card-hover);
    color: var(--accent-light);
}
.nav-dropdown-menu a.nav-mega-heading:hover .nav-mega-heading__label,
.nav-dropdown-menu a.nav-mega-heading:focus-visible .nav-mega-heading__label {
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
}
.nav-dropdown-menu a.nav-mega-heading:hover .nav-mega-heading__arrow,
.nav-dropdown-menu a.nav-mega-heading:focus-visible .nav-mega-heading__arrow {
    opacity: 1;
    transform: translateX(3px);
}
.nav-dropdown-menu a.nav-mega-heading:focus-visible {
    outline: 2px solid var(--accent-light);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .nav-mega-heading__label,
    .nav-mega-heading__arrow {
        transition: none;
    }
}
/* Touch has no hover to reveal the state, so the heading gets a finger-sized
   target in the mobile accordion. */
@media (pointer: coarse) {
    .nav-dropdown-menu a.nav-mega-heading {
        min-height: 2.75rem;
        align-items: center;
    }
    .nav-mega-heading__arrow {
        margin-top: 0;
    }
}
.nav-dropdown-sub {
    padding-left: 1rem;
    border-left: 1px solid var(--border);
    margin: 0.25rem 0 0.25rem 0.75rem;
}
.nav-dropdown-sub a { font-size: 0.8125rem; }

/* Kontakt page styles */
.kontakt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: flex-start;
}
.kontakt-info { display: flex; flex-direction: column; gap: 2rem; }
.kontakt-person {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}
.kontakt-person-name { font-weight: 700; color: var(--text-primary); margin-bottom: 0.25rem; }
.kontakt-person-role { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.75rem; }
.kontakt-person-links { display: flex; flex-direction: column; gap: 0.25rem; }
.kontakt-person-links a { font-size: 0.875rem; color: var(--accent-light); }
.kontakt-form-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
}

/* Karriere page */
.job-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin: 2rem 0;
}
.job-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: all 0.25s;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.job-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(249,115,22,0.1); }
.job-title { font-weight: 700; font-size: 1rem; color: var(--text-primary); }
.job-card-title { font-weight: 700; font-size: 1rem; color: var(--text-primary); }
.job-location { font-size: 0.8125rem; color: var(--text-muted); }
.job-card-meta { font-size: 0.8125rem; color: var(--text-muted); }
.job-card .btn { margin-top: auto; }

/* Referenzen */
.ref-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

/* Produkte highlight */
.product-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(249,115,22,0.12);
    border: 1px solid rgba(249,115,22,0.3);
    border-radius: var(--radius-sm);
    padding: 0.375rem 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-light);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

/* --- Trust Bar --- */
.trust-bar {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 1rem 0;
    overflow: hidden;
}

.trust-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem 2rem;
    flex-wrap: wrap;
    text-align: center;
}

.trust-bar-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.trust-bar-label a {
    color: inherit;
    text-decoration: none;
}

.trust-bar-label a:hover,
.trust-bar-label a:focus-visible {
    color: var(--accent);
}

.trust-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.875rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    transition: border-color var(--transition), color var(--transition);
}

.trust-badge svg {
    width: 14px;
    height: 14px;
    color: var(--accent);
    flex-shrink: 0;
}

.trust-badge:hover {
    border-color: rgba(249, 115, 22, 0.4);
    color: var(--text-primary);
}

/* Stretch the label so the whole badge height stays clickable. */
.trust-badge a,
.trust-badge span {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    text-decoration: none;
}

/* Chips are labels, not glossary triggers. Hide leftover dotted hairlines if
   an abbreviation still lands inside a badge. */
.trust-badge .abbr-tip,
.trust-bar-label .abbr-tip {
    border-bottom: 0;
    cursor: inherit;
}

.trust-badge a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

/* Touch devices: the badge grows to a finger-sized target and the stretched
   label carries the full height, so the whole badge reacts to a tap. */
@media (pointer: coarse) {
    .trust-badge {
        min-height: 44px;
        padding-top: 0;
        padding-bottom: 0;
    }
}

@media (max-width: 600px) {
    .trust-bar-label { display: none; }
}

@media (max-width: 1024px) {
    .content-grid { grid-template-columns: 1fr; }
    .content-sidebar { position: static; }
    .kontakt-grid { grid-template-columns: 1fr; }
    .nav-dropdown-menu.nav-mega {
        min-width: 100%;
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   TEAM BAND – management group photo with the labels on the photo
   change log: 16.08.2026 – Thomas Schäfer – New component, replaces the three
   single management cards on the home pages (DE + EN).
   change log: 16.08.2026 – Thomas Schäfer – Real group photo inserted: 16/9
   instead of 21/9, label positions moved onto the actual persons, band width
   capped because the supplied asset is only 1024 px wide.
   change log: 16.08.2026 – Thomas Schäfer – Second group photo (three standing
   persons) inserted: 5/3 instead of 16/9, label positions re-measured, width cap
   raised to the 1920 px master.
   change log: 17.08.2026 – Thomas Schäfer – GX-1 orange duotone section
   background (matches .services--banner veil); section compacted: padding and
   header gap reduced, band capped at 1240 px so the fixed 5/3 photo gets
   shorter. The real group photo itself stays untouched (opaque layer on top).
   change log: 22.08.2026 – Thomas Schäfer – Education list moved back behind the
   graduation-cap disclosure (.team-band-edu*): it is hidden at rest and only
   revealed by the cap itself, so no panel can settle on a face in the photo.
   ============================================================ */

/* The duotone is painted on the section surface only – the photo is an opaque
   layer above it, so faces keep their neutral grade. The dark radial core sits
   behind the centred header and keeps the white headline >= 4.5:1 against the
   brightest accent wash (same recipe as .services--banner). */
.team-band-section {
    padding: clamp(2.5rem, 5vw, 4.5rem) 0;
    background-color: var(--bg-primary);
    background-image:
        radial-gradient(68% 46% at 50% 8%, rgba(8, 8, 8, 0.55) 0%, rgba(8, 8, 8, 0.24) 55%, rgba(8, 8, 8, 0) 78%),
        linear-gradient(135deg, rgba(249, 115, 22, 0.36) 0%, rgba(251, 146, 60, 0.18) 32%, rgba(8, 8, 8, 0.40) 66%, rgba(8, 8, 8, 0.86) 100%);
}

/* The base .section-header caps at 700px and left-aligns, which forced the
   heading into two lines. Over the full-width band it is centred instead and
   widened to the point where "Erfahrene Führung, starke Expertise" fits on one
   line at the full 2.75rem size (~847px). No hard <br> or white-space: nowrap is
   used: text-wrap: balance keeps the split even once a viewport is too narrow to
   hold the line, so the heading wraps cleanly on phones without any overflow.
   change log: 16.08.2026 – Thomas Schäfer – Centre the management heading and
   let it sit on one line when there is room. */
.team-band-section .section-header {
    max-width: 60rem;
    margin-inline: auto;
    /* The global 4rem header gap is too generous for this compact band. */
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
    text-align: center;
}

/* The global heading rule clips a gradient into the glyphs, so the text fill
   has to be reset explicitly before a plain colour can take effect.
   change log: 17.08.2026 – Thomas Schäfer – Management headline rendered white
   instead of the orange gradient (scoped to the team band only). */
.team-band-section .section-title {
    text-wrap: balance;
    background: none;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.75));
}

/* The photo is referenced from the stylesheet instead of the markup: the DE page
   sits at the root and the EN page one level deeper, so a single URL relative to
   this file keeps both language versions structurally identical and leaves
   exactly one place to swap in the group photo. */
.team-band {
    /* Swap point for the group photo. */
    --team-band-image: url("../img/allgemein/cubeone-geschaeftsfuehrung-band.jpg");
    /* Horizontal centre of each label on the photo (wide viewports only). The
       faces sit at 24 / 49 / 74.5 % of the asset width; the outer two labels are
       nudged half a face width outwards so the blocks keep a 2.5 % gutter without
       being narrowed. No other declaration depends on these values. */
    --team-band-x-1: 23%;
    --team-band-x-2: 49.5%;
    --team-band-x-3: 76%;
    --team-band-label-width: 24%;
    position: relative;
    margin: 0;
    /* Height lever: width is capped, so a wider aspect ratio shortens the
       photo. 5/2 is two-thirds of the former 5/3 height at the same max-width. */
    max-width: 1240px;
    margin-inline: auto;
}

/* 5/2 (2.5:1) is two-thirds the previous 5/3 band height. cover + a slightly
   high background-position keeps faces in the upper half so the overlay labels
   still sit on torsos. Darkening stays in CSS, never in the asset. */
.team-band-photo {
    aspect-ratio: 5 / 2;
    background-color: var(--bg-card);
    background-image: linear-gradient(rgba(8, 8, 8, 0.24), rgba(8, 8, 8, 0.24)), var(--team-band-image);
    background-position: center 28%;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

/* Narrow viewports: photo stays uncovered, labels stack underneath as cards. */
.team-band-people {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: clamp(1rem, 2.5vw, 1.5rem);
    margin-top: clamp(1.25rem, 3vw, 2rem);
}

.team-band-person {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

/* The global heading rule clips a gradient into the glyphs, which makes any
   colour declaration inoperative – the text fill has to be reset explicitly. */
.team-band-name {
    background: none;
    -webkit-text-fill-color: var(--text-primary);
    color: var(--text-primary);
    font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
    margin-bottom: 0.25rem;
}

.team-band-role {
    color: var(--accent-light);
    font-size: clamp(0.8125rem, 0.9vw, 0.875rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

/* Graduation cap disclosure. The label rests at name and role; the
   education list is only revealed while the visitor points at, focuses or taps
   the cap. The hover target is the cap alone – a card-wide trigger would drop a
   dark panel across the faces in the photo. */
.team-band-edu {
    display: grid;
    /* Stacked cards read left-aligned, so the cap lines up with name and role
       instead of floating at the width of its own hidden panel. */
    justify-items: start;
    position: relative;
    margin-top: 0.35rem;
}

.team-band-edu-toggle {
    display: grid;
    place-items: center;
    /* 44px touch target around a 24px glyph. */
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--accent);
    cursor: pointer;
    transition: color 200ms ease, transform 200ms ease;
}

.team-band-edu-toggle:hover,
.team-band-edu-toggle:focus-visible {
    color: var(--accent-light);
    transform: translateY(-2px);
}

.team-band-edu-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Stacked cards: the panel expands in flow. The 0fr → 1fr row keeps the
   transition animatable without hard-coding a height for any translation. */
.team-band-edu-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows 220ms ease, opacity 180ms ease, visibility 220ms;
}

.team-band-edu-panel > .team-band-quals {
    overflow: hidden;
}

/* The gap to the cap sits inside the clipped list, so a closed panel adds no
   height to the card at all. */
.team-band-edu-panel .team-band-qual:first-child {
    padding-top: 0.5rem;
}

/* The trigger is the cap alone – hovering the label anywhere else must not drop
   a panel onto the photo. The panel keeps itself open while the pointer is
   inside it, so it can be read without a hover trap. */
.team-band-edu-toggle:hover + .team-band-edu-panel,
.team-band-edu-panel:hover,
.team-band-edu:focus-within .team-band-edu-panel,
.team-band-edu.is-open .team-band-edu-panel {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
}

/* Escape and a second tap have to win over the hover/focus state above, which
   is why this rule carries the same specificity and comes last. */
.team-band-edu.is-collapsed .team-band-edu-panel {
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
}

.team-band-quals {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.team-band-qual {
    color: var(--text-secondary);
    font-size: clamp(0.9375rem, 1vw, 1rem);
    line-height: 1.45;
    text-align: left;
}

@media (prefers-reduced-motion: reduce) {
    .team-band-edu-toggle,
    .team-band-edu-panel {
        transition: none;
    }

    .team-band-edu-toggle:hover,
    .team-band-edu-toggle:focus-visible {
        transform: none;
    }
}

/* From this width on each label is at least 292 px wide. The shorter 5/2 band
   still leaves a torso strip for the overlay; below this width labels stack. */
@media (min-width: 1280px) {
    .team-band-caption {
        position: absolute;
        inset: 0;
    }

    /* Readability veil as a CSS overlay – never baked into the asset. The ramp is
       deliberately steep: it has to be near opaque from 30 % height downwards for
       #F5F5F5 to stay above 4.5:1, while the faces above it keep their brightness.
       Percentages are measured from the bottom edge. */
    .team-band-caption::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: var(--radius-xl);
        background: linear-gradient(
            to top,
            rgba(8, 8, 8, 0.95) 0%,
            rgba(8, 8, 8, 0.93) 28%,
            rgba(8, 8, 8, 0.74) 36%,
            rgba(8, 8, 8, 0.38) 44%,
            rgba(8, 8, 8, 0.1) 54%,
            rgba(8, 8, 8, 0) 64%
        );
    }

    .team-band-people {
        display: block;
        position: absolute;
        inset: 0;
        margin: 0;
    }

    /* The blocks are anchored to the bottom edge of the photo. The shared minimum
       height is set to the tallest of the three so all names start on one line;
       a longer translation simply grows its own block upwards, into the part of
       the photo that only shows torsos. The education panel is not part of that
       measure – it floats above the label instead of expanding in flow. */
    .team-band-person {
        position: absolute;
        bottom: clamp(1.25rem, 2.5vw, 2.5rem);
        left: var(--team-band-x);
        width: var(--team-band-label-width);
        min-width: 16rem;
        max-width: 22rem;
        min-height: 6.25rem;
        transform: translateX(-50%);
        background: none;
        border: 0;
        padding: 0;
        text-align: center;
    }
    .team-band-person:nth-child(1) { --team-band-x: var(--team-band-x-1); }
    .team-band-person:nth-child(2) { --team-band-x: var(--team-band-x-2); }
    .team-band-person:nth-child(3) { --team-band-x: var(--team-band-x-3); }

    /* The panel carries its own opaque surface, so only the two label lines
       need the shadow that lifts them off the photo. */
    .team-band-name,
    .team-band-role {
        text-shadow: 0 1px 12px rgba(8, 8, 8, 0.9);
    }

    /* Over the photo the panel floats above the whole label instead of
       expanding in flow: name, role and cap keep their position while it opens.
       It is anchored to the label block (not to the cap), so it clears the two
       text lines at every font size and translation length. */
    .team-band-edu {
        position: static;
        justify-items: center;
    }

    .team-band-edu-panel {
        display: block;
        position: absolute;
        bottom: calc(100% + 0.5rem);
        left: 50%;
        width: max-content;
        max-width: 17rem;
        padding: 0.65rem 0.85rem;
        background: rgba(8, 8, 8, 0.88);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 0.35rem);
        transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
    }

    .team-band-edu-panel .team-band-qual:first-child {
        padding-top: 0;
    }

    /* The entries stay left-aligned inside the centred card: a wrapped
       qualification is easier to scan against a straight edge. */
    .team-band-qual {
        color: var(--text-primary);
    }

    .team-band-edu-toggle:hover + .team-band-edu-panel,
    .team-band-edu-panel:hover,
    .team-band-edu:focus-within .team-band-edu-panel,
    .team-band-edu.is-open .team-band-edu-panel {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }

    .team-band-edu.is-collapsed .team-band-edu-panel {
        opacity: 0;
        visibility: hidden;
    }
}

@media (min-width: 1280px) and (prefers-reduced-motion: reduce) {
    .team-band-edu-panel {
        transition: none;
        transform: translate(-50%, 0);
    }
}

/* ============================================================
   MANAGEMENT BANNER (.team-band-section--banner)
   Homepage-only variant that turns the contained 1240 px band into a
   full-bleed photo banner in the manner of .services--banner: the header keeps
   its container, the photo leaves it and runs to both viewport edges, flush
   with the section's bottom edge.

   Why the frame goes away: a border plus diagonal radius reads as a card, and a
   card that touches both viewport edges looks like a mistake. Edge to edge the
   photo has to lose the frame to read as a band.

   Why the header stays above the photo: the three faces sit between 20 % and
   78 % of the asset width and start ~5 % below its top edge, so there is no
   negative area wide enough for a headline. Overlaying it would land on faces,
   which the products banner exception already rules out.

   Face alignment is unaffected by the wider box. cover picks the larger of the
   two scale factors; from 5/2 upwards that is always the horizontal one, so the
   asset is only ever cropped vertically and the --team-band-x percentages keep
   pointing at the same faces.

   At viewports wider than the 1240 px cap the whole figure (photo + overlay
   labels) is centred. The banner used to drop that cap (`max-width: none`);
   `max-height` then shrank only the photo, left-aligned it, and left the
   caption on the full viewport – Klaas Hoherz sat in the empty strip.
   change log: 23.08.2026 – Thomas Schäfer – Initial full-bleed banner variant.
               23.08.2026 – Thomas Schäfer – Orange duotone dropped on the banner
               variant; the header area sits on plain --bg-primary black.
               25.08.2026 – Thomas Schäfer – Keep the 1240 px cap and centre the
               figure so names stay under the faces on 1920/2560.
   ============================================================ */

/* The photo carries the bottom edge, so the section's own bottom padding goes.
   Below the overlay breakpoint the stacked labels take that role again.
   background-image: none drops the orange duotone wash of the base section:
   the full-bleed photo already brings its own warm accents, and a second
   orange surface above it competed with the headline. The header now sits on
   the plain --bg-primary black that the base rule keeps as background-color. */
.team-band-section--banner {
    /* Top padding halved against the values-duo section above. The base
       .team-band-section keeps the full clamp for news pages. */
    padding-top: clamp(1.25rem, 2.5vw, 2.25rem);
    padding-bottom: 0;
    background-image: none;
}

.team-band-section--banner .team-band {
    width: 100%;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

/* max-height caps the height on very wide viewports (reached at ~1760 px);
   because it only widens the box, it crops vertically and never sideways. */
.team-band-section--banner .team-band-photo {
    max-height: 44rem;
    border: 0;
    border-radius: 0;
    /* A hairline of shadow along the top edge keeps the photo from cutting hard
       into the black section surface above it without darkening the heads. */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.team-band-section--banner .team-band-caption::before {
    border-radius: 0;
}

/* The photo now ends flush with the section, so a bottom-right chip lands 23 px
   from the history band's own chip and the pair reads as a glitch (measured at
   1440). It docks top-right instead, where the motif shows instruments – the
   faces only start at 20 % of the asset width. */
.team-band-section--banner .team-band > .ki-badge {
    top: 12px;
    right: 12px;
    bottom: auto;
}

/* Narrow viewports: the labels stack below the full-bleed photo and would
   otherwise sit flush against the viewport edges, so they get the container
   gutters and the section gets its bottom padding back. */
@media (max-width: 1279px) {
    .team-band-section--banner {
        padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
    }

    .team-band-section--banner .team-band-people {
        max-width: 1600px;
        margin-inline: auto;
        padding-inline: 2rem;
    }
}

/* A 2.5:1 strip at phone width is 150 px tall – the faces become thumbnails.
   Taller crops zoom into the group instead: at 4/3 the visible slice is 56 % of
   the asset width, which is exactly the span the three people occupy. */
@media (max-width: 767px) {
    .team-band-section--banner .team-band-photo {
        aspect-ratio: 4 / 3;
        background-position: center 22%;
    }
}

@media (min-width: 768px) and (max-width: 1279px) {
    .team-band-section--banner .team-band-photo {
        aspect-ratio: 16 / 9;
        background-position: center 24%;
    }
}

@media (max-width: 768px) {
    .page-hero { padding: 7rem 0 3rem; }
    .page-cta { padding: 3rem 0; }
    .page-content { padding: 3rem 0; }
    /* Two fixed 1fr tracks inherit each item's min-content width as their floor, which long
       German compound words pushed past the viewport. An auto-fit track that is clamped to
       the container drops to a single column instead of overflowing. */
    .feature-grid { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
    /* Data tables cannot reflow below their column widths, so they scroll on their own here
       instead of widening the page. */
    .content-main table { display: block; overflow-x: auto; }
    .job-grid { grid-template-columns: 1fr; }
    .ref-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HISTORY BAND
   Full-bleed company-history section for index.html, en/index.html,
   ueber-uns/unternehmen.html and en/about/company.html. Lives outside the
   centred content wrapper, so the full width comes from normal block flow – no
   100vw arithmetic, which would fight the scrollbar-gutter on <html> and cause
   horizontal overflow.

   The timeline is deliberately LEVEL: the ribbon starts and ends at the same
   height and only undulates gently. There is no quantity axis, so the height of
   the line measures nothing. This keeps the section honest – it celebrates
   milestones and experience without claiming revenue or headcount growth. The
   three verified figures appear only as badges pinned to their own year.

   change log: 16.08.2026 – Thomas Schäfer – Initial milestone-timeline band.
               16.08.2026 – Thomas Schäfer – Band also used on both homepages.
               19.08.2026 – Thomas Schäfer – cube care milestone accents: --care modifiers for node, card and KPI badge in the magenta brand color of css/cube-group.css.
   ============================================================ */
.history-band {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(2.5rem, 6vw, 5rem);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background-color: var(--bg-primary);
}

/* The motif sits on its own layer instead of on the section, because the band
   grows far taller than the 21:9 asset: background-size: cover would then blow
   the image up until nothing of it is recognisable. Capping the layer height
   keeps the asset near its native scale; the mask fades its lower edge so no
   seam appears where it ends. */
.history-band::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(20rem, 46vw, 42rem);
  z-index: 0;
  pointer-events: none;
  background-image: url("../img/allgemein/cubeone-themenbanner-geschichte.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
}

/* The timeline needs a bottom fade into the long solid section. Its text-side
   core follows the unified localized approach instead of dimming the full image. */
.history-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 62% 64% at 22% 24%,
      rgba(8, 8, 8, 0.74) 0%,
      rgba(8, 8, 8, 0.62) 46%,
      rgba(8, 8, 8, 0.04) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8, 8, 8, 0.12) 0%,
      rgba(8, 8, 8, 0.05) 48%,
      rgba(8, 8, 8, 0.34) 76%,
      var(--bg-primary) 100%
    );
}

.history-band > .container {
  position: relative;
  z-index: 2;
}

.history-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-light);
}

.history-eyebrow::before {
  content: '';
  display: block;
  width: 30px;
  height: 1px;
  background: var(--accent);
}

/* The global h1–h4 rule centres headings and clips a gradient into the glyphs,
   so alignment and gradient are restated here instead of fighting inheritance. */
.history-title {
  margin-bottom: 0.9rem;
  text-align: left;
  font-size: clamp(1.75rem, 4vw, 3rem);
  letter-spacing: -0.02em;
  background: linear-gradient(115deg, var(--accent-teal) 0%, var(--accent) 45%, var(--accent-light) 74%, var(--accent-purple) 112%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.75));
}

.history-lead {
  max-width: 62ch;
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  line-height: 1.75;
  color: var(--text-secondary);
  overflow-wrap: break-word;
  text-shadow: 0 1px 14px rgba(8, 8, 8, 0.85);
}

/* ── Decorative ribbon ──
   The SVG carries shapes only and is stretched with preserveAspectRatio="none",
   so the band height stays controllable at every viewport. Every label sits in
   the HTML layer above it and therefore keeps its real CSS size and contrast. */
.history-chart {
  position: relative;
  width: 100%;
  height: clamp(280px, 22vw, 420px);
  margin-top: clamp(2rem, 4vw, 3.25rem);
  display: none;
}

.history-chart__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.history-grid line {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.history-grid line.is-year {
  stroke: rgba(249, 115, 22, 0.12);
}

.history-grid line.is-base {
  stroke: rgba(255, 255, 255, 0.16);
}

.history-grid line.is-tick {
  stroke: rgba(255, 255, 255, 0.20);
}

/* Gradient stops are styled rather than hard-coded so they stay on the tokens. */
.history-area-stop--top {
  stop-color: var(--accent);
  stop-opacity: 0.30;
}

.history-area-stop--bottom {
  stop-color: var(--accent);
  stop-opacity: 0;
}

.history-line-stop--a { stop-color: var(--accent-teal); }
.history-line-stop--b { stop-color: var(--accent); }
.history-line-stop--c { stop-color: var(--accent-purple); }

.history-area {
  fill: url(#historyArea);
}

.history-line {
  fill: none;
  stroke: url(#historyLine);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.history-line--echo {
  stroke-width: 8;
  opacity: 0.26;
}

.history-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.history-layer > * {
  position: absolute;
}

.history-axis-note {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.history-xlabel {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-muted);
  transform: translate(-50%, 0);
}

.history-node {
  width: 14px;
  height: 14px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(8, 8, 8, 0.85), 0 0 16px rgba(249, 115, 22, 0.60);
  transform: translate(-50%, -50%) rotate(45deg);
  transition:
    transform var(--transition),
    opacity var(--transition),
    background-color var(--transition),
    box-shadow var(--transition);
}

.history-node.is-active {
  background: var(--accent-teal);
  transform: translate(-50%, -50%) rotate(45deg) scale(1.5);
  box-shadow: 0 0 0 3px rgba(8, 8, 8, 0.85), 0 0 26px rgba(251, 191, 36, 0.80);
}

/* --kpi-lift keeps a badge clear of its neighbour when two milestones fall in
   the same year; the stem length follows the same value. */
.history-kpi {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--accent-light);
  background: rgba(8, 8, 8, 0.72);
  border: 1px solid rgba(249, 115, 22, 0.50);
  border-radius: var(--radius-sm);
  transform: translate(-50%, calc(-100% - var(--kpi-lift, 18px)));
  transition: opacity var(--transition);
}

.history-kpi span {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.history-kpi::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: var(--kpi-lift, 18px);
  background: rgba(249, 115, 22, 0.55);
}

/* Right-anchored variant for the last badge, so it can never reach past the
   container edge on narrow desktops. */
.history-kpi--end {
  transform: translate(-100%, calc(-100% - var(--kpi-lift, 18px)));
}

.history-kpi--end::after {
  left: auto;
  right: 0;
}

.history-caption {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  max-width: 82ch;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.history-caption svg {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  color: var(--accent);
}

/* ── Milestone list: the real, always-present content ── */
.history-list {
  /* The chain rail below reaches into this gap, so both need the same value. */
  --history-gap: 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--history-gap);
  align-items: stretch;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.history-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  /* Extra top padding leaves room for the chain rail above the date. */
  padding: 2.75rem 1.25rem 1.25rem;
  background: rgba(22, 22, 22, 0.88);
  border: 1px solid var(--border);
  border-left: 2px solid rgba(249, 115, 22, 0.35);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition),
    background-color var(--transition),
    transform var(--transition);
}

.history-item::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  width: 2px;
  height: 0;
  background: linear-gradient(180deg, var(--accent-teal), var(--accent));
  transition: height var(--transition);
}

.history-item:hover,
.history-item.is-active {
  background: var(--bg-card-hover);
  border-color: rgba(249, 115, 22, 0.45);
  border-left-color: transparent;
  transform: translateY(-3px);
}

.history-item:hover::before,
.history-item.is-active::before {
  height: 100%;
}

.history-item__date {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--accent-light);
}

.history-item__text {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-secondary);
  overflow-wrap: break-word;
  hyphens: auto;
}

.history-item__kpi {
  align-self: flex-start;
  margin-top: 0.15rem;
  padding: 0.2rem 0.5rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-light);
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.35);
  border-radius: var(--radius-sm);
}

/* ── Chain rail ──
   Every card opens with a node dot and a line that runs on into the grid gap
   toward the next card, so the cards read as one chain instead of loose tiles.
   The line fades to zero before the gap ends: the last card of a row therefore
   leaves no visible stub in the container padding, whatever the column count
   the auto-fill grid settles on. */
.history-item__mark {
  position: absolute;
  left: 1.25rem;
  right: calc(var(--history-gap, 1.25rem) * -1);
  top: 1.6rem;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(249, 115, 22, 0.75) 0,
    rgba(249, 115, 22, 0.40) calc(100% - var(--history-gap, 1.25rem) * 2),
    rgba(249, 115, 22, 0) 100%
  );
}

.history-item__mark::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 11px;
  height: 11px;
  /* Round on purpose: the dot echoes the circular ribbon nodes above. */
  border-radius: 50%;
  transform: translate(-2px, -50%);
  background: var(--accent);
  box-shadow:
    0 0 0 3px rgba(8, 8, 8, 0.9),
    0 0 12px rgba(249, 115, 22, 0.45);
  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.history-item:hover .history-item__mark::before,
.history-item.is-active .history-item__mark::before {
  transform: translate(-2px, -50%) scale(1.3);
  box-shadow:
    0 0 0 3px rgba(8, 8, 8, 0.9),
    0 0 18px rgba(249, 115, 22, 0.75);
}

@media (min-width: 768px) {
  .history-chart { display: block; }
}

/* ── cube care milestone accent ──
   The September 2026 entry marks the new healthcare brand. It borrows the
   magenta brand accent from the cube group page (css/cube-group.css) so the
   milestone reads as cube care while staying inside the dark band palette.
   The light tint keeps a text contrast above 7:1 on the card surface. */
.history-item--care,
.history-node--care,
.history-kpi--care {
  --care-accent: #a11e54;
  --care-accent-bright: #c72c6c;
  --care-accent-light: #ef7fae;
}

.history-item--care {
  border-left-color: rgba(161, 30, 84, 0.55);
}

.history-item--care::before {
  background: linear-gradient(180deg, var(--care-accent-light), var(--care-accent));
}

.history-item--care:hover,
.history-item--care.is-active {
  border-color: rgba(161, 30, 84, 0.60);
  border-left-color: transparent;
}

.history-item--care .history-item__date {
  color: var(--care-accent-light);
}

.history-item--care .history-item__kpi {
  color: var(--care-accent-light);
  background: rgba(161, 30, 84, 0.16);
  border-color: rgba(161, 30, 84, 0.50);
}

.history-item--care .history-item__mark {
  background: linear-gradient(
    90deg,
    rgba(199, 44, 108, 0.85) 0,
    rgba(199, 44, 108, 0.42) calc(100% - var(--history-gap, 1.25rem) * 2),
    rgba(199, 44, 108, 0) 100%
  );
}

.history-item--care .history-item__mark::before {
  background: var(--care-accent-bright);
  box-shadow:
    0 0 0 3px rgba(8, 8, 8, 0.9),
    0 0 12px rgba(199, 44, 108, 0.45);
}

.history-item--care:hover .history-item__mark::before,
.history-item--care.is-active .history-item__mark::before {
  box-shadow:
    0 0 0 3px rgba(8, 8, 8, 0.9),
    0 0 18px rgba(239, 127, 174, 0.75);
}

.history-node--care {
  background: var(--care-accent-bright);
  box-shadow: 0 0 0 3px rgba(8, 8, 8, 0.85), 0 0 16px rgba(199, 44, 108, 0.60);
}

.history-node--care.is-active {
  background: var(--care-accent-light);
  box-shadow: 0 0 0 3px rgba(8, 8, 8, 0.85), 0 0 26px rgba(239, 127, 174, 0.80);
}

.history-kpi--care {
  color: var(--care-accent-light);
  border-color: rgba(161, 30, 84, 0.60);
}

.history-kpi--care::after {
  background: rgba(161, 30, 84, 0.65);
}

/* ── Reveal ──
   The end state above is the default, so without JavaScript the band is fully
   visible and static. Only history-timeline.js adds .is-animated, which
   installs the start state, and .is-visible, which plays it. */
.history-chart.is-animated .history-area,
.history-chart.is-animated .history-kpi {
  opacity: 0;
}

.history-chart.is-animated .history-node {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(45deg) scale(0.5);
}

.history-chart.is-animated .history-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

.history-chart.is-animated .history-area {
  transition: opacity 900ms cubic-bezier(0.4, 0, 0.2, 1) 250ms;
}

.history-chart.is-animated .history-line {
  transition: stroke-dashoffset 1700ms cubic-bezier(0.33, 0, 0.15, 1);
}

.history-chart.is-animated .history-node {
  transition:
    transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

.history-chart.is-animated.is-visible .history-area,
.history-chart.is-animated.is-visible .history-kpi {
  opacity: 1;
}

.history-chart.is-animated.is-visible .history-line {
  stroke-dashoffset: 0;
}

.history-chart.is-animated.is-visible .history-node {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
  transition-delay: calc(320ms + var(--i) * 150ms);
}

.history-chart.is-animated.is-visible .history-kpi {
  transition-delay: 1500ms;
}

.history-item:focus-visible,
.history-band a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .history-node,
  .history-kpi,
  .history-item,
  .history-item::before,
  .history-item__mark::before {
    transition: none;
  }

  .history-item:hover {
    transform: none;
  }
}

/* ============================================================
   HISTORY CHRONOGRAPH
   The finite rail replaces autoplay with native horizontal scrolling. JavaScript
   only identifies the frame nearest the centre guide and enables manual controls;
   without it every milestone stays visible and the rail remains scrollable.

   change log: 22.08.2026 – Thomas Schäfer – Initial centre-snap Chronograph rail.
   change log: 23.08.2026 – Thomas Schäfer – Frame height reduced via
               --history-card-height so the chronicle sits a bit lower.
   change log: 23.08.2026 – Thomas Schäfer – Frame height reduced another
               step; year size and card padding tightened so copy still fits.
   ============================================================ */
.history-orbit {
  --history-card-width: min(82vw, 22rem);
  --history-gap: clamp(1rem, 3vw, 2rem);
  --history-card-height: clamp(14.75rem, 50vw, 16.5rem);
  position: relative;
  margin-top: clamp(2rem, 5vw, 4rem);
}

.history-orbit::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 3.95rem;
  z-index: 4;
  width: 1px;
  height: 1.5rem;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(249, 115, 22, 0.9));
  transform: translateX(-50%);
  transition: opacity 220ms ease;
}

.history-orbit.is-orbit-ready::after {
  opacity: 1;
}

.history-orbit__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
  margin-bottom: 0.75rem;
}

.history-orbit__hint {
  max-width: none;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 1.5vw, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.history-orbit__controls {
  display: none;
  gap: 0.5rem;
}

.history-orbit.is-orbit-ready .history-orbit__controls {
  display: flex;
}

.history-orbit__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--accent);
  cursor: pointer;
  background: rgba(8, 8, 8, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  transition:
    color 200ms ease,
    border-color 200ms ease,
    background-color 200ms ease,
    transform 200ms ease;
}

.history-orbit__button:hover {
  color: var(--accent-light);
  background: rgba(249, 115, 22, 0.12);
  border-color: rgba(249, 115, 22, 0.62);
  transform: translateY(-2px);
}

.history-orbit__button:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}

.history-orbit__button:focus-visible,
.history-orbit__viewport:focus-visible,
.history-orbit__node-only:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.history-orbit__viewport {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: calc((100% - var(--history-card-width)) / 2);
  scroll-snap-type: x mandatory;
  scrollbar-color: rgba(249, 115, 22, 0.7) rgba(255, 255, 255, 0.08);
  scrollbar-width: thin;
  touch-action: pan-x pan-y;
}

.history-orbit__viewport::-webkit-scrollbar {
  height: 8px;
}

.history-orbit__viewport::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
}

.history-orbit__viewport::-webkit-scrollbar-thumb {
  background: rgba(249, 115, 22, 0.7);
  border-radius: var(--radius-sm);
}

.history-orbit__track {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--history-gap);
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding:
    0.75rem
    max(0px, calc((100% - var(--history-card-width)) / 2))
    3.75rem;
  list-style: none;
}

.history-orbit__track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.45rem;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.28) 3%,
    rgba(249, 115, 22, 0.5) 50%,
    rgba(255, 255, 255, 0.28) 97%,
    transparent
  );
}

.history-orbit .history-item {
  isolation: isolate;
  flex: 0 0 var(--history-card-width);
  width: var(--history-card-width);
  height: var(--history-card-height);
  gap: 0.25rem;
  padding: clamp(0.95rem, 2.8vw, 1.3rem);
  overflow: visible;
  scroll-snap-align: center;
  background:
    linear-gradient(145deg, rgba(30, 30, 32, 0.97), rgba(12, 12, 13, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.38);
  opacity: 1;
  filter: none;
  transform: none;
  transition:
    opacity 240ms ease,
    filter 240ms ease,
    transform 240ms ease,
    border-color 240ms ease,
    box-shadow 240ms ease;
}

.history-orbit .history-item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  width: auto;
  height: auto;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(249, 115, 22, 0.18), transparent 48%);
  border-radius: inherit;
  transition: opacity 240ms ease;
}

.history-orbit.is-orbit-ready .history-item:not(.is-active),
.history-orbit.is-orbit-ready .history-orbit__node-only:not(.is-active) {
  opacity: 0.46;
  filter: saturate(0.55) brightness(0.72);
}

.history-orbit .history-item:hover,
.history-orbit .history-item:focus-visible,
.history-orbit .history-item.is-active {
  background:
    linear-gradient(145deg, rgba(34, 32, 30, 0.98), rgba(13, 13, 14, 0.99));
  border-color: rgba(249, 115, 22, 0.72);
  border-left-color: rgba(249, 115, 22, 0.72);
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.48),
    0 0 26px rgba(249, 115, 22, 0.12);
  opacity: 1;
  filter: none;
  transform: translateY(-6px) scale(1.015);
}

.history-orbit .history-item:hover::before,
.history-orbit .history-item:focus-visible::before,
.history-orbit .history-item.is-active::before {
  height: auto;
  opacity: 1;
}

.history-item__date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  color: var(--accent-light);
}

.history-item__month {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.history-item__year {
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 8.8vw, 3.55rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.075em;
  color: var(--text-primary);
  -webkit-text-fill-color: initial;
  font-variant-numeric: tabular-nums;
}

.history-orbit .history-item__text {
  max-width: 30ch;
  margin-top: auto;
  margin-bottom: 0;
  font-size: clamp(0.95rem, 2.2vw, 1.0625rem);
  line-height: 1.45;
  color: var(--text-secondary);
}

.history-orbit .history-item__kpi {
  margin-top: 0.5rem;
  padding: 0.35rem 0.65rem;
  color: var(--accent-light);
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.38);
  border-radius: var(--radius-sm);
}

.history-orbit .history-item__mark {
  left: 50%;
  right: auto;
  top: auto;
  bottom: -2.08rem;
  z-index: 3;
  width: 15px;
  height: 15px;
  background: var(--accent);
  border: 3px solid var(--bg-primary);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.62);
  transform: translateX(-50%) rotate(45deg);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease;
}

.history-orbit .history-item__mark::before {
  display: none;
}

.history-orbit .history-item:hover .history-item__mark,
.history-orbit .history-item:focus-visible .history-item__mark,
.history-orbit .history-item.is-active .history-item__mark {
  box-shadow:
    0 0 0 1px rgba(249, 115, 22, 0.82),
    0 0 20px rgba(249, 115, 22, 0.7);
  transform: translateX(-50%) rotate(45deg) scale(1.25);
}

.history-orbit__node-only {
  position: relative;
  display: flex;
  flex: 0 0 clamp(9rem, 34vw, 12rem);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: clamp(9rem, 34vw, 12rem);
  height: var(--history-card-height);
  padding: 1rem;
  text-align: center;
  scroll-snap-align: center;
  opacity: 1;
  filter: none;
  transition:
    opacity 240ms ease,
    filter 240ms ease,
    transform 240ms ease;
}

.history-orbit__node-only::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2.08rem;
  z-index: 3;
  width: 17px;
  height: 17px;
  background: var(--accent);
  border: 3px solid var(--bg-primary);
  border-radius: var(--radius-sm);
  box-shadow:
    0 0 0 1px rgba(249, 115, 22, 0.7),
    0 0 16px rgba(249, 115, 22, 0.42);
  transform: translateX(-50%) rotate(45deg);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease;
}

.history-orbit__node-only:hover,
.history-orbit__node-only:focus-visible,
.history-orbit__node-only.is-active {
  opacity: 1;
  filter: none;
  transform: translateY(-4px);
}

.history-orbit__node-only:hover::after,
.history-orbit__node-only:focus-visible::after,
.history-orbit__node-only.is-active::after {
  box-shadow:
    0 0 0 1px rgba(249, 115, 22, 0.9),
    0 0 24px rgba(249, 115, 22, 0.78);
  transform: translateX(-50%) rotate(45deg) scale(1.3);
}

.history-orbit__node-year {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--accent-light);
  font-variant-numeric: tabular-nums;
}

.history-orbit__node-label {
  max-width: 15ch;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-secondary);
}

.history-orbit .history-item--care {
  --care-accent: #a11e54;
  --care-accent-bright: #c72c6c;
  --care-accent-light: #ef7fae;
}

.history-orbit .history-item--care:hover,
.history-orbit .history-item--care:focus-visible,
.history-orbit .history-item--care.is-active {
  border-color: rgba(199, 44, 108, 0.78);
  border-left-color: rgba(199, 44, 108, 0.78);
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.48),
    0 0 28px rgba(199, 44, 108, 0.18);
}

.history-orbit .history-item--care::before {
  background:
    radial-gradient(circle at 50% 0%, rgba(199, 44, 108, 0.22), transparent 48%);
}

.history-orbit .history-item--care .history-item__year,
.history-orbit .history-item--care .history-item__month {
  color: var(--care-accent-light);
}

.history-orbit .history-item--care .history-item__mark {
  background: var(--care-accent-bright);
  box-shadow: 0 0 0 1px rgba(199, 44, 108, 0.72);
}

.history-orbit .history-item--care:hover .history-item__mark,
.history-orbit .history-item--care:focus-visible .history-item__mark,
.history-orbit .history-item--care.is-active .history-item__mark {
  box-shadow:
    0 0 0 1px rgba(239, 127, 174, 0.88),
    0 0 20px rgba(199, 44, 108, 0.75);
}

@media (min-width: 768px) {
  .history-orbit {
    --history-card-width: clamp(20rem, 38vw, 24rem);
    --history-card-height: clamp(15rem, 23vw, 17rem);
  }
}

@media (min-width: 1280px) {
  .history-orbit {
    --history-card-width: clamp(21rem, 27vw, 24rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .history-orbit::after,
  .history-orbit__button,
  .history-orbit .history-item,
  .history-orbit .history-item::before,
  .history-orbit .history-item__mark,
  .history-orbit__node-only,
  .history-orbit__node-only::after {
    transition: none;
  }

  .history-orbit .history-item:hover,
  .history-orbit .history-item:focus-visible,
  .history-orbit .history-item.is-active,
  .history-orbit__node-only:hover,
  .history-orbit__node-only:focus-visible,
  .history-orbit__node-only.is-active {
    transform: none;
  }
}

/* ============================================================
   INACTIVE JOB POSTING
   A posting that is no longer published keeps its page reachable,
   but must state its status and must not offer an application
   call to action. The form markup stays inside a <template> so it
   is neither rendered nor exposed to assistive technology.
   ============================================================ */
.job-inactive {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-bottom: 2.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
}

.job-inactive-body {
  flex: 1 1 20rem;
  min-width: 0;
}

.job-inactive-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.375rem;
}

.job-inactive-title svg {
  flex-shrink: 0;
  color: var(--accent);
}

.job-inactive-text {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.job-inactive-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.appl-form-card > p a,
.job-inactive-text a {
  color: var(--accent-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ============================================================
   AKTUELLES / NEWS FEED (Featured + Jahreschronik, homepage teaser)
   change log: 16.08.2026 – Thomas Schäfer – Production rollout from
   .persona-review/aktuelles-redesign (Concept C + shared cards/filter/reveal).
   ============================================================ */

/* Visually hidden but available to screen readers (not present in style.css yet). */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ *
 * Shared: filter bar (category / year), no horizontal overflow.
 * ------------------------------------------------------------------ */
.aktuelles-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 0 0 2rem;
}

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

.filter-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.filter-btn:hover {
  color: var(--text-primary);
  border-color: var(--accent);
}

.filter-btn.is-active {
  color: var(--bg-primary);
  background: var(--accent);
  border-color: var(--accent);
}

.filter-btn:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}

/* Under 480px the button group is replaced by a native select (>4 options rule).
   White field surface and own chevron like .form-select, so the news filter
   matches every other control visitors operate. */
.filter-select {
  display: none;
  appearance: none;
  min-height: 44px;
  width: 100%;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  font-size: 0.95rem;
  color: var(--field-ink);
  color-scheme: light;
  background-color: var(--field-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  border: 1.5px solid var(--field-border);
  border-radius: var(--radius-sm);
}

.filter-select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.28);
}

.aktuelles-count {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* Below 480px the button group folds into a native select (>4 options). */
@media (max-width: 479px) {
  .filter-group {
    display: none;
  }
  .filter-select {
    display: block;
  }
  .aktuelles-count {
    margin-left: 0;
  }
}

/* Shown when a category has no posts, so filtering never yields a blank page. */
.aktuelles-empty {
  margin: 0;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  font-size: 0.95rem;
  color: var(--text-secondary);
  text-align: center;
  background: var(--bg-card);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}

/* ------------------------------------------------------------------ *
 * Shared post card – 16/9 image, diagonal radius, equal height.
 * ------------------------------------------------------------------ */
.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.post-card:hover {
  border-color: rgba(249, 115, 22, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.post-card:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
}

.post-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.post-card__cat {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: rgba(8, 8, 8, 0.72);
  border: 1px solid rgba(249, 115, 22, 0.4);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.6rem;
}

.post-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.25rem;
}

.post-card__date {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.post-card__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
  margin-bottom: 0.6rem;
}

.post-card__excerpt {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-secondary);
  flex: 1;
  margin-bottom: 1rem;
}

.post-card__link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
}

/* ------------------------------------------------------------------ *
 * Featured hero card (all concepts) – split image + text.
 * ------------------------------------------------------------------ */
.featured-card {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  margin-bottom: 2.5rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.featured-card:hover {
  border-color: rgba(249, 115, 22, 0.45);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.featured-card:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
}

.featured-card__media {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.featured-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.featured-card__flag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bg-primary);
  background: var(--accent);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.7rem;
}

.featured-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

.featured-card__date {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.featured-card__title {
  /* It is an h2, and style.css centres every h2 – the rest of the card is
     left-aligned, so the title has to follow. */
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 0.9rem;
}

.featured-card__excerpt {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  max-width: 46ch;
}

.featured-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
}

@media (min-width: 900px) {
  .featured-card {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .featured-card__media {
    aspect-ratio: auto;
    min-height: 100%;
  }
}

/* ------------------------------------------------------------------ *
 * Concept C – chronicle grouped by year.
 * Own `chronicle-*` namespace on purpose: `.timeline-track` and
 * `.timeline-item` already belong to the company timeline in style.css,
 * so reusing those names inherits foreign rules once this moves into the
 * main stylesheet.
 * ------------------------------------------------------------------ */
.chronicle-year {
  position: relative;
  margin-bottom: 2.5rem;
}

.chronicle-year__label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
}

.chronicle-year__label::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: var(--radius-sm);
}

.chronicle-track {
  position: relative;
  padding-left: 1.75rem;
  display: grid;
  gap: 1.25rem;
}

.chronicle-track::before {
  content: '';
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 5px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), transparent);
}

/* The dot sits on the wrapper, not on the card: the card clips its media
   with overflow:hidden and would cut off a marker placed outside it. */
.chronicle-node {
  position: relative;
}

.chronicle-node::before {
  content: '';
  position: absolute;
  top: 1.4rem;
  left: -1.75rem;
  width: 12px;
  height: 12px;
  background: var(--bg-primary);
  border: 2px solid var(--accent);
  border-radius: 50%;
}

.chronicle-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--transition), transform var(--transition);
}

.chronicle-entry:hover {
  border-color: rgba(249, 115, 22, 0.4);
  transform: translateX(3px);
}

.chronicle-entry:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
}

.chronicle-entry__media {
  aspect-ratio: 16/9;
  overflow: hidden;
}

.chronicle-entry__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* firmenlauf-mainz-2026.jpg carries a burnt-in cube one logo in its bottom left
   corner. Anchoring left keeps the horizontal crop of the full-height media on
   the right edge, so the logo survives every card height. */
.chronicle-entry__media--anchor-left img,
.featured-card__media--anchor-left img {
  object-position: left center;
}

.chronicle-entry__body {
  min-width: 0;
  padding: 0 1.25rem 1.25rem;
}

.concept-c .chronicle-entry__body .post-card__date {
  margin-top: 0.25rem;
}

.chronicle-entry__body .post-card__title,
.chronicle-entry__body .post-card__excerpt {
  max-width: 72ch;
}

@media (min-width: 720px) {
  .chronicle-entry {
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
  }
  /* The media fills the full card height here, so the 220px track has to be the
     only thing defining its width. Dropping the ratio is what makes stretching
     safe: with 16/9 still active, the stretched (definite) height would derive a
     wider box and push the image under the text column. Taking the image out of
     flow keeps its intrinsic height out of the row calculation as well, so the
     text column stays the single source of the card height. */
  .chronicle-entry__media {
    position: relative;
    aspect-ratio: auto;
    align-self: stretch;
    min-width: 0;
  }
  .chronicle-entry__media img {
    position: absolute;
    inset: 0;
  }
  .chronicle-entry__body {
    padding: 1.25rem 1.5rem;
  }
}

/* ------------------------------------------------------------------ *
 * Reveal motion (opacity/transform only). Visible without JS: the
 * hidden start state is applied ONLY once JS adds .is-reveal-ready to
 * the container (mirrors js/services-bento.js). No [data-animate].
 * ------------------------------------------------------------------ */
.reveal-group.is-reveal-ready .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-group.is-reveal-ready .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-group.is-reveal-ready .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------------------------ *
 * Homepage teaser section (Firmenlauf) – mirrors dark home sections.
 * ------------------------------------------------------------------ */
.home-news {
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  border-top: 1px solid var(--border);
}

.home-news__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

.home-news__head .section-title {
  margin: 0;
}

.home-news__all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.home-news__all:hover { color: var(--accent-light); }

.home-news__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.home-news .post-card {
  /* Visible so the accent hover glow can sit outside the cube frame.
     Photos still clip via .post-card__media { overflow: hidden }. */
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.home-news .post-card:hover,
.home-news .post-card:focus-visible,
.home-news .post-card:focus-within {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 28px var(--accent-glow);
  transform: translateY(-0.2rem);
}

.home-news .post-card:focus-visible {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .home-news .post-card:hover,
  .home-news .post-card:focus-visible,
  .home-news .post-card:focus-within {
    transform: none;
  }
}

/* ------------------------------------------------------------------ *
 * Video embed – responsive ratio box for privacy-friendly third-party
 * players. The absolutely positioned iframe means no pixel height is
 * ever needed, so the player cannot overflow its column on any width.
 * ------------------------------------------------------------------ */
.video-embed {
  margin: 1.5rem 0 2rem;
  max-width: 100%;
}

.video-embed__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.video-embed__frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-embed__caption {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.6rem;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ *
 * Contact page – Microsoft Bookings iframe (src from BOOKING_URL in JS)
 * ------------------------------------------------------------------ */
.contact-booking-section {
  margin: clamp(2rem, 5vw, 3.5rem) 0 clamp(2rem, 5vw, 3rem);
}

.contact-booking-section__lead {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  max-width: 65ch;
}

.booking-embed {
  width: 100%;
  max-width: 100%;
}

.booking-embed__frame {
  position: relative;
  width: 100%;
  min-height: clamp(37.5rem, 72vh, 56.25rem);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.booking-embed__frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ------------------------------------------------------------------ *
 * 404 error page – guidance column next to a crossfading image field.
 * The image field carries the waiting moment, so it never collapses:
 * without JavaScript all frames stay stacked and visible, and the
 * crossfade only takes over once js/error-page.js adds .is-shuffling.
 * change log: 16.08.2026 – Thomas Schäfer – Initial 404 page component.
 * ------------------------------------------------------------------ */
.page-404 {
  background: var(--bg-primary);
  padding: clamp(7.5rem, 13vw, 10.5rem) 0 clamp(4rem, 8vw, 6rem);
}

.page-404__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 960px) {
  .page-404__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

.page-404__code {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 7.5rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-teal) 60%, var(--accent-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.page-404__label {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.page-404__title {
  margin-top: 0.75rem;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
}

.page-404__lead {
  margin-top: 1rem;
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.page-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.page-404__links {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.page-404__links-title {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.page-404__links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 0.9rem;
  list-style: none;
}

.page-404__links-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
}

.page-404__links-list a:hover {
  color: var(--accent-light);
}

.page-404__links-list svg {
  flex-shrink: 0;
  color: var(--accent);
}

.cat-shuffle {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cat-shuffle__media {
  position: relative;
}

.cat-shuffle__stage {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.cat-shuffle__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cat-shuffle.is-shuffling .cat-shuffle__frame {
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.cat-shuffle.is-shuffling .cat-shuffle__frame.is-active {
  opacity: 1;
}

/* Veil as a CSS overlay, not baked into the assets, so the caption stays legible
   on every motif and the opacity remains centrally tunable. */
.cat-shuffle__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 8, 8, 0.3) 0%, rgba(8, 8, 8, 0.04) 40%, rgba(8, 8, 8, 0.78) 100%),
    linear-gradient(90deg, rgba(249, 115, 22, 0.14) 0%, transparent 48%);
}

.cat-shuffle__caption {
  position: absolute;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(0.9rem, 3vw, 1.5rem);
  left: clamp(1rem, 3vw, 1.75rem);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-primary);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75);
}

.cat-shuffle__caption svg {
  flex-shrink: 0;
  color: var(--accent);
}

.cat-shuffle__hint {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ============================================================
   HOMEPAGE CONTACT – PERSONA CARD & BOOKING CTA
   Reuses the V1 persona card (.contact-sidebar-card--persona) that is already
   rolled out on the service pages. Only the two differences of the homepage
   context are corrected here: the card sits in a wide grid column instead of a
   narrow sidebar, and it carries two mutually exclusive call-to-actions.
   ============================================================ */

.contact-persona-card {
  margin-top: 2.5rem;
}

/* The left contact column is roughly twice as wide as the article sidebar, so a
   strict 6/7 portrait would push the form far below the fold. Reuse the height
   scale the stacked sidebar card already uses below 1024px, so the homepage card
   reads like the persona cards that are live on the service pages; the face
   stays framed through the inherited object-position. */
.contact-persona-card .contact-persona {
  aspect-ratio: auto;
  height: clamp(280px, 46vw, 420px);
}

/* Booking and fallback CTA are swapped at runtime, never shown together.
   .btn sets display:inline-flex, which would beat the UA rule for [hidden];
   this selector restores it so the inactive action stays out of the layout. */
.contact-persona-card [hidden] {
  display: none;
}

.contact-booking-icon {
  flex-shrink: 0;
}

/* The shared .btn only relies on the user-agent ring; on the dark card that ring
   is easy to miss, so the appointment CTA gets an explicit brand-coloured one. */
.contact-persona-card .btn:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
}

/* ============================================================
   HOMEPAGE CONTACT – DIRECT-LINE CARD (cube-care pattern)
   The left column mirrors the cube-care contact card: phone and the
   booking CTA sit above the fold, the headset persona photo carries the
   middle of the card with a live "we pick up" chip, e-mail and address
   follow below. Rendered with the dark cubeone tokens, diagonal radius
   and orange accents so it reads as cube one, not as a colour copy.
   change log: 16.08.2026 – Thomas Schäfer – Initial implementation.
   ============================================================ */
.contact-card {
  margin-top: 1.75rem;
  background: linear-gradient(135deg, #161616 0%, #1A0E06 100%);
  border: 1px solid rgba(249, 115, 22, 0.25);
  border-radius: var(--radius-xl);
  /* Visible so the accent hover glow can sit outside the cube frame.
     The portrait still clips via .contact-card__media { overflow: hidden }. */
  overflow: visible;
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.contact-card:hover,
.contact-card:focus-within {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 28px var(--accent-glow);
}

.contact-card__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}

.contact-card .eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-light);
}

.contact-card__title {
  margin: 0.2rem 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text-primary);
}

.contact-card__row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
}

.contact-card__key {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.contact-card__value {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-primary);
}

.big-phone {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  transition: color var(--transition);
}
.big-phone:hover,
.big-phone:focus-visible { color: var(--accent-light); }

.contact-card__note {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.contact-card__body--top .btn { width: 100%; }
.contact-card [hidden] { display: none; }

/* LinkedIn chip in the contact card: inline SVG glyph + label, mirrors the
   footer .social-link hover language while keeping a 44px touch target. */
.contact-linkedin {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: all var(--transition);
}

.contact-linkedin:hover {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent-light);
}

.contact-linkedin:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
}

.contact-linkedin__icon {
  flex-shrink: 0;
}

.contact-card .btn:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
}

/* Media zone: full-bleed portrait carrying the middle of the card, framed by
   two hairline accent borders and topped by a live-status chip. */
.contact-card__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-top: 1px solid rgba(249, 115, 22, 0.4);
  border-bottom: 1px solid rgba(249, 115, 22, 0.4);
}

.contact-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keeps the face and headset in frame across the landscape crop. */
  object-position: center 20%;
}

/* Scrim keeps the chip legible over bright areas of the photo. */
.contact-card__media::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 48%;
  background: linear-gradient(to bottom, rgba(8, 8, 8, 0) 0%, rgba(8, 8, 8, 0.85) 100%);
  pointer-events: none;
}

.contact-card__chip {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem 0.85rem;
  background: rgba(8, 8, 8, 0.7);
  border: 1px solid rgba(249, 115, 22, 0.4);
  border-radius: var(--radius-md);
  backdrop-filter: blur(6px);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Live-status indicator dot (a status LED, not an image container – the
   diagonal-radius rule targets photo frames, a round pulse dot is intended). */
.pulse-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.6);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(249, 115, 22, 0); }
  100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-dot { animation: none; }
}

/* Heading and intro inside the form card, mirroring the cube-care form head. */
.contact-form__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text-primary);
}

.contact-form__intro {
  margin: -0.5rem 0 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ============================================================
   CUBE HUB PILLARS (homepage products section)
   Deepens the CUBE HUB story below the product cards. The panel
   carries its own surface because it sits on the products theme
   banner, where the veil alone would not keep body copy legible.
   change log: 16.08.2026 – Thomas Schäfer – Initial implementation.
               22.08.2026 – Thomas Schäfer – Pillar icon moved to the top-right corner; label and headline now start at the top-left.
               23.08.2026 – Thomas Schäfer – Headline carries the CUBE HUB lime-to-green gradient instead of the global orange one.
   ============================================================ */
.hub-pillars {
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(8px);
}

.hub-pillars__head {
  max-width: 64ch;
  margin: 0 auto clamp(1.25rem, 2vw, 1.5rem);
  text-align: center;
}

.hub-pillars__label {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hub-accent);
}

/* Documented exception to the global orange heading gradient: this headline
   names the CUBE HUB brand, so it carries the hub lime instead. The gradient is
   restated in full because the global h1–h4 rule clips its own gradient into the
   glyphs – a plain `color` would stay invisible behind the transparent fill.
   `inline-block` shrinks the box to the glyphs (the centred parent keeps it in
   place): as a full-width block the short headline would only sample the middle
   slice of the gradient and read as one flat tone. */
.hub-pillars__title {
  display: inline-block;
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(115deg, var(--hub-accent-light) 0%, var(--hub-accent) 45%, var(--hub-accent-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hub-pillars__lead {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.hub-pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Two-column grid instead of a plain stack: the icon sits in the top-right
   corner while label and headline claim the freed space at the top-left. The
   items are placed explicitly, so the markup keeps its reading order
   (label → headline → body copy) with the decorative icon first. */
.hub-pillar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  column-gap: clamp(0.75rem, 2vw, 1rem);
  row-gap: 0.6rem;
  height: 100%;
  padding: 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

.hub-pillar:hover,
.hub-pillar:focus-within {
  border-color: var(--hub-accent);
  box-shadow:
    0 0 0 1px var(--hub-accent),
    0 0 28px var(--hub-accent-glow);
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .hub-pillar:hover,
  .hub-pillar:focus-within {
    transform: none;
  }
}

.hub-pillar__icon {
  display: flex;
  grid-row: 1 / span 2;
  grid-column: 2;
  align-items: center;
  align-self: start;
  justify-content: center;
  width: clamp(2.5rem, 4vw, 3rem);
  aspect-ratio: 1 / 1;
  color: var(--hub-accent);
  background: var(--hub-accent-glow);
  border: 1px solid rgba(180, 197, 17, 0.3);
  border-radius: var(--radius-sm);
}

.hub-pillar__cat {
  grid-row: 1;
  grid-column: 1;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Tile-level headings stay plain, like the bento tiles: the gradient headline
   treatment is reserved for section titles. */
.hub-pillar__title {
  grid-row: 2;
  grid-column: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  background: none;
  color: var(--text-primary);
  -webkit-text-fill-color: var(--text-primary);
}

/* Body copy runs under the icon across the full card width – on narrow cards
   a text column beside the icon would shred the paragraph into slivers. */
.hub-pillar__desc {
  grid-row: 3;
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.hub-pillars__cross {
  margin-top: 1.25rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, rgba(180, 197, 17, 0.1) 0%, rgba(22, 22, 22, 0.6) 60%);
  border: 1px solid rgba(180, 197, 17, 0.28);
  border-radius: var(--radius-lg);
}

.hub-pillars__cross-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary);
}

.hub-pillars__cross-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

.hub-pillars__cross-text a {
  color: var(--accent-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hub-pillars__cross-text a:hover,
.hub-pillars__cross-text a:focus-visible {
  color: var(--accent);
}

/* ============================================================
   CONTACT – EQUAL COLUMN HEIGHTS (homepage and career pages)
   Only relevant where .contact-grid actually has two columns, i.e. above the
   1024px stacking breakpoint. Both columns are stretched by the grid and each
   one carries a single flexible element that absorbs the leftover space: the
   message textarea on the form side, the persona portrait on the card side.
   That way whichever column is shorter grows on its own, without a hardcoded
   height and without the card being visually cropped.
   change log: 16.08.2026 – Thomas Schäfer – Initial implementation.
   ============================================================ */
@media (min-width: 1025px) {
  .contact-grid {
    align-items: stretch;
  }

  /* Column wrapper becomes a flex column so the persona card can claim the
     remaining height; the children only use margin-bottom, so no collapsed
     margin changes the existing rhythm. */
  .contact-left {
    display: flex;
    flex-direction: column;
  }

  .contact-left .contact-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }

  /* The media band is the slack absorber of the left column: it grows so the
     card matches the form height, while the text zones keep their natural size.
     min-height keeps a sensible portrait size when the form is the shorter one. */
  .contact-left .contact-card__media {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: clamp(220px, 20vw, 300px);
  }

  /* Taking the photo out of flow is what makes the frame height purely
     flex-driven: as an in-flow child its height:100% would fall back to the
     intrinsic 700x817 ratio and inflate the column instead of being cropped. */
  .contact-left .contact-card__photo {
    position: absolute;
    inset: 0;
  }

  .contact-right {
    display: flex;
  }

  .contact-right .contact-form {
    flex: 1 1 auto;
  }

  /* The message field is the designated slack absorber of the form. */
  .contact-right .contact-form .form-group--grow {
    flex: 1 1 auto;
    min-height: 0;
  }

  .contact-right .contact-form .form-group--grow .form-textarea {
    flex: 1 1 auto;
    height: 100%;
  }
}

/* ============================================================
   CONTACT – COMPACT VARIANT (.contact--compact)
   Opt-in modifier (homepage and career pages): the headline and intro
   move out of the left column into a full-width centred section header,
   the text fields pair up in .form-row twins, and from 1280px the
   persona photo sits beside the contact rows instead of between them.
   Scoped to .contact--compact so pages that share
   .contact-left/.contact-card/.contact-form must opt in explicitly.
   change log: 17.08.2026 – Thomas Schäfer – Initial implementation.
               17.08.2026 – Thomas Schäfer – Rolled out to the career pages (jobs/karriere.html, en/jobs/careers.html).
   ============================================================ */
.contact--compact {
  /* Tighter vertical padding than the shared .contact base: the section now
     opens with a slim header band instead of a tall text column. */
  padding: clamp(3rem, 5vw, 3.75rem) 0;
}

.contact--compact .section-header {
  /* Unlike the 700px base header this one runs across the full section width
     ("über die ganze Breite"), so the intro fits on a single line at desktop
     widths; the global 4rem header gap would give back most of the saved
     height. */
  max-width: none;
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
}

.contact--compact .section-header .section-title {
  margin-bottom: 0.75rem;
}

.contact--compact .section-header .contact-intro {
  margin-bottom: 0;
}

.contact--compact .contact-grid {
  gap: clamp(2rem, 4vw, 3.5rem);
}

/* The direct-line card carries more prose than the form since the photo moved
   beside the rows; giving the card the wider track keeps its note lines from
   wrapping into a third line, which would make the card the height driver. */
@media (min-width: 1280px) {
  .contact--compact .contact-grid {
    grid-template-columns: 1.1fr 1fr;
  }
}

/* The card used to sit below the intro text; in the compact layout it is the
   only child of the left column. */
.contact--compact .contact-card {
  margin-top: 0;
}

.contact--compact .contact-card__body {
  padding: 1.25rem 1.5rem;
  gap: 0.75rem;
}

.contact--compact .contact-form {
  padding: 1.5rem 2rem;
  gap: 0.75rem;
}

/* Shorter default message box; above 1024px it still absorbs the slack via
   the shared equal-height rules, so nothing is lost on tall layouts. */
.contact--compact .form-textarea {
  min-height: 80px;
}

@media (min-width: 1025px) {
  /* Without the text block above the card, less minimum portrait height is
     needed to keep the face recognisable. */
  .contact--compact .contact-left .contact-card__media {
    min-height: clamp(170px, 15vw, 230px);
  }
}

/* From 1280px the card has enough width for its own two columns: the portrait
   spans the full card height on the left, phone/booking and e-mail/address
   stack on the right. Below 1280px the stacked band layout stays, because the
   unbreakable phone number would not fit next to a portrait column. */
@media (min-width: 1280px) {
  .contact--compact .contact-left .contact-card {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 2.5fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "media top"
      "media bottom";
  }

  .contact--compact .contact-left .contact-card__body--top {
    grid-area: top;
  }

  .contact--compact .contact-left .contact-card__body--bottom {
    grid-area: bottom;
  }

  .contact--compact .contact-left .contact-card__media {
    grid-area: media;
    min-height: 0;
    border-top: 0;
    border-bottom: 0;
    border-right: 1px solid rgba(249, 115, 22, 0.4);
    /* Matches the card's top-left diagonal corner now that the card itself
       is overflow: visible for the hover glow. */
    border-top-left-radius: inherit;
  }
}

/* --- Cookie consent notice (js/cookie-consent.js) --- */

.c1-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9995;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem clamp(1rem, 4vw, 2.5rem);
  padding: clamp(0.875rem, 2.5vw, 1.25rem) clamp(1rem, 5vw, 2.5rem);
  background: var(--bg-card);
  border-top: 1px solid var(--border-strong);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 250ms ease, transform 250ms ease;
}

.c1-consent.visible {
  opacity: 1;
  transform: translateY(0);
}

.c1-consent:focus {
  outline: none;
}

.c1-consent-body {
  flex: 1 1 26rem;
  max-width: 78ch;
}

.c1-consent-title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}

.c1-consent-text {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.c1-consent-text a {
  color: var(--text-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  white-space: nowrap;
}

.c1-consent-text a:hover {
  color: var(--accent-light);
}

.c1-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  flex-shrink: 0;
}

.c1-consent-btn {
  min-height: 2.75rem;
  min-width: 7.5rem;
  padding: 0 clamp(1.25rem, 3vw, 1.75rem);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

/* Same fill as .btn-primary so the consent bar does not end up with the only
   flat orange button on the site. No cast shadow: the bar is its own panel and a
   halo inside it would read as a second surface. */
.c1-consent-btn-primary {
  color: var(--bg-primary);
  background: linear-gradient(180deg,
    var(--accent-light) 0%,
    var(--accent) 55%,
    color-mix(in srgb, var(--accent) 88%, #000) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(88, 30, 0, 0.28);
}

.c1-consent-btn-primary:hover {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent-light) 82%, #fff) 0%,
    var(--accent-light) 55%,
    var(--accent) 100%);
}

.c1-consent-btn-ghost {
  color: var(--text-primary);
  background: transparent;
  border-color: var(--border-strong);
}

.c1-consent-btn-ghost:hover {
  background: var(--bg-card-hover);
  border-color: var(--text-muted);
}

.c1-consent-btn:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}

/* Footer revocation link – a button that has to read as one of the legal links. */
.footer-legal .footer-cookie-btn {
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color var(--transition);
  white-space: nowrap;
}

.footer-legal .footer-cookie-btn:hover {
  color: var(--text-primary);
}

@media (max-width: 600px) {
  .c1-consent {
    gap: 0.875rem;
  }

  .c1-consent-actions {
    width: 100%;
  }

  .c1-consent-btn {
    flex: 1 1 8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c1-consent {
    transition: opacity 150ms ease;
    transform: none;
  }
}

/* ============================================================
   EU AI Act labelling (Art. 50 Regulation (EU) 2024/1689)
   Badge overlay for AI-generated imagery. Injected by js/ki-badge.js.

   Icons: ONLY the official EU "AI" label icons from assets/eu-ai-icons/
   (ai-white.png for dark corners, ai-black.png for light corners).
   TODO: keep icons in sync with the official EU source:
   https://digital-strategy.ec.europa.eu/en/policies/eu-icons-labelling-ai-generated-content

   Pill radius (999px) is a deliberate exception to the diagonal
   --radius-* tokens: the mandated label must read as a neutral,
   standardised marker rather than as a cube-one design element.

   Contrast (WCAG 2.1 AA, >= 4.5:1, computed for the worst legal case):
   - Dark variant: #fff text on rgba(0,0,0,0.65). Worst case is a corner
     at the 0.5 luminance threshold: effective bg L = 0.35 * 0.5 = 0.175
     -> (1.0 + 0.05) / (0.175 + 0.05) = 4.67:1. The spec value 0.45 was
     raised to 0.65 because 0.45 only reaches 3.2:1.
   - Light variant: #000 text on rgba(255,255,255,0.55). Worst case
     corner at 0.5: effective bg L = 0.55 + 0.45 * 0.5 = 0.775
     -> (0.775 + 0.05) / 0.05 = 16.5:1.
   - The CORS/error fallback reuses the dark variant (0.65). */

/* Positioning context for hosts that are not already positioned. */
.ki-bild-host {
  position: relative;
}

/* Clean design: at rest the badge is a 24px round chip showing only the EU
   icon. It expands to "AI GENERATED" on :hover / :focus-visible on the badge
   itself, or via the .is-expanded class that ki-badge.js toggles on tap
   (touch devices have no hover). Only this small chip catches pointer
   events; the image and any card links underneath stay clickable. */
.ki-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 4px;
  border: 0;
  border-radius: 999px; /* deliberate pill exception, see block comment */
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
}

.ki-badge:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ki-badge--dark {
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
}

.ki-badge--light {
  background: rgba(255, 255, 255, 0.55);
  color: #000;
}

/* Icon as a background-image span (not an <img>): keeps card styles like
   ".post-card__media img { width/height: 100% }" from blowing the icon up.
   URLs resolve relative to this stylesheet, so no depth prefix is needed. */
.ki-badge__icon {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.ki-badge--dark .ki-badge__icon {
  background-image: url('../assets/eu-ai-icons/ai-white.png');
}

.ki-badge--light .ki-badge__icon {
  background-image: url('../assets/eu-ai-icons/ai-black.png');
}

/* Expanding label: collapsed to zero width at rest (icon-only look).
   The text carries its own leading/trailing spacing via white-space: pre,
   so only max-width and opacity animate (no layout-property transitions). */
.ki-badge__label {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: pre;
  vertical-align: bottom;
  opacity: 0;
  transition: max-width 250ms ease, opacity 200ms ease;
}

.ki-badge:hover .ki-badge__label,
.ki-badge:focus-visible .ki-badge__label,
.ki-badge.is-expanded .ki-badge__label {
  max-width: 9em;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ki-badge__label {
    transition: none;
  }
}

/* The history band motif is top-anchored and fades out towards the middle
   of the section, so the badge docks to the visible photo at the top. */
.history-band > .ki-badge {
  top: 12px;
  right: 12px;
  bottom: auto;
  z-index: 2;
}

/* The homepage hero fills the whole viewport, so a bottom-anchored badge
   would sit exactly under the fixed chat button and the cookie consent bar
   at the initial scroll position (legally critical: the label must never be
   covered). Dock it top-right below the fixed navbar instead – same pattern
   as the history band. The clamp() clears the navbar at every width
   (~56px mobile, ~79px desktop). */
.hero > .ki-badge,
.careers-hero > .ki-badge {
  top: clamp(72px, 8vw, 96px);
  right: 12px;
  bottom: auto;
}

/* The contact hero is short enough that its bottom edge lands inside the
   consent bar on phone-height viewports (measured: badge covered at 375x667),
   so it is docked top-right below the navbar for the same legal reason as the
   homepage hero. */
.page-hero--banner-kontakt-branchen > .ki-badge {
  top: clamp(72px, 8vw, 96px);
  right: 12px;
  bottom: auto;
}

/* ============================================================
   ISO / PRINCIPLES TWO-COLUMN MANIFESTO
   The lead thesis and the six value principles read as one
   editorial unit while retaining separate visual hierarchy.
   ============================================================ */
.values-duo {
  /* Bottom padding halved against the management banner below. Top stays so
     the cube-frame claims keep their air above the cards. */
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(1.5rem, 3.5vw, 3rem);
  background:
    radial-gradient(circle at 14% 18%, rgba(249, 115, 22, 0.09), transparent 32%),
    var(--bg-primary);
}

.values-duo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: stretch;
}

.values-duo-lead,
.values-duo-manifest {
  position: relative;
  min-width: 0;
  /* Visible so the claim can sit on the top edge of the cube frame. */
  overflow: visible;
  background: linear-gradient(145deg, rgba(30, 30, 30, 0.92), rgba(15, 15, 15, 0.96));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.values-duo-lead:hover,
.values-duo-manifest:hover,
.values-duo-lead:focus-within,
.values-duo-manifest:focus-within {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 28px var(--accent-glow);
}

/* Claim sits on the cube frame and interrupts the top hairline.
   The page wash is reused so the label reads as belonging to the
   section, not as a chip glued inside the card. */
.values-duo-claim {
  position: absolute;
  top: 0;
  left: clamp(1.25rem, 3vw, 2.25rem);
  z-index: 2;
  margin-bottom: 0;
  padding: 0 0.7rem;
  transform: translateY(-50%);
  background:
    radial-gradient(circle at 14% 18%, rgba(249, 115, 22, 0.09), transparent 32%),
    var(--bg-primary);
}

.values-duo-lead {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  padding-top: clamp(2rem, 4.5vw, 3.5rem);
}

.values-duo-lead .section-title,
.values-duo-manifest .section-title {
  font-size: clamp(1.75rem, 3.2vw, 3rem);
}

.values-duo-lead__footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem 1rem;
  align-items: center;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.values-duo-lead__footer .btn {
  grid-column: 1 / -1;
  justify-self: start;
}

/* ── Certification marks: documented exception to the diagonal radius ──
   The DEKRA ISO 9001 seal is an accredited certification mark. Its licence
   allows scaling only; cropping, framing or rounding its corners alters the
   mark and is not permitted. Every seal surface therefore keeps square corners
   instead of the cube diagonal radius tokens. This is deliberate - do not
   "fix" it back to var(--radius-*). The rule is written down in CLAUDE.md,
   section "Zertifizierungssiegel". */
.iso-seal-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 0;
  outline-offset: 3px;
}

.iso-seal-link:focus-visible,
.history-iso-seal:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.iso-seal-img {
  display: block;
  width: clamp(3.75rem, 8vw, 5.25rem);
  height: auto;
  border-radius: 0;
}

.iso-seal-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.2rem;
}

.iso-seal-copy strong {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: var(--text-primary);
}

.iso-seal-copy span {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.values-duo-manifest {
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
}

.values-duo-manifest__header {
  margin-bottom: 1rem;
}

.values-duo-manifest .values-manifest-list {
  border-top-color: var(--border-strong);
}

.values-duo-manifest .values-manifest-row {
  grid-template-columns: clamp(2.75rem, 5vw, 3.5rem) minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(0.75rem, 1.8vw, 1.25rem);
  padding: clamp(0.875rem, 1.7vw, 1.25rem) 0;
}

.values-duo-manifest .values-manifest-name {
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
}

.values-duo-manifest .values-manifest-desc {
  font-size: clamp(0.875rem, 1.15vw, 0.95rem);
  line-height: 1.5;
}

/* Square corners on purpose - see the certification mark exception above. */
.history-iso-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  min-height: 44px;
  margin-top: 0.35rem;
  border-radius: 0;
}

.history-iso-seal img {
  display: block;
  width: 44px;
  height: auto;
  border-radius: 0;
}

@media (max-width: 767px) {
  .values-duo-manifest .values-manifest-row {
    grid-template-columns: clamp(2.75rem, 12vw, 3.5rem) minmax(0, 1fr);
  }

  .values-duo-manifest .values-manifest-desc {
    grid-column: 2;
  }
}

@media (min-width: 1024px) {
  .values-duo-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }

  .values-duo-lead__footer {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .values-duo-lead__footer .btn {
    grid-column: auto;
    justify-self: end;
  }
}


/* ============================================================
   CONTACT HERO SPLIT — headline beside the lead paragraph
   The contact hero carries more lead copy than the other pages,
   so headline and lead share a row instead of stacking. The
   accent hairline between them is a border on the lead, not an
   empty divider element.
   change log: 22.08.2026 – Thomas Schäfer – Initial implementation.
   ============================================================ */
.page-hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}

.page-hero-split .page-hero-title {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .page-hero-split {
    grid-template-columns: 1fr 1fr;
    gap: 0 2.5rem;
  }

  .page-hero-split .page-hero-sub {
    padding-left: 2.5rem;
    border-left: 1px solid rgba(249, 115, 22, 0.35);
  }
}

/* ============================================================
   CONTACT ROSTER — resting team grid on the contact pages
   Four people never needed a marquee: the former auto-scrolling
   carousel kept moving exactly while visitors tried to read a
   phone number. The grid holds still and puts phone, mail and
   Teams chat on every card.
   change log: 21.08.2026 – Thomas Schäfer – Initial implementation.
   ============================================================ */
.roster-head {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.roster-head h2 {
  margin: 0;
}

.roster-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  background: rgba(249,115,22,0.07);
  border: 1px solid rgba(249,115,22,0.28);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.roster-note svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 0.1rem;
  color: var(--accent);
}

.roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 1.5rem;
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  padding: 0;
  list-style: none;
}

.roster-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.roster-card:hover,
.roster-card:focus-within {
  border-color: rgba(249,115,22,0.4);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}

.roster-card__photo {
  aspect-ratio: 6 / 7;
  overflow: hidden;
  background: rgba(249,115,22,0.08);
}

/* Holds the 6/7 frame while a real portrait is still missing. No invented face. */
.roster-card__photo--pending {
  display: grid;
  place-items: center;
  color: var(--accent);
}

.roster-card__photo--pending svg {
  width: 36%;
  height: auto;
  opacity: 0.5;
}

.roster-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.4s;
}

.roster-card:hover .roster-card__photo img {
  transform: scale(1.03);
}

.roster-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1.25rem;
}

.roster-card__role {
  margin: 0 0 0.2rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.roster-card__name {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary);
}

.roster-card__focus {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.roster-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.roster-chip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.5rem;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition), background-color var(--transition);
}

.roster-chip svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: var(--accent);
}

.roster-chip:hover,
.roster-chip:focus-visible {
  background: rgba(249,115,22,0.09);
  color: var(--accent-light);
}

.roster-chip__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (pointer: coarse) {
  .roster-chip {
    min-height: 44px;
  }
}

/* ============================================================
   CONTACT PAGE FORM
   The contact pages run the homepage form card; only the consent
   gate and the honeypot are page-specific.
   change log: 21.08.2026 – Thomas Schäfer – Initial implementation.
   ============================================================ */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-muted);
  cursor: pointer;
}

.form-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.1rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.form-consent a {
  color: var(--accent-light);
}

.btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Browsers still send :hover to a disabled button, so the submit button lifted
   and brightened while refusing to be pressed. */
.btn-primary:disabled:hover,
.content-main .btn-primary:disabled:hover {
  transform: none;
}

/* ============================================================
   HOMEPAGE FULL-WIDTH INTRO COPY
   Intro headings and their leads should share the complete content measure.
   This only lifts artificial text caps; card, media, form and manifesto grids
   keep their deliberate multi-column structures.
   Exception: .products--banner narrows its header back to the headline width
   (see the ".products--banner > .container > .section-header.centered" rule) so
   the personas in that motif are not overrun by the lead. Keep that rule more
   specific than the selectors below.
   change log: 22.08.2026 – Thomas Schäfer – Initial implementation.
   change log: 23.08.2026 – Thomas Schäfer – Note the products-banner exception.
   ============================================================ */
.hero-content {
  width: 100%;
  max-width: 1280px;
}

.hero-sub,
.services > .container > .section-header,
.services > .container > .section-header .section-title,
.services > .container > .section-header .section-sub,
.industries__header,
.industries__header .section-title,
.industries__header .section-sub,
.csv-spotlight__intro,
.csv-spotlight__intro .section-title,
.csv-spotlight__intro .section-sub,
.csv-spotlight__lead,
.team-band-section .section-header,
.team-band-section .section-title,
.history-lead,
.products > .container > .section-header,
.products > .container > .section-header .section-title,
.products > .container > .section-header .section-sub,
.hub-pillars__head,
.contact--compact > .container > .section-header .section-title,
.contact--compact > .container > .section-header .contact-intro {
  width: 100%;
  max-width: none;
}

/* Reference / system cubes: homepage cube-frame language on service pages.
   Full container width (max 1600px), auto-fit columns, orange hover glow. */
.sys-cube-section {
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--border);
}

/* Cube grid followed by a companion band (cube hub on Softwareentwicklung):
   halve the stacked padding so the two blocks read as one sequence. */
.sys-cube-section:has(+ .sys-cube-section) {
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.sys-cube-section + .sys-cube-section {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.sys-cube-section .section-header,
.sys-cube-section .section-header .section-title,
.sys-cube-section .section-header .section-sub {
  width: 100%;
  max-width: none;
}

.sys-cube-section .section-header {
  margin-bottom: 1.5rem;
}

/* The filter controls used to float directly on the page background, which made
   them read as loose text rather than as a control surface. They now sit on
   their own panel layer: a lifted fill, a cool hairline (the surroundings are
   plain dark, so a cool edge separates better than a warm one), a resting
   shadow for depth, and the short accent marker the bento tiles use. */
.sys-cube-toolbar {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  margin: 0 0 1.5rem;
  padding: 1.25rem;
  background:
    radial-gradient(80% 140% at 0% 0%, rgba(249, 115, 22, 0.1), transparent 60%),
    var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.sys-cube-toolbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 2px;
  background: var(--accent);
}

/* From 900px the search slot and the category chips share a row, with the result
   count spanning underneath. The :has() guard keeps a toolbar that carries no
   chips in a single column, so no empty second track can open up. */
@media (min-width: 900px) {
  .sys-cube-toolbar:has(.sys-cube-chips) {
    grid-template-columns: minmax(240px, 22rem) minmax(0, 1fr);
    align-items: start;
    column-gap: 1.5rem;
  }
  .sys-cube-toolbar:has(.sys-cube-chips) .sys-cube-count {
    grid-column: 1 / -1;
  }
}

.sys-cube-search {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
}

.sys-cube-search-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The magnifier is a background image rather than an extra element, so the
   markup stays a plain label plus input and the icon can never be tabbed to.
   Surface follows the contact form (--field-* tokens): every place on the site
   where visitors type sits on white, so an input is recognisable as one before
   it is read. On white the magnifier needs the placeholder grey instead of the
   old light stroke, and color-scheme keeps the native search-clear control
   light rather than inheriting the dark page. */
.sys-cube-search-input {
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 1rem 0.7rem 2.6rem;
  font: inherit;
  font-size: 1rem;
  color: var(--field-ink);
  color-scheme: light;
  background-color: var(--field-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.8rem center;
  background-size: 18px 18px;
  border: 1.5px solid var(--field-border);
  border-radius: var(--radius-sm);
}

.sys-cube-search-input::placeholder {
  color: var(--field-placeholder);
}

.sys-cube-search-input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.28);
}

.sys-cube-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sys-cube-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.55rem 0.95rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(8, 8, 8, 0.6);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.sys-cube-chip:hover,
.sys-cube-chip:focus-visible {
  color: var(--text-primary);
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 28px var(--accent-glow);
  outline: none;
}

.sys-cube-chip.is-active {
  color: var(--text-primary);
  border-color: var(--accent);
  background: rgba(249, 115, 22, 0.18);
  box-shadow: 0 0 0 1px var(--accent);
}

.sys-cube-count {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.sys-cube-empty {
  margin: 0 0 1rem;
  padding: 1.25rem 1rem;
  font-size: 1rem;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.sys-cube[hidden] {
  display: none;
}

.sys-cube-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* The container reaches 1600px, so auto-fill opens a fifth 280px track on wide
   screens and the reference cubes turn into a thin strip. Cap the full-width
   reference sections at four columns; in-content grids (case stories) keep
   auto-fill because they sit in a much narrower column. */
@media (min-width: 1280px) {
  .sys-cube-section:not(.sys-cube-section--in-layout) .sys-cube-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.sys-cube {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1.5rem 1.4rem 1.35rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  overflow: visible;
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.sys-cube:hover,
.sys-cube:focus-visible,
.sys-cube:focus-within {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 28px var(--accent-glow);
  outline: none;
}

.sys-cube-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1rem;
  color: var(--accent);
  background: rgba(249, 115, 22, 0.08);
  border: 1px solid rgba(249, 115, 22, 0.22);
  border-radius: var(--radius-md);
}

.sys-cube-mark svg {
  width: 22px;
  height: 22px;
}

/* Trademarks inherit the anthracite cube (--bg-card #161616). A painted well
   in --bg-primary (#080808) read as a black postage stamp on the card.
   Radius lives on .sys-cube, never on the mark artwork. */
.sys-cube-mark--logo {
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 4.25rem;
  padding: 0.15rem 0;
  margin-bottom: 1rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  justify-content: flex-start;
  color: inherit;
}

.sys-cube-mark--logo img {
  display: block;
  width: auto;
  height: 3.5rem;
  max-width: 100%;
  max-height: 3.5rem;
  object-fit: contain;
  object-position: left center;
  border-radius: 0;
  filter: grayscale(1);
  transition: filter var(--transition);
}

/* Dark wordmarks: invert first so the mark is light on anthracite, then
   grayscale at rest. Hover/focus keep invert (still needed for dark marks)
   and drop grayscale so brand colour returns. */
.sys-cube-mark--invert img {
  filter: invert(1) hue-rotate(180deg) grayscale(1);
}

.sys-cube:hover .sys-cube-mark--logo img,
.sys-cube:focus-visible .sys-cube-mark--logo img,
.sys-cube:focus-within .sys-cube-mark--logo img {
  filter: grayscale(0);
}

.sys-cube:hover .sys-cube-mark--invert img,
.sys-cube:focus-visible .sys-cube-mark--invert img,
.sys-cube:focus-within .sys-cube-mark--invert img {
  filter: invert(1) hue-rotate(180deg);
}

/* Unnamed GxP equipment: empty mark slot, same anthracite as the cube. */
.sys-cube-mark--type {
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 4.25rem;
  padding: 0;
  margin-bottom: 1rem;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.sys-cube-kicker {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.35rem;
}

.sys-cube-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
  background: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: var(--text-primary);
}

.sys-cube-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.sys-cube-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary);
  flex: 1;
  margin-bottom: 1rem;
}

.sys-cube-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent-light);
}

/* Manufacturer cubes are the whole-card link; the old "Herstellerseite"
   line is removed in markup. Photo stills keep a visible CTA. */
.sys-cube:not(.sys-cube--photo) .sys-cube-cta {
  display: none;
}

/* Photo stills fill the cube; overflow stays visible so the hover glow is
   not clipped. The image clips itself via the inherited diagonal radius. */
.sys-cube--photo {
  position: relative;
  isolation: isolate;
  justify-content: flex-end;
  min-height: 0;
  aspect-ratio: 1 / 1;
  padding: 1.25rem 1.2rem 1.1rem;
  background-color: var(--bg-card);
}

.sys-cube--photo .sys-cube-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  filter: brightness(1.18) contrast(1.04) saturate(1.06);
}

.sys-cube--photo::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(
      120% 85% at 50% 0%,
      rgba(8, 8, 8, 0) 48%,
      rgba(8, 8, 8, 0.18) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8, 8, 8, 0.12) 0%,
      rgba(8, 8, 8, 0.28) 42%,
      rgba(8, 8, 8, 0.88) 100%
    );
  content: "";
}

/* The injected .ki-badge is excluded: this blanket rule would override its
   position: absolute (base .ki-badge rule has lower specificity) and drop
   the chip into the flex flow as a stretched mid-card bar. The badge keeps
   its default bottom-right 10px pin inside the photo frame instead. */
.sys-cube--photo > :not(.sys-cube-photo):not(.ki-badge) {
  position: relative;
  z-index: 2;
}

.sys-cube--photo .sys-cube-kicker,
.sys-cube--photo .sys-cube-title,
.sys-cube--photo .sys-cube-desc,
.sys-cube--photo .sys-cube-cta {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75);
}

.sys-cube--photo .sys-cube-desc {
  color: rgba(255, 255, 255, 0.86);
  flex: 0 1 auto;
  margin-bottom: 0.35rem;
}

.sys-cube--photo .sys-cube-cta {
  min-height: 44px;
}

@media (min-width: 768px) {
  .sys-cube--photo {
    aspect-ratio: 4 / 3;
  }
}

.sys-cube--static {
  cursor: default;
}

.sys-cube--featured {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .sys-cube--featured {
    grid-column: span 2;
  }
}

.hub-bridge {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: visible;
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.hub-bridge--hub {
  gap: 0;
  margin-top: 0;
  padding: 0;
  overflow: hidden;
  align-items: stretch;
}

@media (min-width: 768px) {
  .hub-bridge--hub {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }
}

.hub-bridge__visual {
  position: relative;
  min-height: 12rem;
  overflow: hidden;
}

.hub-bridge__visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 12rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.hub-bridge__visual::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8, 8, 8, 0.88), transparent 65%);
  content: "";
  pointer-events: none;
}

.hub-bridge__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.35rem, 3vw, 2rem);
}

.hub-bridge__index {
  margin: 0 0 0.85rem;
  color: var(--hub-accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hub-bridge__title {
  margin: 0 0 0.85rem;
  line-height: 1;
}

.hub-bridge__title-logo {
  display: block;
  width: auto;
  height: clamp(2rem, 4.5vw, 2.75rem);
  max-width: min(100%, 16rem);
  object-fit: contain;
}

.hub-bridge__copy {
  margin: 0 0 1.25rem;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 62ch;
}

.hub-bridge__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hub-bridge--hub:hover,
.hub-bridge--hub:focus-within {
  border-color: rgba(180, 197, 17, 0.55);
  box-shadow:
    0 0 0 1px var(--hub-accent),
    0 0 28px var(--hub-accent-glow);
}

.hub-bridge--hub .btn-primary {
  --btn-cast: 140, 154, 13;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--hub-accent) 82%, #fff) 0%,
    var(--hub-accent) 55%,
    color-mix(in srgb, var(--hub-accent) 88%, #000) 100%);
  border-color: var(--hub-accent);
  color: var(--bg-primary);
}

.hub-bridge--hub .btn-primary:hover,
.hub-bridge--hub .btn-primary:focus-visible {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--hub-accent) 90%, #fff) 0%,
    #9cad0f 55%,
    color-mix(in srgb, #9cad0f 88%, #000) 100%);
  border-color: #9cad0f;
}

.hub-bridge--lab11 {
  gap: 0;
  margin-top: 0;
  padding: 0;
  overflow: hidden;
  align-items: stretch;
}

@media (min-width: 768px) {
  .hub-bridge--lab11 {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }
}

.hub-bridge--lab11 .hub-bridge__index {
  color: var(--accent-light);
}

.hub-bridge--lab11 .hub-bridge__body h2 {
  margin: 0 0 0.85rem;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.2;
}

.hub-bridge--lab11 .hub-bridge__copy {
  max-width: none;
}

.hub-bridge--lab11 .hub-bridge__features {
  width: 100%;
  margin: 0 0 1.25rem;
}

.hub-bridge--lab11:hover,
.hub-bridge--lab11:focus-within {
  border-color: rgba(249, 115, 22, 0.45);
  box-shadow:
    0 0 0 1px rgba(249, 115, 22, 0.35),
    0 0 28px rgba(249, 115, 22, 0.18);
}

.hub-bridge:hover,
.hub-bridge:focus-within {
  border-color: var(--hub-accent, #a3e635);
  box-shadow:
    0 0 0 1px var(--hub-accent, #a3e635),
    0 0 28px rgba(163, 230, 53, 0.22);
}

.hub-bridge-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 700;
  background: none;
  color: var(--hub-accent, #a3e635);
  -webkit-text-fill-color: var(--hub-accent, #a3e635);
  margin-bottom: 0.5rem;
}

.hub-bridge p {
  color: var(--text-secondary);
  max-width: 62ch;
}

.cs-back {
  margin: clamp(1.25rem, 3vw, 2rem) 0 1.25rem;
}

.page-content > .container > .cs-back {
  margin-top: 0;
}

.cs-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.55rem 1rem;
  margin: 0;
}

.cs-facts dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.cs-facts dd {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .sys-cube,
  .hub-bridge {
    transition: none;
  }
}

/* Case Stories overview: grouped photo cubes, independent of .sys-cube-grid
   so Leistung-page reference cubes stay on their 280px auto-fill rhythm. */
.cs-overview {
  padding: clamp(2rem, 5vw, 3.25rem) 0 0.5rem;
}

.cs-overview-kicker {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.cs-overview-headline {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

.cs-overview-lead {
  margin: 0 0 1.25rem;
  max-width: 68ch;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.cs-overview-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
}

.cs-overview-toc-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0.15rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.cs-overview-toc-link:hover,
.cs-overview-toc-link:focus-visible {
  color: var(--accent-light);
  border-bottom-color: var(--accent);
  outline: none;
}

.cs-overview-toc-link[hidden] {
  display: none;
}

.cs-overview-toolbar {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  margin: 0 0 1.5rem;
  padding: 1.25rem;
  background:
    radial-gradient(80% 140% at 0% 0%, rgba(249, 115, 22, 0.1), transparent 60%),
    var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.cs-overview-toolbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 2px;
  background: var(--accent);
}

.cs-overview-search {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
}

.cs-overview-search-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cs-overview-search-input {
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 1rem 0.7rem 2.6rem;
  font: inherit;
  font-size: 1rem;
  color: var(--field-ink);
  color-scheme: light;
  background-color: var(--field-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.8rem center;
  background-size: 18px 18px;
  border: 1.5px solid var(--field-border);
  border-radius: var(--radius-sm);
}

.cs-overview-search-input::placeholder {
  color: var(--field-placeholder);
}

.cs-overview-search-input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.28);
}

.cs-overview-filter-label {
  margin: 0.75rem 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cs-overview-toolbar > .cs-overview-filter-label:first-of-type {
  margin-top: 0.25rem;
}

.cs-overview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cs-overview-chips--industry {
  margin-bottom: 0.25rem;
}

.cs-overview-more {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
}

.cs-overview-more a {
  color: var(--accent-light);
  font-weight: 600;
  text-decoration: none;
}

.cs-overview-more a:hover,
.cs-overview-more a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.cs-overview-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.55rem 0.95rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(8, 8, 8, 0.6);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.cs-overview-chip:hover,
.cs-overview-chip:focus-visible {
  color: var(--text-primary);
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 28px var(--accent-glow);
  outline: none;
}

.cs-overview-chip.is-active {
  color: var(--text-primary);
  border-color: var(--accent);
  background: rgba(249, 115, 22, 0.18);
  box-shadow: 0 0 0 1px var(--accent);
}

.cs-overview-count {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

@media (min-width: 900px) {
  .cs-overview-toolbar {
    grid-template-columns: minmax(240px, 22rem) minmax(0, 1fr);
    align-items: start;
    column-gap: 1.5rem;
  }

  .cs-overview-count {
    grid-column: 1 / -1;
  }
}

.cs-overview-empty {
  margin: 1.5rem 0 0;
  padding: 1.5rem 1.25rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.cs-overview-empty[hidden] {
  display: none;
}

.cs-overview-reset {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.5rem;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--accent-light);
  background: none;
  border: 0;
  cursor: pointer;
}

.cs-overview-reset:hover,
.cs-overview-reset:focus-visible {
  color: var(--accent);
  outline: none;
  text-decoration: underline;
}

.cs-overview-group {
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  border-top: 1px solid var(--border);
  scroll-margin-top: 6rem;
}

.cs-overview-group[hidden] {
  display: none;
}

.cs-overview-group-head {
  margin: 0 0 1.5rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--accent);
}

.cs-overview-group-title {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

.cs-overview-group-lead {
  margin: 0;
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.cs-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .cs-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
}

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

.cs-overview-cube {
  aspect-ratio: 4 / 5;
  min-width: 0;
  min-height: 0;
  padding: 1.5rem 1.35rem 1.25rem;
}

.cs-overview-cube .sys-cube-title {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  margin-bottom: 0.5rem;
}

.cs-overview-cube .sys-cube-desc {
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: 0.5rem;
}

.cs-overview-cube .sys-cube-kicker {
  font-size: 0.75rem;
  margin-bottom: 0.45rem;
}

@media (min-width: 768px) {
  .cs-overview-cube {
    aspect-ratio: 4 / 5;
  }
}

@media (min-width: 1280px) {
  .cs-overview-cube {
    aspect-ratio: 4 / 5;
    padding: 1.75rem 1.5rem 1.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-overview-chip,
  .cs-overview-search-input,
  .cs-overview-toc-link,
  .cs-overview-cube {
    transition: none;
  }
}

/* ============================================================
   CSV SPOTLIGHT — homepage commercial section for CSV
   change log: 05.09.2026 – Thomas Schäfer – Initial implementation.
   change log: 05.09.2026 – Thomas Schäfer – CSV spotlight intro stacked full width; headline one line from 1200px.
   ============================================================ */
.csv-spotlight {
  --csv-spotlight-gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse 70% 55% at 100% 0%, rgba(249, 115, 22, 0.08) 0%, transparent 58%),
    var(--bg-primary);
}

.csv-spotlight__intro {
  width: 100%;
  max-width: none;
  margin-bottom: var(--csv-spotlight-gap);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.csv-spotlight__intro .section-label {
  margin-bottom: 0.15rem;
}

.csv-spotlight__intro .section-title {
  max-width: none;
  margin-bottom: 0;
  font-size: clamp(1.75rem, 2.2vw + 0.65rem, 2.625rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.csv-spotlight__lead {
  margin-bottom: 0;
  max-width: none;
  width: 100%;
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: 1.65;
}

@media (min-width: 1200px) {
  .csv-spotlight__intro .section-title {
    white-space: nowrap;
    text-wrap: unset;
  }
}

.csv-spotlight__layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "figure"
    "levers"
    "proof"
    "actions";
  gap: var(--csv-spotlight-gap);
  align-items: start;
}

.csv-spotlight__figure {
  grid-area: figure;
  position: relative;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 28px 0 28px 0;
  overflow: hidden;
  background: var(--bg-card);
}

.csv-spotlight__body {
  grid-area: levers;
}

.csv-spotlight__proof {
  grid-area: proof;
  margin-bottom: 0;
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(249, 115, 22, 0.28);
  border-radius: 12px 0 12px 0;
  background: rgba(249, 115, 22, 0.06);
}

.csv-spotlight__actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.75rem;
}

.csv-spotlight__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.csv-spotlight__levers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.875rem;
}

.csv-spotlight__lever {
  padding: 1rem 1.15rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background: var(--bg-card);
}

.csv-spotlight__lever-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  font-weight: 700;
  color: var(--text-primary);
}

.csv-spotlight__lever-text {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.csv-spotlight__lever-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.csv-spotlight__lever-link:hover,
.csv-spotlight__lever-link:focus-visible {
  color: var(--accent-light);
  text-decoration: underline;
  outline: none;
}

.csv-spotlight__proof-label {
  margin: 0 0 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.csv-spotlight__proof-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}

.csv-spotlight__proof-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
}

.csv-spotlight__proof-chip--accent {
  border-color: rgba(249, 115, 22, 0.45);
  color: var(--text-primary);
  background: rgba(249, 115, 22, 0.12);
}

.csv-spotlight__proof-arrow {
  font-size: 1.125rem;
  color: var(--accent);
  line-height: 1;
}

.csv-spotlight__proof-note {
  margin: 0 0 0.65rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.csv-spotlight__proof-story {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
}

.csv-spotlight__proof-story:hover,
.csv-spotlight__proof-story:focus-visible {
  color: var(--accent-light);
  outline: none;
}


@media (min-width: 960px) {
  .csv-spotlight__layout {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    grid-template-areas:
      "figure levers"
      "proof proof"
      "actions actions";
    align-items: start;
  }

  .csv-spotlight__figure {
    align-self: stretch;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .csv-spotlight__lever-link,
  .csv-spotlight__proof-story {
    transition: none;
  }
}