/* ============================================================
   aceArt GmbH – Static Website
   style.css
   ============================================================ */

/* ---- CSS Variables ---- */
:root {
  --color-black:     #111016;
  --color-off-white: #E1E2E4;
  --color-red:       #F0533E;
  --color-white:     #fff;

  --font-bold:    'IBM Plex Sans', sans-serif;
  --font-medium:  'IBM Plex Sans', sans-serif;
  --font-regular: 'IBM Plex Sans', sans-serif;

  --fs-h1:     80px;
  --fs-h2:     50px;
  --fs-h3:     35px;
  --fs-intro:  30px;
  --fs-head:   25px;
  --fs-copy:   20px;
  --fs-footer: 18px;
  --fs-btn:    20px;

  --lh-h1:    80px;
  --lh-h2:    55px;
  --lh-h3:    40px;
  --lh-intro: 40px;
  --lh-copy:  30px;

  --border-radius: 20px;
  /* Radius for standalone project images (e.g. the Fokus side images
     on /projekte/<slug>). */
  --radius-project-img: 25px;

  --hdr-h: 100px;
  /* Default content container — bumped from 1220 to 1520 to match the
     relaunch.aceart-programming.de reference width (Divi's et_pb_row at
     max-width 1520). Variable name kept for cross-file compatibility;
     it's a layout token, not a literal pixel value. */
  --max-content: 1520px;
  --max-1780: 1780px;
  --pad-content: 92%;
  --pad-1780: 95%;
  /* Einheitlicher horizontaler Seiteneinzug für die Content-Rails
     (.width-content / .width-1780 / .stepper-start-inner). Ersetzt die
     früher inkonsistenten Werte (style.css 20px vs. page.css 5%), damit
     Home und Unterseiten denselben Einzug haben und Module bündig stehen. */
  --gutter: clamp(20px, 4vw, 48px);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-regular);
  font-size: var(--fs-copy);
  font-weight: 400;
  line-height: var(--lh-copy);
  color: var(--color-black);
  background: var(--color-off-white);
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }

/* Headings render at Regular (400) to match the reference visually.
   The reference's IBMPlexSans-Regular static font is declared at weight
   500, but with no Medium master available the browser falls back to
   the single Regular master. Our variable font (400–700) would actually
   interpolate 500 to a true Medium and look heavier — so we use 400. */
h1 {
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
}
h2 {
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}
h3 {
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}
p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

/* ---- Color helpers ---- */
.bg-off-white { background-color: var(--color-off-white); --corner-bg: var(--color-off-white); }
.bg-black     { background-color: var(--color-black); --corner-bg: var(--color-black); }
.bg-red       { background-color: var(--color-red); }
.bg-white     { background-color: var(--color-white); }

.color-off-white { color: var(--color-off-white); }
.color-red       { color: var(--color-red); }
.color-footer    { color: var(--color-off-white); }

/* ---- Layout ---- */
.section { padding: 80px 0; }
.pt-0 { padding-top: 0 !important; }

/* Vertical spacing utilities used in content templates (Hero CTAs,
   subtitles below an H2, button wrappers under split-points). The
   rules were referenced from day one but never actually defined,
   so every `.mt-40` button wrapper was silently flush against its
   previous sibling. */
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mt-60 { margin-top: 60px; }
.text-center { text-align: center; }
.is-hidden { visibility: hidden; }

.width-content {
  width: var(--pad-content);
  max-width: var(--max-content);
  margin-left: auto;
  margin-right: auto;
  padding-inline: var(--gutter);
}
.width-1780 {
  width: var(--pad-1780);
  max-width: var(--max-1780);
  margin-left: auto;
  margin-right: auto;
  padding-inline: var(--gutter);
}

.intro-text {
  font-size: var(--fs-copy);
  line-height: var(--lh-copy);
  max-width: 900px;
}

/* ---- Buttons ---- */
.aceart-button, .btn, .btn-primary, .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: var(--fs-btn);
  /* Was line-height: 1 + white-space: nowrap; that made long German
     labels (e.g. "Beratungstermin vereinbaren", "Mehr zur Förderberatung")
     overflow narrow viewports because the button refused to wrap. Allow
     wrapping, cap the width to the container, and center-align the
     wrapped text — the heart icon already has flex-shrink: 0 so it
     stays aligned with the multi-line label. */
  line-height: 1.25;
  border: 2px solid;
  border-radius: var(--border-radius);
  padding: 10px 20px;
  cursor: pointer;
  transition: 0.3s;
  text-decoration: none;
  background: none;
  width: fit-content;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Grey button */
.aceart-button.grey-button {
  background-color: var(--color-off-white);
  border-color: var(--color-black);
  color: var(--color-black);
}
.aceart-button.grey-button:hover {
  background-color: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-black);
}

/* Black button — opaque pill with visible black border in its rest
   state (matches the framed footprint of the adjacent grey-variant
   "Weitere Projekte" button in the project-cta). Border + bg flip
   to red on hover so the change reads as "black border → orange". */
.aceart-button.black-button {
  background-color: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-off-white);
}
.aceart-button.black-button:hover {
  background-color: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-black);
}

/* Outline button (accordion / dark bg) */
.aceart-button.outline-button {
  background-color: transparent;
  border-color: var(--color-off-white);
  color: var(--color-off-white);
}
.aceart-button.outline-button:hover {
  background-color: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-black);
}

/* Red button (nav CTA) — borderless: the 2px border previously
   used --color-black, which read as a visible black outline on the
   red fill. Match border to bg so the button reads as solid red. */
.aceart-button.red-button {
  background-color: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-black);
}
.aceart-button.red-button:hover {
  background-color: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-red);
}

/* Outline-white button (for dark backgrounds) */
.aceart-button.outline-white-button {
  background-color: transparent;
  border-color: var(--color-off-white);
  color: var(--color-off-white);
}
.aceart-button.outline-white-button:hover {
  background-color: var(--color-off-white);
  border-color: var(--color-off-white);
  color: var(--color-black);
}
.aceart-button.outline-white-button:hover .btn-heart {
  transform: scaleX(1);
  filter: brightness(0) saturate(100%);
}

/* Primary-darkbg button (orange on dark backgrounds) */
.aceart-button.primary-darkbg-button {
  background-color: #F0533E !important;
  border: 2px solid #F0533E !important;
  color: #1B1E21 !important;
}
.aceart-button.primary-darkbg-button:hover {
  background-color: transparent !important;
  border: 2px solid #F0533E !important;
  color: #F0533E !important;
}
.aceart-button.primary-darkbg-button .btn-heart {
  color: #1B1E21 !important;
}
.aceart-button.primary-darkbg-button:hover .btn-heart {
  transform: scaleX(1);
  color: #F0533E !important;
}
/* Force correct colors on primary-darkbg variant inner a/button */
aceart-button[variant="primary-darkbg"] a,
aceart-button[variant="primary-darkbg"] button {
  background-color: #F0533E !important;
  color: #1B1E21 !important;
  border: 2px solid #F0533E !important;
}
aceart-button[variant="primary-darkbg"] svg {
  fill: #1B1E21 !important;
}
aceart-button[variant="primary-darkbg"] a:hover,
aceart-button[variant="primary-darkbg"] button:hover {
  background-color: transparent !important;
  color: #F0533E !important;
  border: 2px solid #F0533E !important;
}
aceart-button[variant="primary-darkbg"] a:hover svg,
aceart-button[variant="primary-darkbg"] button:hover svg {
  fill: #F0533E !important;
}

/* Force correct colors on primary variant buttons (accordion / dark bg fix) */
aceart-button[variant="primary"] a, .btn-primary {
  background-color: #F0533E !important;
  color: #1B1E21 !important;
  opacity: 1 !important;
}
aceart-button[variant="primary"] svg, .btn-primary svg {
  fill: #1B1E21 !important;
}

.btn-heart {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  object-fit: contain;
  transform: scaleX(-1);
  transition: transform 0.3s, filter 0.3s;
}
/* Grey button: red heart → black heart on hover */
.aceart-button.grey-button:hover .btn-heart {
  transform: scaleX(1);
  filter: brightness(0) saturate(100%);
}
/* Black button: red heart → black heart on hover */
.aceart-button.black-button:hover .btn-heart {
  transform: scaleX(1);
}
/* Outline button: heart flip on hover */
.aceart-button.outline-button:hover .btn-heart {
  transform: scaleX(1);
  filter: brightness(0) saturate(100%);
}
/* Red button: black heart → red heart on hover. The SVG uses
   fill="currentColor", so the heart inherits the button's text
   colour and transitions black→red via the parent .red-button:hover
   rule (color → red). No filter needed — and crucially no filter()
   transition: a hue-rotate-based filter chain interpolates through
   the whole colour wheel mid-transition, briefly tinting the heart
   blue/green before settling on red. */
.aceart-button.red-button:hover .btn-heart {
  transform: scaleX(1);
}


/* ============================================================
   NAVIGATION
============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.site-header.nav-hidden {
  transform: translateY(-100%);
}
.site-header.scrolled {
  background-color: var(--color-off-white);
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}
/* Subpages skip the homepage fade-in (which script.js drives via
   opacity transitions on the header). Without this override the
   header would flash invisible for one frame on every subpage load. */
.site-header[data-subpage] { opacity: 1; visibility: visible; }

.nav-inner {
  display: flex;
  align-items: center;
  width: var(--pad-content);
  max-width: var(--max-content);
  margin: 0 auto;
  gap: 2rem;
  height: 100%;
}

.nav-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.nav-logo img { height: 42px; width: auto; }

/* ---- Desktop Nav ---- */
.main-nav { flex: 1; display: flex; justify-content: flex-end; }
.nav-list {
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--hdr-h);
}
/* Horizontal padding lives on .nav-item (not as gap on the list) so
   the hover-target between adjacent items fills the visual whitespace.
   Otherwise a diagonal cursor path from a nav-item down into its
   open mega-menu can cross a "dead" gap pixel and close the panel.
   12px+12px = the previous 24px visual spacing. */
.nav-item { position: relative; height: 100%; display: flex; align-items: center; padding: 0 12px; }

.nav-link {
  display: block;
  padding: 5px 0;
  font-size: 20px;
  font-weight: 500;
  color: var(--color-black);
  position: relative;
  white-space: nowrap;
  transition: text-shadow 0.3s;
}
.nav-item:hover > .nav-link {
  color: var(--color-red) !important;
  text-shadow: 1px 0px 0 var(--color-red) !important;
}
/* Animated underline */
.nav-link::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-red);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: left;
}
.nav-item:hover > .nav-link::before { transform: scaleX(1); }
.nav-link-tel {
  font-size: 16px;
  color: var(--color-off-white);
}

/* ---- Mega Menu (full-width dark dropdown) ---- */
.mega-menu {
  position: fixed;
  top: var(--hdr-h);
  left: 0;
  right: 0;
  background: var(--color-black);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 200;
  border-top: 3px solid var(--color-red);
  /* Bottom rule mirrors the top one so the dropdown stays visually
     bounded against pages whose first section is bg-black — without
     it, the dark dropdown blends into the dark page background while
     scrolling. */
  border-bottom: 3px solid var(--color-red);
}
.nav-item.has-mega:hover > .mega-menu {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.mega-inner {
  display: flex;
  width: var(--pad-content);
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 2.5rem 0;
  gap: 0;
}
.mega-col {
  flex: 1;
  padding: 0 2rem;
  border-left: 1px solid rgba(255,255,255,.15);
}
.mega-col:first-child { border-left: none; padding-left: 0; }
.mega-col:last-child { padding-right: 0; }

.mega-heading {
  display: block;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-red);
  margin-bottom: 1.2rem;
}

.mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem 2rem;
}
.mega-links {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.mega-menu a {
  display: block;
  padding: .55rem 0;
  font-size: 19px;
  color: var(--color-off-white);
  transition: color 0.2s;
  white-space: nowrap;
}
/* Only apply the hover recolor on pointers that can actually hover —
   on touch devices the :hover state sticks after a tap, which read as
   a broken "selected" state on mobile (FG testing). */
@media (hover: hover) {
  .mega-menu a:hover { color: var(--color-red); text-shadow: 1px 0px 0 var(--color-red); }
}

/* Agentur mega variant — narrower than the full-width Leistungen mega so
   the nav-list and promo panel sit closer together rather than at opposite
   ends of the viewport. */
.mega-inner--agentur {
  align-items: center;
  max-width: 980px;
  justify-content: space-between;
  gap: 3rem;
}
.mega-inner--agentur .mega-col:first-child { flex: 0 0 auto; min-width: 200px; }
.mega-inner--agentur .mega-col.mega-promo { flex: 0 0 auto; }
.mega-promo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
}
.mega-promo-img {
  width: 130px;
  height: auto;
  flex-shrink: 0;
}
.mega-promo-text {
  font-size: 18px;
  color: var(--color-off-white);
  line-height: 1.6;
}
.mega-promo-link {
  font-weight: 700;
  color: var(--color-off-white) !important;
}
.mega-promo-link:hover { color: var(--color-red) !important; }
.mega-promo-link__pik {
  display: inline-block;
  width: 14px;
  height: auto;
  margin-left: 0.35rem;
  vertical-align: -2px;
}

/* Hide phone number and submenu arrows on desktop */
.nav-tel { display: none; }
.open-submenu-btn { display: none; }

/* Burger */
.burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
  line-height: 0;
  scale: 0.85;
}
.ham { cursor: pointer; user-select: none; transition: transform 400ms; }
.hamRotate.active { transform: rotate(45deg); }
.ham .line {
  fill: none;
  stroke: var(--color-black);
  stroke-width: 5.5;
  stroke-linecap: round;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
}
.ham4 .top {
  stroke-dasharray: 39 121;
}
.ham4 .bottom {
  stroke-dasharray: 39 121;
}
.ham4.active .top {
  stroke-dashoffset: -68px;
}
.ham4.active .bottom {
  stroke-dashoffset: -68px;
}


/* ============================================================
   HERO
============================================================ */
.hero-wrap {
  background-color: var(--color-off-white);
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--hdr-h);
}
/* Drop the 100vh floor for hero rows that sit on top of short
   content (e.g. /agentur). */
.hero-wrap--compact { min-height: auto; }

.hero {
  width: var(--pad-content);
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  /* Horizontaler Gutter wie .width-content, damit der Hero-Text bündig mit
     dem restlichen Content (Karten, Slider, Stepper) auf der Content-Kante steht. */
  padding: 60px var(--gutter);
}

.hero-text {
  flex: 1;
  min-width: 0;
  /* Match the reference's 980px headline column so the hero h1 wraps
     after "Websites," and after "individuelle" on desktop. Without this
     cap the heading stretches across the whole 1520px content area and
     only breaks twice at large viewports. */
  max-width: 980px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.hero-intro {
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: var(--fs-intro);
  line-height: var(--lh-intro);
  color: var(--color-black);
}

.hero-main {
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  color: var(--color-black);
  letter-spacing: -0.02em;
}

/* Retained for inner pages */
.hero-sub {
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: var(--fs-intro);
  line-height: var(--lh-intro);
  color: var(--color-black);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.nerd-wrap { display: inline-flex; align-items: center; }
.nerd-img {
  display: inline-block;
  width: 80px;
  height: auto;
  vertical-align: sub;
}

.hero-image {
  flex-shrink: 0;
  width: 200px;
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8rem;
}

/* Hero-Bild Endlos-Drehen */
@keyframes spin { 
  100% { transform: rotate(360deg); } 
}
.hero-img {
  width: 100%;
  height: auto;
  animation: spin 10s linear infinite;
}

/* Loop-SVGs auf den Flip-Cards drehen sich langsam */
.loop-img.turnjoke {
  animation: turnSlow 20s linear infinite;
}
@keyframes turnSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* ============================================================
   SERVICES / FLIP CARDS
============================================================ */
.auszeichnung h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  position: relative;
  padding-right: 2rem;
}

.service-module {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3%;
  width: 100%;
}

/* Flip Card */
.flip-card {
  height: 730px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner,
.flip-card:active .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 20px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: 2px solid var(--color-off-white);
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.flip-card-front { z-index: 0; }
.flip-card-back  { z-index: 1; }

.flip-card-back {
  background-color: var(--color-off-white);
  color: var(--color-black);
  transform: rotateY(180deg);
  text-align: center;
  overflow: visible;
}

.flip-card-back h3 {
  font-family: var(--font-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  text-transform: uppercase;
  color: var(--color-black);
}

.flip-card-back p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-black);
}

/* Loop image (big circular SVG) */
.loop-img {
  width: 260px;
  height: auto;
}

/* Service red vertical line */
.service-line {
  width: 2px;
  height: 140px;
  background-color: var(--color-red);
  flex-shrink: 0;
}

/* Small white service icon */
.service-icon {
  width: 130px;
  height: auto;
}

/* Decorative line on flip back */
.flip-back-line {
  position: relative;
  flex-shrink: 0;
  width: 2px;
  height: 70px;
  overflow: visible;
}
.flip-back-line::before {
  content: '';
  display: block;
  width: 2px;
  height: 70px;
  background-color: var(--color-black);
}
.flip-back-line::after {
  content: '';
  background-image: url('/assets/images/aceArt_Ace_Red-Heart.svg');
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  height: 15px;
  width: 15px;
  position: absolute;
  left: calc(50% - 7.5px);
  bottom: -7px;
  transform: rotate(90deg);
}


/* ============================================================
   FOCUS / SKALIERBARE LÖSUNGEN
============================================================ */
.focus-section .width-content { padding-top: 0; }
.focus-text {
  max-width: 900px;
  margin-top: 2rem;
}
.focus-text p {
  font-size: var(--fs-copy);
  line-height: var(--lh-copy);
}
.focus-text strong { font-weight: 700; }


/* ============================================================
   EXPERTISE / METRICS
============================================================ */
/* Framed metrics module (matches the relaunch reference): a brand-red outline
   with generous rounding + padding, centred within the section. The bullet
   list stays left-aligned for readability. */
.expertise-block {
  max-width: 755px;
  margin-inline: auto;
  padding: 50px;
  border: 2px solid var(--color-red);
  border-radius: 25px;
}
.expertise-block .headline {
  font-family: var(--font-regular);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 400;
  margin-bottom: 1.5rem;
}
.expertise-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.expertise-list li {
  font-size: var(--fs-copy);
  line-height: var(--lh-copy);
  padding-left: 1.5rem;
  position: relative;
}
.expertise-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-red);
  font-weight: 700;
}
.expertise-list a {
  color: var(--color-red);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s;
}
.expertise-list a:hover { text-decoration-color: var(--color-red); }
@media (max-width: 640px) {
  .expertise-block { padding: 28px 22px; border-radius: 18px; }
}


/* ============================================================
   PORTFOLIO SLIDER
============================================================ */
.portfolio-slider-wrap {
  /* Auf den Standard-Content-Rail gebracht (identisch zu .width-content),
     damit die Projekt-Karten bündig mit den Textbändern stehen. Die
     Prev/Next-Hearts sitzen jetzt im Gutter (siehe Button-Regeln unten). */
  margin: 3rem auto 0;
  width: var(--pad-content);
  max-width: var(--max-content);
  padding-inline: var(--gutter);
  /* Establish a positioning context so the prev/next heart buttons
     (rendered as siblings of .portfolio-swiper) can be absolutely
     positioned relative to this wrap rather than the swiper. */
  position: relative;
}

/* Mid-flip the 3D rotation projects the card taller than its slide,
   and the swiper's overflow:hidden was clipping it top/bottom (the
   face shadow too). Pad the clip box vertically and pull the layout
   back with equal negative margins — net spacing stays unchanged,
   but the overhang now stays inside the clipping region. */
.portfolio-swiper {
  padding: 64px 0;
  margin: -64px 0;
}
.portfolio-swiper .swiper-slide { height: auto; }
.portfolio-slider-footer { margin-top: 2.5rem; }

/* Grid-mode (paginated, no swiper). 1/2/3 columns × max 3 rows per
   page; the JS keeps the page size in sync with the column count. */
.portfolio-grid {
  margin-top: 3rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .portfolio-grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

.portfolio-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2.5rem;
}
.portfolio-pagination[hidden] { display: none; }
.portfolio-pagination .page-btn {
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: 15px;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 2px solid var(--color-black);
  border-radius: 100px;
  background: transparent;
  color: var(--color-black);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, opacity 0.2s, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.portfolio-pagination .page-btn-num:hover:not(:disabled),
.portfolio-pagination .page-btn-num.active {
  background: var(--color-black);
  color: var(--color-off-white);
}
.portfolio-pagination .page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
/* Prev/Next buttons reuse the slider's heart icons but in black so
   they read as a calmer pagination control rather than a hot CTA.
   The chevron glyph (‹ ›) inside the button gets hidden via
   font-size:0 + color:transparent; the SVG is painted as a
   background-image. */
.portfolio-pagination .page-btn-prev,
.portfolio-pagination .page-btn-next {
  width: 22px;
  height: 44px;
  min-width: 0;
  padding: 0;
  border: none;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 0;
  color: transparent;
}
.portfolio-pagination .page-btn-prev {
  background-image: url('/assets/images/aceArt_Ace_Black-Heart_left.svg');
}
.portfolio-pagination .page-btn-next {
  background-image: url('/assets/images/aceArt_Ace_Black-Heart.svg');
}
.portfolio-pagination .page-btn-prev:hover:not(:disabled) {
  transform: translateX(-4px) scale(1.1);
}
.portfolio-pagination .page-btn-next:hover:not(:disabled) {
  transform: translateX(4px) scale(1.1);
}

/* ── Project flip cards ────────────────────────────
   Same playing-card language as the team cards: front = big
   screenshot + title + Pik index; back = the patterned card back
   carrying title, tags and the "Zum Projekt" CTA. The whole card is
   ONE <a> to the project (front and back). Used by the /projekte
   grid AND every portfolio slider. */
.proj-card {
  position: relative;
  display: block;
  width: 100%;
  /* Portrait, same ratio as the team cards. The screenshot fills the
     area above the title bar (center-cropped from the 800×600 source). */
  aspect-ratio: 3 / 4;
  perspective: 1400px;
  border-radius: 12px;
}
.proj-flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.05, 0.2, 1);
}
/* Hover flip only where hover exists — on touch the emulated hover
   would fight the tap-to-flip JS (first tap flips, second follows
   the link). */
@media (hover: hover) {
  .proj-card:hover .proj-flip { transform: rotateY(180deg); }
}
.proj-card:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
}
.proj-card:focus-visible .proj-flip,
.proj-card.is-flipped .proj-flip {
  transform: rotateY(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .proj-flip { transition: none; }
}
.proj-face {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Elevation on the faces (not the wrapper) so the shadow rotates
     with the card — same lesson as the team cards: on the static
     wrapper the unshadowed footprint shows as a light ghost mid-flip. */
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}
.proj-front {
  background: var(--color-black);
  display: flex;
  flex-direction: column;
}
/* The screenshot shows COMPLETE, never cropped: the image area gets
   the exact 4/3 ratio of the 800×600 referenz sources at full card
   width. The title bar below absorbs all remaining card height. */
.proj-front__img {
  width: 100%;
  flex: none;
  aspect-ratio: 4 / 3;
  object-fit: cover; /* no-op at the exact source ratio */
  display: block;
}
/* Solid black title bar filling the rest of the card, title centered. */
.proj-front__bar {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background: var(--color-black);
}
/* Soft transition: the screenshot sinks into the title bar via a fade
   to the same card black — no hard edge between image and bar. Kept
   shallow so the full image stays recognisable. */
.proj-front__bar::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 36px;
  background: linear-gradient(to top, var(--color-black), rgba(16, 16, 21, 0));
  pointer-events: none;
}
.proj-title {
  font-family: var(--font-bold);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
/* Corner suit index: Pik on the front, Herz (mirrored pair) on the back. */
.proj-index {
  position: absolute;
  top: 16px;
  left: 16px;
  height: 30px;
  width: auto;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
  z-index: 3;
}
/* Back: the playing-card back, same design as the team cards. */
.proj-back {
  transform: rotateY(180deg);
  background-color: #15151b;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  text-align: center;
}
/* Fine red inner frame — the printed border of a playing-card back. */
.proj-back::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1.5px solid rgba(240, 83, 62, 0.85);
  border-radius: 7px;
  pointer-events: none;
  z-index: 1;
}
/* Staggered Herz motif inside the frame (alternate rows point down). */
.proj-back::after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='%23F0533E' fill-opacity='0.09'%3E%3Cpath transform='translate(11 10) scale(0.55)' d='M1.142,19.804c-1.1-3.201-1.55-7.002-0.8-10.203C3.993-1.301,15.045-2.752,23.448,4.4c6.902,6.252,13.904,12.403,20.806,17.605l1.901,1.4c1.1,0.85,1.1,2.501,0,3.351l-1.901,1.45C36.001,34.958,31.3,39.109,24.848,44.911c-8.452,8.352-22.806,6.552-24.707-6.352c-0.3-3.151,0.9-7.052,1.1-7.702l2.201-5.852L1.142,19.804z'/%3E%3Cpath transform='translate(59 58) scale(0.55) rotate(180 23.5 25)' d='M1.142,19.804c-1.1-3.201-1.55-7.002-0.8-10.203C3.993-1.301,15.045-2.752,23.448,4.4c6.902,6.252,13.904,12.403,20.806,17.605l1.901,1.4c1.1,0.85,1.1,2.501,0,3.351l-1.901,1.45C36.001,34.958,31.3,39.109,24.848,44.911c-8.452,8.352-22.806,6.552-24.707-6.352c-0.3-3.151,0.9-7.052,1.1-7.702l2.201-5.852L1.142,19.804z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 96px 96px;
  z-index: 0;
}
/* Back indices sit INSIDE the red frame, mirrored like a real card. */
.proj-back .proj-index {
  top: 26px;
  left: 26px;
  filter: none;
}
.proj-back .proj-index--bottom {
  top: auto;
  left: auto;
  bottom: 26px;
  right: 26px;
  transform: rotate(180deg);
}
.proj-back__info {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 100%;
}
/* Red accent line above the title — the card's "title plaque". */
.proj-back__info::before {
  content: "";
  display: block;
  width: 38px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-red);
}
.proj-back__title {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}
.proj-cats {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.proj-cats span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  padding: 2px 10px;
}
/* CTA styled like the primary-darkbg aceart-button. It's a <span>
   because the whole card is already the <a>. */
.proj-back__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.25;
  color: #1B1E21;
  background-color: var(--color-red);
  border: 2px solid var(--color-red);
  border-radius: var(--border-radius);
  padding: 8px 18px;
  transition: background-color 0.3s, color 0.3s;
}
.proj-back__cta .btn-heart { transform: scaleX(-1); }
.proj-back__cta:hover {
  background-color: transparent;
  color: var(--color-red);
}
@media (max-width: 650px) {
  .proj-title { font-size: 18px; }
  .proj-front__bar { padding: 12px 16px; }
  .proj-front__bar::before { height: 28px; }
  .proj-back { padding: 20px; }
  .proj-back__info { gap: 10px; }
  .proj-back__title { font-size: 18px; }
  .proj-cats span { font-size: 12px; }
  .proj-back__cta { font-size: 15px; padding: 6px 14px; }
  .proj-index { height: 24px; }
  .proj-back .proj-index { top: 22px; left: 22px; }
  .proj-back .proj-index--bottom { top: auto; left: auto; bottom: 22px; right: 22px; }
}

/* Heart-icon prev/next buttons — same SVGs as the clients slider.
   Live as siblings of .portfolio-swiper inside .portfolio-slider-wrap
   so they can sit in the wrap's outer padding zone (positioned
   relative to the wrap) without being clipped by the swiper's
   internal overflow:hidden. */
.portfolio-slider-wrap > .swiper-button-prev,
.portfolio-slider-wrap > .swiper-button-next {
  position: absolute;
  top: 50%;
  width: 32px;
  height: 64px;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 5;
  /* Wipe Swiper's default chevron font/SVG so only our heart SVG
     background-image shows. (font-size:0 collapses the inline glyph,
     ::after rule below kills the SVG-content variant.) */
  color: transparent;
  font-size: 0;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s ease;
  filter: drop-shadow(0 4px 8px rgba(17, 16, 22, 0));
}
.portfolio-slider-wrap > .swiper-button-prev::after,
.portfolio-slider-wrap > .swiper-button-next::after {
  content: '' !important;
  display: none;
}
.portfolio-slider-wrap > .swiper-button-prev {
  /* Zentriert im Gutter (links der ersten Karte), statt im alten 6%-Rand. */
  left: calc((var(--gutter) - 32px) / 2);
  background-image: url('/assets/images/aceArt_Ace_Red-Heart_left.svg');
  transform: translateY(-50%);
}
.portfolio-slider-wrap > .swiper-button-next {
  right: calc((var(--gutter) - 32px) / 2);
  background-image: url('/assets/images/aceArt_Ace_Red-Heart.svg');
  transform: translateY(-50%);
}
/* Hover: heart leans into its direction and lifts off the page with
   a soft drop-shadow. */
.portfolio-slider-wrap > .swiper-button-prev:hover {
  transform: translate(-6px, -50%) scale(1.12);
  filter: drop-shadow(0 6px 12px rgba(240, 83, 62, 0.35));
}
.portfolio-slider-wrap > .swiper-button-next:hover {
  transform: translate(6px, -50%) scale(1.12);
  filter: drop-shadow(0 6px 12px rgba(240, 83, 62, 0.35));
}
.portfolio-slider-wrap > .swiper-button-prev:active,
.portfolio-slider-wrap > .swiper-button-next:active {
  transform: translateY(-50%) scale(0.95);
}
.portfolio-slider-wrap > .swiper-button-prev.swiper-button-disabled,
.portfolio-slider-wrap > .swiper-button-next.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 650px) {
  .portfolio-slider-wrap > .swiper-button-prev,
  .portfolio-slider-wrap > .swiper-button-next { width: 22px; height: 44px; }
}

/* Tech-stack slider — slides sit flush with the headline (no inner
   padding), and the prev/next arrows live *outside* the content
   column. To do that the swiper + buttons share a .tech-stack-frame
   wrapper: the swiper keeps overflow:hidden so fractional slides on
   mobile clip cleanly, while the buttons are siblings (not children)
   of the swiper, so they can extend past its border via negative
   offsets without being clipped. */
.tech-stack-frame {
  position: relative;
}
.tech-stack-swiper {
  overflow: hidden;
  position: relative;
  padding-bottom: 0.75rem;
}
.tech-stack-frame > .swiper-button-prev,
.tech-stack-frame > .swiper-button-next { z-index: 2; }
tech-stack-slider .intro-container {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
/* Mobile: when the H2 + "Mehr Infos" button wrap onto two lines, the
   H2's own margin-bottom + the flex row-gap stacked into ~48px of dead
   space between heading and button. Zero out the H2's bottom margin
   inside this flex line and shrink the gap so the button sits tight
   under the headline — but keep a generous gap between the button and
   the swiper below so the slider clearly reads as a separate block. */
@media (max-width: 640px) {
  tech-stack-slider .intro-container { gap: 0.75rem; margin-bottom: 2.75rem; }
  /* Specificity bump to beat .content-section .width-content h2 (0,2,1). */
  tech-stack-slider .content-section .width-content .intro-container h2 {
    margin-bottom: 0;
  }
}
.tech-stack-swiper .category-wrapper {
  color: var(--color-red);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.tech-stack-swiper .technology-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* Give every slide a comfortable swipe target so categories with only
   one or two badges (Mobile Apps / CMS) aren't shorter than a finger
   tap zone — otherwise the swipe gesture only registers on the tiny
   strip of heading + chips and feels broken. */
.tech-stack-swiper .tech-category-slide {
  min-height: 150px;
  height: auto;
}
/* Red-heart chevrons sit outside .width-content's text column. The
   frame is the same width as the swiper (= width-content's inner
   width), so left:-30px and right:-30px push the icons into the gap
   between the content edge and the viewport edge. */
.tech-stack-frame > .swiper-button-prev,
.tech-stack-frame > .swiper-button-next {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 44px;
  transform: translateY(-50%);
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s ease;
  filter: drop-shadow(0 4px 8px rgba(17, 16, 22, 0));
}
.tech-stack-frame > .swiper-button-prev::after,
.tech-stack-frame > .swiper-button-next::after {
  content: '' !important;
  display: none;
}
.tech-stack-frame > .swiper-button-prev {
  left: -44px;
  background-image: url('/assets/images/aceArt_Ace_Red-Heart_left.svg');
}
.tech-stack-frame > .swiper-button-next {
  right: -44px;
  background-image: url('/assets/images/aceArt_Ace_Red-Heart.svg');
}
/* Unified arrow interaction (ref: "Das realisierten wir" portfolio slider):
   hover = zoom + directional lean + red glow, click = squish, disabled = fade. */
.tech-stack-frame > .swiper-button-prev:hover {
  transform: translate(-6px, -50%) scale(1.12);
  filter: drop-shadow(0 6px 12px rgba(240, 83, 62, 0.35));
}
.tech-stack-frame > .swiper-button-next:hover {
  transform: translate(6px, -50%) scale(1.12);
  filter: drop-shadow(0 6px 12px rgba(240, 83, 62, 0.35));
}
.tech-stack-frame > .swiper-button-prev:active,
.tech-stack-frame > .swiper-button-next:active {
  transform: translateY(-50%) scale(0.95);
}
.tech-stack-frame > .swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}

/* Technology badges inside the slider. The component used to set
   color / background / padding inline; now in CSS so a hover rule
   can win without !important. */
.tech-stack-swiper .single-tech {
  display: inline-flex;
  align-items: center;
  color: var(--color-off-white);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.3;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.tech-stack-swiper .single-tech:hover,
.tech-stack-swiper .single-tech:focus-visible {
  background-color: var(--color-red);
  color: var(--color-black);
  border-color: var(--color-red);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  /* Mobile gutter between content edge and viewport edge is only
     ~35px, so the heart icons get smaller offsets — desktop's -44px
     would push them off-screen. */
  .tech-stack-frame > .swiper-button-prev { left: -32px; }
  .tech-stack-frame > .swiper-button-next { right: -32px; }
}


/* ============================================================
   CLIENTS SLIDER
============================================================ */
.clients-swiper {
  /* Kein horizontales Padding: der Swiper klippt (overflow:hidden) exakt an der
     Content-Kante, die Logos starten bündig darin. Der Gutter-Einzug kommt vom
     Wrap (.clients-swiper-wrap), die Pfeile sitzen dort im Gutter. */
  padding: 1rem 0 !important;
  user-select: none;
  -webkit-user-select: none;
}

/* Kunden-Slider in einer .width-content-Sektion (Home, Leistungen-Index):
   Wrap auf die Rail-Kanten ziehen und per Gutter-Padding den Swiper auf die
   Content-Kante setzen — analog .portfolio-slider-wrap. So klippt der Swiper an
   der Content-Breite (kein Logo-Überstand im Gutter), die Hearts liegen im Gutter. */
.width-content > .clients-swiper-wrap {
  position: relative;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
}

.client-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-off-white);
  padding: 30px 40px;
  border-radius: 30px;
  /* Hover effect is elevation, not a colour fill — flooding the wrap
     with red bled through logos that have transparent backgrounds. */
  box-shadow: 0 0 0 rgba(17, 16, 22, 0);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.client-logo-wrap:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(17, 16, 22, 0.12);
}
.client-logo-wrap a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.client-logo-wrap img {
  height: 80px;
  width: 218px;
  object-fit: contain;
  transition: transform 0.35s ease;
}
.client-logo-wrap:hover img {
  transform: scale(1.05);
}

.clients-swiper-wrap > .swiper-button-prev,
.clients-swiper-wrap > .swiper-button-next {
  user-select: none;
  -webkit-user-select: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
  height: 40px;
  width: 20px;
  z-index: 5;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  padding: 0;
  cursor: pointer;
  color: transparent;
  font-size: 0;
  /* Unified arrow interaction (ref: "Das realisierten wir" portfolio slider). */
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s ease;
  filter: drop-shadow(0 4px 8px rgba(17, 16, 22, 0));
}
.clients-swiper-wrap > .swiper-button-prev::after,
.clients-swiper-wrap > .swiper-button-next::after {
  content: '' !important; /* Remove default swiper arrow icons */
  display: none;
}
.clients-swiper-wrap > .swiper-button-prev {
  /* Im Gutter, links der ersten Logo-Kachel (zentriert im Gutter). */
  left: calc((var(--gutter) - 20px) / 2);
  background-image: url('/assets/images/aceArt_Ace_Red-Heart_left.svg');
}
.clients-swiper-wrap > .swiper-button-next {
  right: calc((var(--gutter) - 20px) / 2);
  background-image: url('/assets/images/aceArt_Ace_Red-Heart.svg');
}
.clients-swiper-wrap > .swiper-button-prev:hover {
  transform: translate(-6px, -50%) scale(1.12);
  filter: drop-shadow(0 6px 12px rgba(240, 83, 62, 0.35));
}
.clients-swiper-wrap > .swiper-button-next:hover {
  transform: translate(6px, -50%) scale(1.12);
  filter: drop-shadow(0 6px 12px rgba(240, 83, 62, 0.35));
}
.clients-swiper-wrap > .swiper-button-prev:active,
.clients-swiper-wrap > .swiper-button-next:active {
  transform: translateY(-50%) scale(0.95);
}
.clients-swiper-wrap > .swiper-button-prev.swiper-button-disabled,
.clients-swiper-wrap > .swiper-button-next.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}
@media only screen and (max-width: 650px) {
  .clients-swiper-wrap > .swiper-button-prev,
  .clients-swiper-wrap > .swiper-button-next {
    height: 30px;
    width: 15px;
  }
}


/* ============================================================
   STEPPER
============================================================ */
.stepper-section { padding: 0; }

.stepper-starter {
  background-color: var(--color-off-white);
  padding: 80px 0;
}
.stepper-start-inner {
  width: var(--pad-content);
  max-width: var(--max-content);
  margin: 0 auto;
  /* Gleicher Seiteneinzug wie .width-content, damit die Stepper-Kacheln
     bündig mit den Textbändern darüber/darunter stehen. */
  padding-inline: var(--gutter);
}

.stepper-headline {
  font-family: var(--font-regular);
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--color-black);
  margin-bottom: 1.5rem;
}
.stepper-description {
  font-size: var(--fs-copy);
  color: var(--color-black);
  margin-bottom: 2rem;
  max-width: 700px;
}

/* Card-based stepper tiles.
   With 9 starter tiles the auto-fit grid produced uneven rows (e.g.
   7 + 2 orphans) at most desktop widths. Use explicit column counts
   per breakpoint so the rows are always either fully populated or a
   clean 3×3 grid:
   – mobile: 3×3 (no orphans, square layout)
   – tablet: 3×3 (same)
   – desktop ≥ 1100px: single row of 9 */
.stepper-tiles {
  display: grid;
  /* 3 cols × 3 rows on mobile/tablet for the 7-tile starter; the 7th
     tile sits alone on row 3 and would look orphaned, so the rule
     below stretches it across the full row. minmax(0, 1fr) keeps
     long labels like "Custom Software" from blowing the columns out
     on narrow phones. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
/* A starter tile that is both :last-child AND lands in column 1
   (nth-child(3n+1) in a 3-col grid) is alone on its row — give it
   the full width so the row reads as a deliberate banner. */
.stepper-tiles .stepper-tile:last-child:nth-child(3n+1) {
  grid-column: 1 / -1;
}
@media (min-width: 1100px) {
  .stepper-tiles {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.75rem;
  }
  /* Reset the full-row span at desktop where the single 7-col row
     already places every tile cleanly. */
  .stepper-tiles .stepper-tile:last-child:nth-child(3n+1) {
    grid-column: auto;
  }
}
.stepper-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem 0.75rem;
  background: var(--color-white);
  border: 2px solid var(--color-black);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.2s;
}
.stepper-tile:hover {
  background: var(--color-black);
  border-color: var(--color-black);
  transform: translateY(-4px);
}
.stepper-tile:hover .stepper-tile-label {
  color: var(--color-red);
}
.stepper-tile-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
/* Icons swap on hover: the tile turns black, so show the white-line
   variant; the dark-line variant is for the default white tile. */
.stepper-tile-icon--hover { display: none; }
.stepper-tile:hover .stepper-tile-icon { display: none; }
.stepper-tile:hover .stepper-tile-icon--hover { display: block; }
.stepper-tile-label {
  font-family: var(--font-bold);
  /* Scales with the tile width so the longer labels (Custom Software,
     Website Relaunch) fit cleanly in the desktop 9-column row while
     still reading at full size on tablet/mobile 3×3. */
  font-size: clamp(14px, 1vw, var(--fs-copy));
  font-weight: 700;
  color: var(--color-black);
  text-align: center;
  line-height: 1.25;
  transition: color 0.25s;
}

/* Dialog overlay */
.stepper-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(17,16,22,.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.stepper-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.stepper-dialog {
  display: block;
  position: relative;
  margin: 0 auto;
  inset: unset;
  background: var(--color-off-white);
  border: 2px solid var(--color-black);
  border-radius: var(--border-radius);
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 0;
  transform: scale(.95) translateY(16px);
  transition: transform 0.3s;
}
.stepper-overlay.open .stepper-dialog { transform: none; }

.stepper-dialog-inner { padding: 2.5rem; }

.stepper-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.stepper-back,
.stepper-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--color-black);
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.2s;
}
.stepper-back:hover,
.stepper-close:hover { background: rgba(0,0,0,.1); }
.stepper-counter { font-size: var(--fs-copy); font-weight: 700; color: var(--color-black); }

/* Step content */
.step-heading {
  font-family: var(--font-regular);
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--color-black);
  margin-bottom: .5rem;
}
.step-sub {
  font-size: var(--fs-copy);
  color: var(--color-black);
  margin-bottom: 2rem;
}

.step-btns {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.5rem;
}

/* Card grid for stepper modal steps */
.step-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.step-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 2px solid #e5e5e5;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.step-card:hover {
  border-color: #ccc;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.step-card:hover .step-card-label {
  color: var(--color-black);
}
.step-card.selected {
  border-color: var(--color-red);
  border-left: 4px solid var(--color-red);
  background: #fff;
}
.step-card.selected .step-card-label {
  color: var(--color-red);
}
.step-card-emoji {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}
.step-card-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}
.step-card-label {
  font-family: var(--font-regular);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-black);
  text-align: left;
  transition: color 0.2s;
}

/* Form in stepper */
.form-row { margin-bottom: 1.25rem; }
.form-row label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: .4rem;
}
.form-row input,
.form-row textarea {
  width: 100%;
  padding: .7em 1em;
  border: 2px solid var(--color-black);
  border-radius: 10px;
  font-family: var(--font-regular);
  font-size: 18px;
  color: var(--color-black);
  background: var(--color-off-white);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-row input:focus,
.form-row textarea:focus {
  border-color: var(--color-black);
  box-shadow: 0 0 0 3px rgba(17,16,22,.15);
}
.form-row input.err { border-color: #cc0000; }
.form-row textarea { resize: vertical; min-height: 100px; }
.form-row .err-msg {
  display: none;
  font-size: 13px;
  color: #cc0000;
  margin-top: .3rem;
  font-weight: 700;
}
.form-row input.err ~ .err-msg { display: block; }

/* ---- Custom checkbox ----
   Native <input type="checkbox"> is replaced by a styled box rendered
   in .checkbox__box. The real input stays in the DOM (visually hidden)
   so HTML5 `required` validation, focus, and form submission keep
   working unchanged. */
/* Higher-specificity selector — `.form-row label` (above) would
   otherwise win on `display` and collapse the flex layout. */
.form-row label.checkbox,
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  cursor: pointer;
  user-select: none;
  font-weight: 400;
  margin-bottom: 0;
}
.checkbox__text {
  /* Tight line-height so the text's line-box height is close to the
     22px checkbox; with align-items: center the visible glyphs then
     line up with the centre of the box instead of riding above it. */
  line-height: 1.25;
}
.checkbox input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.checkbox__box {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 2px solid var(--color-black);
  border-radius: 6px;
  background: var(--color-off-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.checkbox__box::after {
  content: '';
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--color-off-white);
  border-bottom: 2px solid var(--color-off-white);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  margin-top: -2px;
  transition: transform 0.18s ease;
}
.checkbox input:checked + .checkbox__box {
  background: var(--color-red);
  border-color: var(--color-red);
}
.checkbox input:checked + .checkbox__box::after {
  transform: rotate(-45deg) scale(1);
}
.checkbox input:focus-visible + .checkbox__box {
  outline: 3px solid rgba(240, 83, 62, 0.35);
  outline-offset: 2px;
}
.checkbox input.err + .checkbox__box,
.checkbox input:invalid:not(:placeholder-shown) + .checkbox__box {
  border-color: #cc0000;
}
.checkbox__text a {
  color: var(--color-red);
  text-decoration: underline;
}

/* ============================================================
   ACCORDION
   Global component used via {{ partial "accordion.html" ... }}.
   Built on native <details>/<summary> for accessibility; the
   smooth animation comes from the CSS grid `0fr → 1fr` trick on
   the panel and a small JS shim for the close direction. The +/-
   indicator morphs by rotating the icon container 180° while the
   ::after bar rotates from vertical (90°) to horizontal (0°).
============================================================ */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.accordion-heading {
  font-family: var(--font-regular);
  font-size: clamp(26px, 4vw, 32px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-black);
  margin: 3rem 0 1.25rem;
}
.accordion-item {
  border: 2px solid var(--color-black);
  border-radius: 12px;
  background: var(--color-off-white);
  transition: background 0.25s ease;
  overflow: hidden;
}
.accordion-item[open] {
  background: #fff;
}
.accordion-trigger {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-black);
}
.accordion-trigger::-webkit-details-marker { display: none; }
.accordion-trigger::marker { display: none; content: ""; }
.accordion-trigger:focus-visible {
  outline: 3px solid rgba(240, 83, 62, 0.35);
  outline-offset: 2px;
}
.accordion-question {
  flex: 1;
  transition: color 0.2s ease;
}
.accordion-trigger:hover .accordion-question,
.accordion-trigger:focus-visible .accordion-question {
  color: var(--color-red);
}
/* The trigger icon is the brand red Pik (♠). Hovering scales it up
   slightly with a soft glow; opening the item flips the spade
   180° with a snappy overshoot ease so the action feels lively
   and on-brand rather than the generic "+ → −" swap. */
.accordion-icon {
  position: relative;
  width: 24px;
  height: 26px;
  flex-shrink: 0;
  /* The vertical "bob" lives on this box (a plain translate never rasterises,
     so it stays crisp); the spade glyph + its grow/rotate live on ::before. */
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Supersampled spade: the SVG is painted into a box 3× the displayed size and
   then only ever scaled DOWN. Scaling a transform layer UP (the old approach:
   a 24×26 background scaled to 1.15–1.2) upsampled the cached bitmap and looked
   pixelated on hover/open; downscaling a 3× texture stays sharp at every step.
   Shadow offsets are ×3 to cancel the 0.333 base scale, so the glow is unchanged. */
.accordion-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  /* Painted at 5× the displayed size (24×26) and only ever scaled DOWN. During
     a scale animation Chrome rasterises the layer near the on-screen size and
     upscales that bitmap through the grow/rotate — soft edges. A 5× texture is
     dense enough that every frame is still downsampling ⇒ sharp at rest AND
     mid-rotation. (3× was too low; will-change made it worse by freezing a
     low-res raster, so it is intentionally not used.) Shadow offsets below are
     ×5 to cancel the 0.2 base scale so the glow keeps its intended size. */
  width: 120px;
  height: 130px;
  background: url('/assets/images/aceArt_Ace_Red-Pik.svg') center / contain no-repeat;
  transform-origin: center;
  transform: translate(-50%, -50%) scale(0.2);
  /* back-out cubic — the icon overshoots a hair before settling */
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.25s ease;
  filter: drop-shadow(0 0 0 rgba(240, 83, 62, 0));
}
/* Hover = glow only, no zoom/bob: the ::before keeps its base scale (0.2) and
   just gains the drop-shadow. Same in the open state — hover never grows the
   icon, only the open-click rotation changes its size. */
.accordion-trigger:hover .accordion-icon::before {
  filter: drop-shadow(0 20px 50px rgba(240, 83, 62, 0.4));
}
.accordion-item[open] > .accordion-trigger .accordion-icon::before {
  transform: translate(-50%, -50%) rotate(180deg) scale(0.22);
  filter: drop-shadow(0 20px 40px rgba(240, 83, 62, 0.3));
}
.accordion-item[open] > .accordion-trigger:hover .accordion-icon::before {
  transform: translate(-50%, -50%) rotate(180deg) scale(0.22);
  filter: drop-shadow(0 30px 60px rgba(240, 83, 62, 0.45));
}

/* Smooth height animation. The browser would normally collapse the
   panel instantly when [open] is removed; the JS shim adds .is-closing
   so the panel can transition 1fr → 0fr first, then [open] is removed
   on transitionend. */
.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.accordion-item[open] .accordion-panel {
  grid-template-rows: 1fr;
}
.accordion-item.is-closing .accordion-panel {
  grid-template-rows: 0fr;
}
.accordion-panel-inner {
  overflow: hidden;
  min-height: 0;
}
.accordion-answer {
  padding: 0 1.25rem 1.25rem;
  font-size: 17px;
  line-height: 1.65;
  color: #333;
}
.accordion-answer > p:first-child { margin-top: 0; }
.accordion-answer > p:last-child { margin-bottom: 0; }
/* :not(.glossary-link) — auto-linked glossary terms in FAQ answers keep
   their dashed underline; a normal underline on top doubles it. */
.accordion-answer a:not(.glossary-link) {
  color: var(--color-red);
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .accordion-item,
  .accordion-icon,
  .accordion-icon::before,
  .accordion-panel {
    transition: none;
  }
}

.stepper-nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid rgba(17,16,22,.2);
  gap: 1rem;
}

/* Honeypot field — invisible to humans, fillable by naive bots.
   Lives in style.css (not page.css) so the rule still applies inside
   the stepper modal that can open from the home page, which is the
   one route that doesn't load page.css. */
.honeypot { display: none !important; }

/* Success */
.step-success {
  text-align: center;
  padding: 2rem 0;
}
.step-success h3 {
  font-size: var(--fs-h3);
  margin-bottom: 1rem;
  color: var(--color-black);
}
.step-success p { font-size: var(--fs-copy); color: var(--color-black); }
.step-success a { text-decoration: underline; color: var(--color-black); }
.step-success__icon { margin: 0 auto 1.5rem; width: 60px; height: 60px; color: var(--color-black); }
.step-success .aceart-button { margin-top: 2rem; }


/* ============================================================
   FOOTER
============================================================ */
.vertical-breadcrumb {
  position: fixed;
  left: 40px;
  bottom: 40px;
  transform: rotate(-90deg);
  transform-origin: left bottom;
  z-index: 1000;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
  mix-blend-mode: difference;
  white-space: nowrap;
  pointer-events: none;
  padding: 0;
  margin: 0;
  line-height: 1;
}

.vertical-breadcrumb a {
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
}

.vertical-breadcrumb span {
  margin-left: 0.5rem;
  color: #fff;
}

@media (max-width: 1400px) {
  .vertical-breadcrumb {
    /* Was 10px — too close to the edge on iPad landscape (1180px).
       Keep enough margin so the rotated text doesn't kiss the bezel. */
    left: 28px;
  }
}

@media (max-width: 1024px) {
  .vertical-breadcrumb {
    display: none;
  }
}

.site-footer { background-color: var(--color-black); }

.footer-grid {
  width: var(--pad-1780);
  max-width: var(--max-1780);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem;
  padding: 60px 0 40px;
  align-items: start;
}

.footer-logo {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(0.7);
}
.footer-logo:hover { filter: brightness(0) invert(1); }

.footer-col p,
.footer-col address {
  font-size: var(--fs-footer);
  line-height: 1.8;
  color: var(--color-off-white);
}
.footer-col a {
  color: var(--color-off-white);
  transition: color 0.2s;
}
/* Same hover language as the contact links on the team-card backs:
   brand red + underline — clearly visible on the dark footer. */
.footer-col a:hover {
  color: var(--color-red);
  text-decoration: underline;
}

.footer-social {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.footer-social a { display: block; opacity: .7; transition: opacity 0.2s; }
.footer-social a:hover { opacity: 1; }
.footer-social img { width: 40px; height: 40px; filter: brightness(0) invert(1); }

.footer-breadcrumb {
  width: var(--pad-1780);
  max-width: var(--max-1780);
  margin: 0 auto;
  padding: 1rem 0 1.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 14px;
  color: var(--color-off-white);
}


/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1520px) {
  .flip-back-line { display: none; }
  .flip-card-back h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
  }
}

@media (max-width: 980px) {
  .nerd-img { width: 50px; }
  :root {
    --fs-h1: 48px;
    --lh-h1: 52px;
    --fs-h2: 36px;
    --lh-h2: 40px;
    --fs-h3: 26px;
    --lh-h3: 32px;
    --fs-intro: 22px;
    --lh-intro: 30px;
    --fs-copy: 18px;
    --lh-copy: 26px;
    --hdr-h: 72px;
  }

  /* FG: the 42px logo dominated the 72px-tall mobile header — scale
     it down so it reads as compact brand mark rather than the page's
     primary visual element. */
  .nav-logo img { height: 32px; }

  /* Mobile nav */
  .main-nav { 
    display: flex;
    position: fixed;
    top: 0;
    right: -100%;
    bottom: 0;
    width: 100%;
    background: var(--color-off-white);
    overflow: hidden auto;
    padding-top: 100px;
    flex-direction: column;
    justify-content: space-between;
    z-index: 9999;
    border-left: 3px solid var(--color-red);
    transition: right 0.3s ease-in-out;
  }
  .burger { display: flex; }

  .main-nav.open {
    right: 0;
  }
  .main-nav .nav-list {
    flex-direction: column;
    height: auto;
    gap: 0;
    width: 100%;
    align-items: flex-start;
    padding: 0 30px 30px;
  }
  .main-nav .nav-item {
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
    padding: 0;
    position: relative;
  }
  .main-nav .nav-link {
    width: 100%;
    padding: 0;
    font-size: 25px;
    font-weight: 500;
    line-height: 1;
    border-bottom: none;
    color: var(--color-black);
  }
  .main-nav .nav-link::before {
    display: none !important;
  }

  /* Mobile mega menu override */
  .main-nav .mega-menu {
    position: fixed;
    top: 0;
    left: auto;
    right: -100%;
    bottom: 0;
    width: 100%;
    opacity: 1; 
    pointer-events: auto;
    background: var(--color-off-white);
    border-top: none;
    border-bottom: none;
    display: block;
    transition: right 0.5s ease-in-out;
    z-index: 1000;
    padding-top: var(--hdr-h);
    overflow-y: auto;
  }
  .main-nav .nav-item.mob-open > .mega-menu { right: 0; }
  .main-nav .submenu-back {
    display: block;
    padding: 10px 30px;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: none;
    margin-bottom: 0;
  }
  .main-nav .mega-inner {
    flex-direction: column;
    padding: 0 30px;
    width: 100%;
    gap: 0;
  }
  .main-nav .mega-col {
    border-left: none;
    padding: 0;
    margin-bottom: 20px;
  }
  .main-nav .mega-heading {
    color: var(--color-red);
    margin-bottom: 5px;
    margin-top: 0;
    font-size: 20px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .main-nav .mega-heading::before,
  .main-nav .mega-heading::after {
    content: "";
    height: 0;
    border-top: 1px solid var(--color-red);
  }
  .main-nav .mega-heading::after {
    flex: 1;
  }
  .main-nav .mega-heading::before {
    flex: 0 0 15px;
  }
  .main-nav .mega-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    gap: 0;
  }
  .main-nav .mega-menu a {
    color: var(--color-black);
    padding: 2px 0;
    font-size: 25px;
    font-weight: 500;
    line-height: 28px;
  }
  .main-nav .mega-links {
    gap: 0;
  }
  .main-nav .mega-promo { display: none; }
  /* Reset desktop-only Agentur mega tweaks that leak into the mobile
     drawer (center-align + min-width 200px would otherwise indent the
     Team/Jobs/Netzwerk list relative to the Zurück button). */
  .main-nav .mega-inner--agentur {
    align-items: stretch;
    max-width: none;
    gap: 0;
  }
  .main-nav .mega-inner--agentur .mega-col:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Hide CTA button and phone from nav-list on mobile */
  .main-nav .nav-item-cta { display: none; }

  /* Submenu arrow chevron */
  .main-nav .open-submenu-btn {
    position: absolute;
    right: 10px;
    top: 0;
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    z-index: 2;
  }
  .main-nav .open-submenu-btn::after {
    content: "";
    display: block;
    width: 11px;
    height: 11px;
    border-right: 2px solid var(--color-black);
    border-bottom: 2px solid var(--color-black);
    border-top: none;
    border-left: none;
    rotate: -45deg;
    transition: 0.3s ease-in;
  }

  /* Mobile contact container at bottom */
  .mobile-contact-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 30px 30px;
  }
  .mobile-contact-container a {
    display: flex;
    gap: 20px;
    align-items: center;
    font-size: 20px;
    font-weight: 500;
    color: var(--color-red);
    text-decoration: none;
  }
  .mobile-contact-container a.mobile-contact-email::before {
    content: url("/assets/images/ACEART_ICONS_Consulting_schwarz.svg");
    width: 45px;
    flex-shrink: 0;
    line-height: 0;
  }
  .mobile-contact-container a.mobile-contact-tel::before {
    content: url("/assets/images/ACEART_ICONS_Support_schwarz.svg");
    width: 45px;
    flex-shrink: 0;
    line-height: 0;
  }

  /* Hero */
  .hero-wrap { align-items: flex-start; min-height: auto; }
  .hero {
    flex-direction: column;
    padding-top: 40px;
    padding-bottom: 160px !important;
    gap: 2rem;
    position: relative;
    min-height: 0;
  }
  /* .hero-image positioning + sizing for this breakpoint lives in
     the consolidated `@media (max-width: 980px)` block near the
     end of this file (the "rotating aceart-hero-pik-rotating.webp" block). */
  .loop-img.turnjoke { animation: none; }
  .site-main .hero-wrap + section { padding-top: 50px !important; }
  .hero-wrap + .section { padding-top: 50px !important; }

  /* Service flip cards */
  .service-module {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .flip-card { height: 730px; min-height: 400px; }
  .loop-img { width: 100px; }
  .service-icon { width: 80px; }
  .flip-card-front, .flip-card-back { padding: 20px; gap: 30px; }
  .flip-back-line { display: block; }

  /* Portfolio — Breite/Einzug kommen vom Content-Rail (.portfolio-slider-wrap),
     kein separates 2%-Padding mehr, damit die Karten auch hier bündig sind. */

  /* Footer */
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  :root {
    --fs-h1: 36px;
    --lh-h1: 40px;
    --fs-h2: 28px;
    --lh-h2: 34px;
  }

  .section { padding: 50px 0; }
  .site-main .hero-wrap + section { padding-top: 50px !important; }
  .hero-wrap + .section { padding-top: 50px !important; }

  /* 3-col base rule produces a 3+3+1 layout for the 7 starter tiles
     on phones; the orphan-span rule in the base block stretches the
     7th tile across the full last row. Tighten per-tile padding for
     the smaller cells. */
  .stepper-tile { padding: 1.25rem 0.5rem; }
  .step-cards { grid-template-columns: 1fr; }
  .stepper-dialog-inner { padding: 1.5rem; }

  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; }
  .footer-social { flex-direction: row; }
}

@media (max-width: 640px) {
  /* FG: in the 2-column phase the rows ran into each other; collapse
     the footer to a single column earlier so each meta-block gets its
     own row with generous vertical breathing room. Also widen the
     edge gutter — 95% (~2.5% per side) read as "gequetscht" against
     the viewport edge on a phone; use 88% (~6% per side ≈ 24px) for
     comfortable spacing. */
  .footer-grid,
  .footer-breadcrumb { width: 88%; }
  .footer-grid { grid-template-columns: 1fr;
    gap: 32px; padding: 50px 0 32px; }

  /* Tighten the gap between the trailing CTA section and the
     'Für welchen Bereich…' stepper on mobile. The two stacked sections
     plus the .stepper-starter's own 80px vertical padding contributed
     ~210px of dead vertical space. On tablet and desktop this still
     reads as comfortable, so the trim is scoped to ≤640px only. */
  .section.stepper-section { padding: 20px 0; }
  .stepper-starter { padding: 36px 0; }
  /* Trim padding-bottom of any section directly preceding a stepper —
     content-section (continuous-support, leistungen), cta-section
     (agentur/team), page-hero, etc. */
  section:has(+ site-stepper) {
    padding-bottom: 24px !important;
  }

  /* Stack the Zurück / Weiter (or Absenden) row vertically — on a
     narrow viewport "← Zurück" and "Absenden ✓" otherwise crowd
     each other and the wider Absenden button gets cropped. */
  .stepper-nav-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .stepper-nav-row .aceart-button { width: 100%; }
}
.pupil {
    transition: transform 0.1s ease-out;
    transform-origin: center;
}
.submenu-back { display: none; }

.nav-logo, .burger {
  position: relative;
  z-index: 10000;
}

.logo-red-spade { display: none; }
.site-header.menu-open .logo-black { display: none; }
.site-header.menu-open .logo-red-spade { display: block; }

/* Mobile contact container - hidden on desktop, shown in mobile nav */
.mobile-contact-container { display: none !important; }
@media (max-width: 980px) {
  .main-nav .mobile-contact-container { display: flex !important; }
}

aceart-button { display: contents; }

/* Global Text Selection Highlight */
::selection {
    background-color: var(--color-red, #F0533E) !important;
    color: #ffffff !important;
}
::-moz-selection {
    background-color: var(--color-red, #F0533E) !important;
    color: #ffffff !important;
}

/* Glossary Auto-Links */
.glossary-link {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--color-red, #F0533E);
    text-decoration: none;
    border-bottom: 1px dashed var(--color-red, #F0533E);
    transition: all 0.3s ease;
}

.hero-sub .glossary-link,
.faq-q .glossary-link {
    display: inline-block !important;
    vertical-align: baseline;
}

.glossary-link:hover {
    background-color: var(--color-red, #F0533E);
    color: #fff;
    border-bottom-style: solid;
}

/* ============================================================
   Customer testimonials — partial layouts/partials/testimonials.html
   Renders a Swiper slider of editorial-feel quote cards. Inherits the
   parent section's color so it works on both light and dark variants.
============================================================ */
.testimonials {
  padding: 5rem 0;
}
.testimonials__headline {
  text-align: center;
  margin: 0 0 3rem;
}
.testimonials-swiper {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding-bottom: 3rem;
}
/* The slide contents are width-fixed by Swiper — let the card breathe inside. */
.testimonials-swiper .swiper-slide {
  height: auto;
  display: flex;
  align-items: stretch;
}
.testimonial-card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: 3rem 2.5rem 2.25rem;
  background: var(--color-white, #fff);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--border-radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  text-align: center;
}
/* Decorative quote glyph in brand red — anchored to the top-left so
   it reads as an opening-quote ornament instead of a watermark behind
   the body text (FG: "Icon hinter Text"). */
.testimonial-card__mark {
  position: absolute;
  top: -0.5rem;
  left: 1.25rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 72px;
  line-height: 1;
  color: var(--color-red);
  opacity: 0.35;
  pointer-events: none;
  user-select: none;
}
.testimonial-card__quote {
  margin: 0;
  font-size: 22px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--color-black);
  font-style: italic;
}
.testimonial-card__quote::before { content: "„"; }
.testimonial-card__quote::after  { content: "“"; }
.testimonial-card__byline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-top: auto;
}
.testimonial-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-off-white);
}
.testimonial-card__person {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.3;
}
.testimonial-card__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-black);
}
.testimonial-card__role {
  font-size: 14px;
  color: var(--color-text-muted, #5a5a68);
}

/* Pagination dots: brand red when active. */
.testimonials-swiper__pagination {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}
.testimonials-swiper .swiper-pagination-bullet {
  background: var(--color-black);
  opacity: 0.25;
  width: 9px;
  height: 9px;
}
.testimonials-swiper .swiper-pagination-bullet-active {
  background: var(--color-red);
  opacity: 1;
}

/* Dark-background variant (for hero-adjacent dark sections, agentur hubs, etc.) */
.testimonials--dark .testimonial-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.20);
}
.testimonials--dark .testimonials__headline { color: var(--color-off-white); }
.testimonials--dark .testimonial-card__quote,
.testimonials--dark .testimonial-card__name {
  color: var(--color-off-white);
}
.testimonials--dark .testimonial-card__role {
  color: rgba(255, 255, 255, 0.65);
}
.testimonials--dark .swiper-pagination-bullet {
  background: var(--color-off-white);
}

@media (max-width: 640px) {
  .testimonials { padding: 3.5rem 0; }
  .testimonial-card {
    padding: 2.5rem 1.5rem 1.75rem;
    gap: 1.25rem;
  }
  .testimonial-card__quote { font-size: 19px; }
  .testimonial-card__mark  { font-size: 56px; top: -0.25rem; left: 1rem; }
}

/* ============================================================
   Client logo strip — light / bare variants
   ------------------------------------------------------------
   Rendered build-time by layouts/partials/clients.html (shortcode
   {{< clients-slider >}}). The default renders a dark logo strip.
   Passing `variant="light"` (off-white section) or `variant="bare"`
   (no <section> wrapper, just the swiper markup) swaps the logo
   plates to transparent and drops the rest-state shadow — so the
   slider can sit on a light bg or be embedded inside an existing
   wrapper without the partial's own headline.
   ============================================================ */
.clients-swiper-wrap--light .client-logo-wrap,
.clients-swiper-wrap--bare  .client-logo-wrap {
  background-color: transparent;
  box-shadow: none;
  padding: 20px 24px;
}
.clients-swiper-wrap--light .client-logo-wrap:hover,
.clients-swiper-wrap--bare  .client-logo-wrap:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}
.client-slider__heading { margin-bottom: 2rem; }

/* ============================================================
   /wissen — blog overview + detail
   ------------------------------------------------------------
   Used by layouts/wissen/list.html and layouts/wissen/single.html.
   Card grid is shared between the main feed, the "Unser
   Agenturalltag" partition, and the related-posts strip on
   detail pages (dark variant).
   ============================================================ */

.wissen-hero { padding-top: 4rem; padding-bottom: 4rem; }
.wissen-hero h1 { max-width: 12ch; }
.wissen-hero .hero-sub { max-width: 64ch; margin-top: 1.5rem; }

/* Filter pills */
.blog-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 2.5rem;
}
.filter-pill {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-black);
  background: transparent;
  border: 2px solid var(--color-black);
  border-radius: 100px;
  padding: 8px 18px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.filter-pill:hover {
  background: var(--color-black);
  color: var(--color-off-white);
}
.filter-pill.is-active {
  background: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-off-white);
}

/* Card grid */
.blog-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}
.blog-card {
  background: #fff;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(17, 16, 22, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(17, 16, 22, 0.12);
}
.blog-card.is-hidden { display: none; }

.blog-card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  width: 100%;
  height: 100%;
}
.blog-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--color-off-white);
  overflow: hidden;
}
/* Specificity bump (3 classes) so we beat page.css's
   `.content-section .width-content img { height: auto; border-radius: 10px }`
   which otherwise breaks `object-fit: cover` and leaks rounded corners
   onto the image inside the card. */
.blog-card.blog-card .blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  margin: 0;
  transition: transform 0.4s ease;
}
.blog-card:hover .blog-card-media img { transform: scale(1.04); }
.blog-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--color-red);
  color: var(--color-off-white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 10px;
}
.blog-card-body {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.5rem;
}
.blog-card-meta {
  font-size: 13px;
  color: rgba(17, 16, 22, 0.6);
  margin: 0;
  letter-spacing: 0.02em;
}
/* Specificity bump (3 classes + element) to beat page.css's
   `.content-section .width-content h3 { color: var(--color-off-white) }`. */
.wissen-list-section .blog-card .blog-card-title,
.wissen-agentur-section .blog-card .blog-card-title,
.wissen-related-section .blog-card .blog-card-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-black);
  margin: 0;
}
.wissen-related-section .blog-card--dark .blog-card-title {
  color: var(--color-off-white);
}
.blog-card-excerpt {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(17, 16, 22, 0.75);
  margin: 0.25rem 0 0;
}
.blog-card-cta {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-red);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.blog-card-cta-arrow { transition: transform 0.25s ease; }
.blog-card:hover .blog-card-cta-arrow { transform: translateX(4px); }

/* Dark variant — used by "Passende Artikel" section on detail pages */
.blog-card--dark {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: none;
}
.blog-card--dark:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
.blog-card--dark .blog-card-title { color: var(--color-off-white); }
.blog-card--dark .blog-card-meta  { color: rgba(255, 255, 255, 0.6); }
.blog-card--dark .blog-card-excerpt { color: rgba(255, 255, 255, 0.75); }

.blog-empty-state {
  text-align: center;
  font-size: 18px;
  color: rgba(17, 16, 22, 0.65);
  margin: 3rem 0 0;
}

/* Agenturalltag block: visual divider + tighter card grid for short
   list (often a single card). */
.wissen-agentur-section { padding-top: 1rem; }
.wissen-agentur-section h2 { margin-bottom: 0.5rem; }
.wissen-agentur-section .wissen-agentur-lead {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(17, 16, 22, 0.75);
  margin-bottom: 1.5rem;
  max-width: 60ch;
}
.wissen-agentur-section .blog-card-grid {
  /* fewer items expected — let cards size naturally instead of stretching */
  grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
  justify-content: start;
}

/* ----------- Detail page ----------- */
.wissen-detail-hero { padding-top: 4rem; padding-bottom: 3rem; }
.wissen-detail-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.wissen-detail-hero-text h1 {
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}
.wissen-detail-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.wissen-cat-pill {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 2px solid var(--color-red);
  border-radius: 100px;
  color: var(--color-red);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.wissen-cat-pill:hover {
  background: var(--color-red);
  color: var(--color-off-white);
}
.wissen-detail-meta {
  font-size: 14px;
  color: var(--color-off-white);
  margin: 0;
}
.wissen-detail-hero-media img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  box-shadow: 0 12px 32px rgba(17, 16, 22, 0.12);
  display: block;
}

.wissen-detail-body-section { padding-top: 1rem; }
.wissen-detail-body {
  max-width: 820px;
  margin: 0 auto;
  background: #fff;
  padding: 3rem clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 18px rgba(17, 16, 22, 0.05);
}
.wissen-detail-body .post-body :first-child { margin-top: 0; }
.wissen-detail-body .post-body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1.5rem auto;
  display: block;
}
/* Standalone logos / icons (SVG) shouldn't blow up to full container
   width — cap their display height so they sit inline as visual cues
   rather than dominating the body. */
.wissen-detail-body .post-body p > img[src$=".svg"]:only-child,
.wissen-detail-body .post-body img[src$=".svg"] {
  max-height: 90px;
  width: auto;
}
.wissen-detail-body .post-body ul,
.wissen-detail-body .post-body ol {
  font-size: 17px;
  line-height: 1.65;
  padding-left: 1.5rem;
  margin: 0 0 1.25rem;
}
.wissen-detail-body .post-body li { margin-bottom: 0.4rem; }
.wissen-detail-body .post-body p {
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 1.1rem;
}
.wissen-detail-body .post-body a:not(.aceart-button):not(.glossary-link) {
  color: var(--color-red);
  text-decoration: none;
}
.wissen-detail-body .post-body a:not(.aceart-button):not(.glossary-link):hover {
  text-decoration: underline;
}
.wissen-detail-footer {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(17, 16, 22, 0.08);
}

/* Bare back-link inside the post card. Reuses the body link colour
   (red) and only carries an arrow glyph; no aceart-button heart suffix. */
.wissen-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-red);
  text-decoration: none;
  transition: gap 0.2s ease;
}
.wissen-back-link:hover { text-decoration: underline; gap: 0.6rem; }

/* Inner-page H2/H3/H4 in the .post-body need to render bold even when
   the source markdown headings aren't wrapped in **bold**. The original
   page.css design system relied on every heading being `## **Title**`
   in markdown; for the Wissen rewrite we drop that ceremony.
   Specificity bump (3 classes + element) is required to beat the
   `.content-section .width-content h3 { color: var(--color-off-white) }`
   rule in page.css that would otherwise wash the H3s out to grey. */
.wissen-detail-body .post-body.post-body h2,
.wissen-detail-body .post-body.post-body h3:not(.vor-nach-card-title),
.wissen-detail-body .post-body.post-body h4 {
  font-weight: 700;
  color: var(--color-black);
}

.wissen-related-section h2 { margin-bottom: 1.5rem; }

/* ----------- Vorteile / Nachteile pair-card grid ----------- */
/* Used inside .post-body via the {{< vor-nach >}} shortcode. Two
   dark cards side-by-side; on mobile they stack. */
.wissen-detail-body .post-body .vor-nach-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 2rem 0 2.5rem;
}
.wissen-detail-body .post-body .vor-card,
.wissen-detail-body .post-body .nach-card {
  background: var(--color-black);
  color: var(--color-off-white);
  border-radius: 14px;
  padding: 2rem 1.75rem;
  box-shadow: 0 4px 18px rgba(17, 16, 22, 0.08);
}
.wissen-detail-body .post-body .vor-nach-card-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 1.25rem;
  padding: 0 0 0.6rem;
  border-bottom: 2px solid var(--color-red);
  position: static;
  color: var(--color-off-white);
}
/* Override the post-body H2/H3 red bar treatment for these cards;
   the cards already have their own visual frame. */
.wissen-detail-body .post-body .vor-nach-card-title::before { content: none; }
.wissen-detail-body .post-body .vor-nach-card-body p {
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 1rem;
  color: var(--color-off-white);
}
.wissen-detail-body .post-body .vor-nach-card-body p:last-child { margin-bottom: 0; }
.wissen-detail-body .post-body .vor-nach-card-body strong {
  display: block;
  color: var(--color-red);
  font-weight: 700;
  margin-bottom: 0.25rem;
  font-size: 16px;
}
.wissen-detail-body .post-body .vor-nach-card-body p strong { display: inline; margin: 0; }
.wissen-detail-body .post-body .vor-nach-card-body p:has(> strong:only-child) {
  margin-bottom: 0.25rem;
}
/* Bullet lists inside Vor/Nach cards (e.g. Stärken/Schwächen pairs).
   White text on the dark surface, modest spacing, red bullet marker. */
.wissen-detail-body .post-body .vor-nach-card-body ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}
.wissen-detail-body .post-body .vor-nach-card-body li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.6rem;
  color: var(--color-off-white);
}
.wissen-detail-body .post-body .vor-nach-card-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  background: var(--color-red);
  border-radius: 50%;
}
.wissen-detail-body .post-body .vor-nach-card-body li:last-child { margin-bottom: 0; }

/* Make the Vorteile/Nachteile-adjacent H3 (e.g. "Native App") and H4
   ("Was ist eine Native App?") render as a section header line: title
   in red small-caps + larger statement above the dark card pair. */
.wissen-detail-body .post-body h3 + h4 {
  margin-top: 0.25rem;
}

@media (max-width: 720px) {
  .wissen-detail-body .post-body .vor-nach-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .wissen-detail-body .post-body .vor-card,
  .wissen-detail-body .post-body .nach-card {
    padding: 1.5rem 1.25rem;
  }
}

/* Responsive */
@media (max-width: 980px) {
  .blog-card-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .wissen-detail-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .wissen-detail-hero-media { order: -1; }
}
@media (max-width: 640px) {
  .blog-card-grid { grid-template-columns: 1fr; }
  .blog-filter-pills { gap: 0.5rem; }
  .filter-pill { font-size: 14px; padding: 6px 14px; }

  /* FG: on smartphones the white article-body sat inside a grey
     bg-off-white section, which produced two stacked containers (grey
     band → white card with shadow/radius) and stole horizontal room.
     Make the whole section white edge-to-edge so it reads as a single
     full-width white column with no visible grey gutters around it. */
  .wissen-detail-body-section {
    background-color: var(--color-white) !important;
    padding: 32px 0;
  }
  .wissen-detail-body-section > .width-content {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .wissen-detail-body {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0 18px;
  }
}

/* Mobile + tablet-portrait sizing/position for the rotating
   aceart-hero-pik-rotating.webp circle. Single source of truth for `.hero-image`
   at the column-flex breakpoint — three earlier duplicate blocks
   in this file were pruned in favour of this one.
   Why these values: the relaunch.aceart-programming.de reference
   anchors the circle right-edge-aligned with the "Schreib uns!"
   button. The desktop `margin-right: 8rem` rule still inherits
   here unless reset, which would shove the absolutely-positioned
   box 128px further left and park it mid-whitespace — hence the
   explicit `margin: 0`. Breakpoint matches `.hero`'s row→column
   flex flip so iPad Air portrait (820) inherits the tight
   geometry; iPad landscape (≥1024) keeps the side-by-side
   desktop layout untouched. */
@media (max-width: 980px) {
  .hero-image {
    margin: 0 !important;
    width: 130px !important;
    height: 130px !important;
    bottom: 28px !important;
    right: 20px !important;
    position: absolute !important;
    z-index: 10;
  }
  .hero-image img,
  .hero-image svg,
  .hero-img,
  .turnjoke,
  .loop-img {
    width: 130px !important;
    height: 130px !important;
    max-width: 130px !important;
    max-height: 130px !important;
  }
}