/* Fallstudie ahead als eigene Seite (27.10.2026). Eigene Welt: hell und violett wie aheadintranet.com,
   runde Karten wie in einer App, Kapitelfarben wie die Bereiche der Website von ahead.
   Grundzustand ohne JavaScript oder mit «weniger Bewegung»: Vorher und Nachher stehen nebeneinander, alles ruhig.
   Bühne, Wortlicht und Auftritte schaltet ahead-fall.js über .ah-an ein. */

.ah {
  --ah-blau: #3b5bdb;
  --ah-violett: #7b5cf0;
  --ah-nacht: #141a4a;
  --ah-tinte: #11163b;
  --ah-text: #474d6e;
  --ah-leise: #5d6383;
  --ah-grund: #f5f4ff;
  --ah-linie: rgba(59, 91, 219, .14);
  --ah-pad: var(--container-pad, 2.5rem);
  background: #fff;
  color: var(--ah-tinte);
  font-family: var(--font-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
.ah *, .ah *::before, .ah *::after { box-sizing: border-box; }
.ah ::selection { background: var(--ah-blau); color: #fff; }
.ah-wrap { max-width: var(--container-max, 84rem); margin: 0 auto; padding: 0 var(--ah-pad); }
.ah a { color: inherit; }
.ah a:focus-visible, .ah button:focus-visible, .ah [tabindex]:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ah-blau); border-radius: 10px; }
.ah h1, .ah h2, .ah h3 { font-family: var(--font-display); color: var(--ah-tinte); margin: 0; letter-spacing: -.03em; }
.ah h2 { font-size: clamp(2rem, 4.6vw, 4rem); line-height: 1.05; font-weight: 700; max-width: 18ch; }
.ah h2 em, .ah h1 em { font-style: normal; background: linear-gradient(90deg, var(--ah-blau), var(--ah-violett) 60%, #e0559d); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: .04em .12em .1em; margin: -.04em -.12em -.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ah p { margin: 0; }
.ah .dt-ico { display: block; }
.ah .dt-ico svg { display: block; width: 44px; height: 44px; }
.ah-kapitel { display: inline-block; margin-bottom: 1.1rem; padding: .4rem .75rem; border-radius: 999px; background: var(--ah-grund); font: 600 .76rem/1 var(--font-display); letter-spacing: .06em; color: var(--ah-blau); }
.ah-text { max-width: 44rem; margin-top: 1.3rem !important; font-size: clamp(1.02rem, 1.3vw, 1.14rem); line-height: 1.6; color: var(--ah-text); text-wrap: pretty; }
.ah-text + .ah-text { margin-top: 1rem !important; }
.ah-quelle { margin-top: 1.6rem !important; font-size: .82rem; line-height: 1.5; color: var(--ah-leise); max-width: 62rem; }

.ah-aktionen { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.ah-knopf { display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: .85rem 1.45rem; border-radius: 999px;
  font: 600 1rem/1 var(--font-display); text-decoration: none !important; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.ah-knopf svg { width: 16px; height: 16px; }
.ah-knopf--voll { background: var(--ah-blau); color: #fff !important; box-shadow: 0 12px 30px -12px rgba(59, 91, 219, .7); }
.ah-knopf--voll:hover { transform: translateY(-1px); background: #2f4cc4; }
.ah-knopf--voll:focus-visible { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--ah-blau) !important; }
.ah-knopf--rand { color: var(--ah-tinte) !important; background: #fff; box-shadow: inset 0 0 0 1px var(--ah-linie); }
.ah-knopf--rand:hover { box-shadow: inset 0 0 0 1px var(--ah-blau); }

/* 1 Hero: der violette Schein der Website von ahead */
.ah-held { position: relative; padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; isolation: isolate;
  background: radial-gradient(45% 55% at 85% 20%, rgba(123, 92, 240, .28), transparent 70%), radial-gradient(40% 50% at 70% 85%, rgba(224, 85, 157, .16), transparent 70%), linear-gradient(180deg, #f3f2ff, #fff 85%); }
.ah-held__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 2rem 3.5rem; align-items: center; }
.ah-held__text { min-width: 0; }
.ah-pfad { display: flex; gap: .5rem; font-size: .85rem; color: var(--ah-leise); margin-bottom: 1.6rem; }
.ah-pfad a { text-decoration: none; }
.ah-pfad a:hover { color: var(--ah-blau); }
.ah-marke { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: 1.4rem !important; }
.ah-marke img { display: block; height: 26px; width: auto; }
.ah-marke span { padding: .35rem .7rem; border-radius: 999px; background: rgba(59, 91, 219, .1); font: 600 .78rem/1 var(--font-display); color: var(--ah-blau); }
.ah .ah-held__titel { font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 1.02; font-weight: 700; letter-spacing: -.045em; max-width: 13ch; }
.ah .ah-held__titel em { display: inline; }
.ah-held__lead { max-width: 36rem; margin-top: 1.4rem !important; font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.6; color: var(--ah-text); text-wrap: pretty; }
.ah-held__bild { position: relative; min-width: 0; padding: 1.5rem 0 3rem 0; }
.ah-held__desktop { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 0 0 1px var(--ah-linie), 0 40px 80px -40px rgba(20, 26, 74, .45); }
.ah-held__telefon { position: absolute; right: -2%; bottom: 0; width: 28%; max-width: 12rem; height: auto; border-radius: 24px; border: 6px solid #11163b; background: #11163b; box-shadow: 0 30px 60px -24px rgba(20, 26, 74, .55); }
.ah-chip { position: absolute; padding: .5rem .85rem; border-radius: 999px; background: #fff; box-shadow: 0 10px 30px -12px rgba(20, 26, 74, .35), inset 0 0 0 1px var(--ah-linie);
  font: 700 .85rem/1 var(--font-display); color: var(--ah-tinte); white-space: nowrap; }
.ah-chip--1 { left: -4%; top: 12%; }
.ah-chip--2 { left: 8%; bottom: 8%; color: var(--ah-violett); }
.ah-chip--3 { right: 24%; top: 0; color: #fff; background: var(--ah-blau); box-shadow: 0 10px 30px -10px rgba(59, 91, 219, .7); }
.ah-zahlen { list-style: none; margin-top: clamp(2.5rem, 5vw, 4rem) !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.ah-zahlen li { min-width: 0; padding: 1.3rem; border-radius: 20px; background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px var(--ah-linie); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ah-zahlen b { display: block; font: 700 clamp(1.9rem, 3.4vw, 2.9rem)/1 var(--font-display); letter-spacing: -.04em; color: var(--ah-blau); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ah-zahlen span { display: block; margin-top: .55rem; font-size: .9rem; line-height: 1.45; color: var(--ah-text); }

/* 2 Wie es anfing */
.ah-anfang { padding: clamp(5rem, 12vw, 10rem) 0 clamp(4rem, 8vw, 6rem); }
.ah-datum { font: 600 .9rem/1 var(--font-display); color: var(--ah-violett); letter-spacing: .06em; margin-bottom: 1.6rem !important; }
.ah-woerter { font: 600 clamp(1.6rem, 3.8vw, 3.4rem)/1.15 var(--font-display); letter-spacing: -.03em; max-width: 26ch; }
.ah-an .ah-woerter .ah-w { color: #d4d2ec; transition: color .25s linear; }
.ah-an .ah-woerter .ah-w.is-hell { color: var(--ah-tinte); }

/* Kapitelleiste */
.ah-leiste { position: fixed; left: 50%; top: calc(var(--nav-h, 74px) + .7rem); z-index: 40; display: flex; gap: .15rem; padding: .3rem; border-radius: 999px;
  max-width: calc(100vw - 1.5rem); overflow-x: auto; scrollbar-width: none; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 0 0 1px var(--ah-linie), 0 12px 30px -16px rgba(20, 26, 74, .35); transform: translate(-50%, -140%); opacity: 0; pointer-events: none; transition: transform .45s cubic-bezier(.2, .7, .1, 1), opacity .3s ease; }
.ah-leiste::-webkit-scrollbar { display: none; }
.ah-leiste.is-an { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.ah-leiste a { flex: 0 0 auto; padding: .55rem .95rem; border-radius: 999px; font: 600 .86rem/1 var(--font-display); color: var(--ah-leise) !important; text-decoration: none; }
.ah-leiste a:hover { color: var(--ah-blau) !important; }
.ah-leiste a.is-hier { background: var(--ah-blau); color: #fff !important; }
@media (max-width: 900px) { .ah-leiste { top: calc(var(--nav-h, 64px) + .5rem); } .ah-leiste a { padding: .5rem .75rem; font-size: .8rem; } }

/* 3 Fünf Schritte, je in der Farbe ihres Kapitels */
.ah-ueber { padding: 0 0 clamp(4rem, 8vw, 6rem); }
.ah-ueber__liste { list-style: none; margin: 2.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; }
.ah-ueber__liste li { min-width: 0; }
.ah-ueber__liste a { position: relative; display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1.4rem 1.3rem; border-radius: 22px; text-decoration: none; overflow: hidden;
  background: #fff; box-shadow: inset 0 0 0 1px var(--ah-linie); transition: transform .25s ease, box-shadow .25s ease; }
.ah-ueber__liste a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--t); }
.ah-ueber__liste a:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--t), 0 20px 40px -24px rgba(20, 26, 74, .4); }
.ah-ueber__liste .dt-ico { margin-bottom: .3rem; }
.ah-ueber__liste b { font: 700 1.3rem/1.15 var(--font-display); color: var(--ah-tinte); }
.ah-ueber__liste span:not(.dt-ico) { font-size: .92rem; line-height: 1.5; color: var(--ah-text); flex: 1; }
.ah-ueber__liste i { font-style: normal; font: 600 .78rem/1 var(--font-display); color: var(--t); }

/* Titelkarten */
.ah-titel { padding: clamp(5.5rem, 12vw, 10rem) 0 clamp(1rem, 3vw, 2rem); scroll-margin-top: calc(var(--nav-h, 74px) + 3.5rem); }
.ah-titel__nr { display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; height: 3rem; padding: 0 .8rem; border-radius: 16px; margin-bottom: 1.2rem;
  background: var(--t, var(--ah-blau)); color: #fff; font: 700 1rem/1 var(--font-display); }
.ah .ah-titel__wort { font: 800 clamp(3.4rem, 12vw, 10.5rem)/.9 var(--font-display); letter-spacing: -.06em; color: var(--ah-tinte); padding: .04em .1em .08em; margin: -.04em -.1em -.08em; }
.ah-titel__wort::after { content: ""; display: inline-block; width: .16em; height: .16em; margin-left: .04em; border-radius: 50%; background: var(--t); vertical-align: baseline; }
.ah-titel__zeile { margin-top: 1.3rem !important; max-width: 32ch; font: 600 clamp(1.2rem, 2.2vw, 1.8rem)/1.25 var(--font-display); letter-spacing: -.02em; color: var(--ah-leise); }
.ah-titel__link { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.5rem; color: var(--ah-blau) !important; text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(59, 91, 219, .35); padding-bottom: 3px; }
.ah-titel__link svg { width: 15px; height: 15px; }
.ah-titel + section { padding-top: clamp(2.5rem, 5vw, 4rem); }
.ah-titel__wort { position: relative; }
.ah-titel__wort::after { display: none; }

/* Gemeinsame Bausteine */
.ah-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.ah-bild { margin: 0; min-width: 0; }
.ah-bild img { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: 0 0 0 1px var(--ah-linie), 0 30px 60px -36px rgba(20, 26, 74, .45); }
.ah-bild figcaption { margin-top: .7rem; font-size: .85rem; color: var(--ah-leise); }
.ah-karten { list-style: none; margin: 2.8rem auto 0; padding-top: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
ul.ah-karten { padding: 0; }
.ah-karten--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.ah-karten > * { min-width: 0; padding: 1.4rem; border-radius: 22px; background: var(--ah-grund); }
.ah-karten b { display: block; font: 700 clamp(1.9rem, 3.4vw, 2.8rem)/1 var(--font-display); letter-spacing: -.04em; color: var(--ah-blau); white-space: nowrap; }
.ah-karten span { display: block; margin-top: .55rem; font-size: .92rem; line-height: 1.45; color: var(--ah-text); }
.ah-analyse, .ah-design, .ah-hubspot, .ah-uebergabe { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* Design: Band zum seitlichen Blättern */
.ah-band { margin-top: 2.6rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--ah-pad); padding-bottom: 1rem; scrollbar-width: thin; }
.ah-band ol { list-style: none; margin: 0; padding: 0 var(--ah-pad); display: flex; gap: 1.2rem; width: max-content; }
.ah-band li { scroll-snap-align: start; flex: 0 0 auto; width: min(86vw, 46rem); }
.ah-band img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 0 0 1px var(--ah-linie); }
.ah-band span { display: block; margin-top: .7rem; font-size: .9rem; color: var(--ah-leise); }

/* HubSpot: die Datenbanken als Tafel */
.ah-hubdb { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1rem; margin-top: 2.8rem; }
.ah-hubdb__tafel { padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 24px; background: var(--ah-nacht); color: #fff; }
.ah-hubdb__tafel b { font: 700 1.1rem/1 var(--font-display); color: #b9c4ff; letter-spacing: .04em; }
.ah-hubdb__tafel ul { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .6rem; }
.ah-hubdb__tafel li { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border-radius: 14px; background: rgba(255, 255, 255, .07); font: 600 1.1rem/1.2 var(--font-display); }
.ah-hubdb__tafel li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(135deg, var(--ah-blau), var(--ah-violett)); flex: 0 0 auto; }
.ah-hubdb__mehr { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ah-hubdb__mehr li { padding: 1.3rem 1.4rem; border-radius: 22px; background: var(--ah-grund); }
.ah-hubdb__mehr b { display: block; font: 700 1.8rem/1 var(--font-display); color: var(--ah-tinte); letter-spacing: -.03em; }
.ah-hubdb__mehr span { display: block; margin-top: .45rem; line-height: 1.5; color: var(--ah-text); }

/* 04 Der Umzug: Grundzustand nebeneinander */
.ah-umzug { position: relative; padding: clamp(5rem, 10vw, 8rem) 0 clamp(2rem, 4vw, 3rem); background: linear-gradient(180deg, #fff, var(--ah-grund)); scroll-margin-top: var(--nav-h, 74px); }
.ah-umzug__kopf .ah-titel__nr { --t: #f08a3e; }
.ah-umzug__buehne { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; max-width: var(--container-max, 84rem); margin: 2.6rem auto 0; padding: 0 var(--ah-pad); }
.ah-umzug__seite { margin: 0; min-width: 0; }
.ah-umzug__seite img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 0 0 1px var(--ah-linie), 0 40px 80px -40px rgba(20, 26, 74, .5); }
.ah-umzug__seite figcaption { margin-top: .7rem; font: 600 .85rem/1.3 var(--font-display); color: var(--ah-leise); }
.ah-umzug__linie { display: none; }
.ah-umzug__datum { margin-top: 1.8rem !important; font: 600 clamp(1.05rem, 1.6vw, 1.3rem)/1.4 var(--font-display); color: var(--ah-tinte); }
.ah-umzug__quelle { margin-top: .6rem !important; font-size: .82rem; color: var(--ah-leise); }
.ah-umzug-text { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3rem, 6vw, 5rem); background: var(--ah-grund); }
.ah-umzug-text .ah-karten > * { background: #fff; box-shadow: inset 0 0 0 1px var(--ah-linie); }

/* Mit Bewegung: die Bühne klebt, eine Linie wischt von Webflow zu HubSpot */
.ah-an .ah-umzug { height: 300vh; padding: 0; }
.ah-an .ah-umzug__klebt { position: sticky; top: var(--nav-h, 74px); height: calc(100svh - var(--nav-h, 74px)); display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; overflow: hidden; }
.ah-an .ah-umzug__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; }
.ah-an .ah-umzug__kopf .ah-titel__nr { margin: 0; }
.ah-an .ah-umzug__kopf h2 { font-size: clamp(1.6rem, 3.4vw, 3rem); max-width: none; }
.ah-an .ah-umzug__buehne { display: block; width: min(calc(100% - 2 * var(--ah-pad)), 70rem, calc((100svh - var(--nav-h, 74px) - 13rem) * 1.6)); margin: 0 auto; padding: 0; aspect-ratio: 16 / 10; }
.ah-an .ah-umzug__seite { position: absolute; inset: 0; }
.ah-an .ah-umzug__seite img { height: 100%; object-fit: cover; object-position: top; }
.ah-an .ah-umzug__seite figcaption { position: absolute; top: 1rem; margin: 0; padding: .45rem .8rem; border-radius: 999px; background: rgba(17, 22, 59, .86); color: #fff; }
.ah-an .ah-umzug__seite--vorher figcaption { left: 1rem; }
.ah-an .ah-umzug__seite--nachher figcaption { right: 1rem; }
.ah-an .ah-umzug__seite--nachher { clip-path: inset(0 0 0 calc((1 - var(--w, 0)) * 100%) round 18px); }
.ah-an .ah-umzug__linie { display: block; position: absolute; top: -1rem; bottom: -1rem; left: calc((1 - var(--w, 0)) * 100%); width: 4px; margin-left: -2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--ah-blau), var(--ah-violett), #e0559d); box-shadow: 0 0 24px rgba(123, 92, 240, .6); opacity: calc(min(var(--w, 0), 1 - var(--w, 0)) * 8); }
.ah-an .ah-umzug__datum { margin-top: 0 !important; opacity: var(--d, 0); transform: translateY(calc((1 - var(--d, 0)) * .8rem)); }
.ah-an .ah-umzug__quelle { margin-top: 0 !important; }
@media (max-width: 900px) {
  .ah-an .ah-umzug { height: 260vh; }
  .ah-an .ah-umzug__buehne { width: calc(100% - 2 * var(--ah-pad)); }
}

/* Übergabe: Lighthouse */
.ah-lh { margin: 0; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 26px; background: var(--ah-nacht); color: #fff; }
.ah-lh figcaption { font: 600 .9rem/1.4 var(--font-display); color: #b9c4ff; }
.ah-lh ul { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ah-lh li { display: grid; justify-items: center; gap: .6rem; padding: 1.2rem .8rem; border-radius: 18px; background: rgba(255, 255, 255, .06); text-align: center; }
.ah-lh b { display: grid; place-items: center; width: 5.2rem; height: 5.2rem; border-radius: 50%; font: 700 1.7rem/1 var(--font-display); color: #4ade80;
  background: radial-gradient(closest-side, var(--ah-nacht) 82%, transparent 84%), conic-gradient(#4ade80 calc(var(--r, 1) * 100%), rgba(255, 255, 255, .1) 0); }
.ah-an .ah-lh b { --r: 0; transition: --r 1.4s ease; }
.ah-an .ah-lh.is-da b { --r: 1; }
.ah-lh span { font-size: .9rem; color: rgba(255, 255, 255, .8); }
@property --r { syntax: "<number>"; inherits: true; initial-value: 1; }

/* Mensch */
.ah-mensch { padding: clamp(3rem, 6vw, 5rem) 0; }
.ah-mensch__raster { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 2rem; align-items: center; max-width: 60rem; }
.ah-mensch img { display: block; width: 100%; height: auto; border-radius: 50%; box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--ah-linie); }
.ah-mensch__text { font: 600 clamp(1.2rem, 2vw, 1.6rem)/1.35 var(--font-display); letter-spacing: -.02em; color: var(--ah-tinte); }
.ah-mensch__name { margin-top: 1rem !important; }
.ah-mensch__name b { display: block; font-weight: 700; }
.ah-mensch__name span { color: var(--ah-leise); font-size: .95rem; }

/* Zeitleiste */
.ah-zeit { padding: clamp(5rem, 10vw, 8rem) 0; background: var(--ah-grund); scroll-margin-top: calc(var(--nav-h, 74px) + 3.5rem); }
.ah-zeit__liste { position: relative; list-style: none; margin: 3rem 0 0; padding: 0 0 0 2rem; max-width: 52rem; }
.ah-zeit__liste::before { content: ""; position: absolute; left: 6px; top: .4rem; bottom: .4rem; width: 2px; background: linear-gradient(180deg, var(--ah-blau), var(--ah-violett), #e0559d); border-radius: 1px; }
.ah-zeit__liste li { position: relative; display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; padding: 0 0 1.6rem; }
.ah-zeit__liste li::before { content: ""; position: absolute; left: -2rem; top: .3rem; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--ah-blau); }
.ah-zeit__liste time { font: 600 1rem/1.4 var(--font-display); color: var(--ah-tinte); }
.ah-zeit__liste p { line-height: 1.5; color: var(--ah-text); }

/* Schluss: an Softwarefirmen */
.ah-schluss { padding: clamp(4rem, 8vw, 6rem) 0; }
.ah-schluss__karte { padding-top: clamp(2.4rem, 6vw, 5rem) !important; padding-bottom: clamp(2.4rem, 6vw, 5rem) !important; border-radius: clamp(22px, 2.4vw, 36px); max-width: calc(var(--container-max, 84rem) - 2 * var(--ah-pad));
  background: radial-gradient(50% 70% at 90% 10%, rgba(224, 85, 157, .35), transparent 70%), radial-gradient(60% 80% at 10% 90%, rgba(123, 92, 240, .45), transparent 70%), var(--ah-nacht); color: #fff; }
.ah-schluss__karte .ah-kapitel { background: rgba(255, 255, 255, .12); color: #fff; }
.ah .ah-schluss__karte h2 { color: #fff; max-width: 20ch; }
.ah .ah-schluss__karte h2 em { display: block; background: linear-gradient(90deg, #b9c4ff, #f3a6d0); -webkit-background-clip: text; background-clip: text; }
.ah-schluss__karte > p { max-width: 44rem; margin-top: 1.4rem !important; font-size: 1.08rem; line-height: 1.6; color: rgba(255, 255, 255, .84); }
.ah-schluss__karte .ah-knopf--rand { background: transparent; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.ah-schluss__akquire { margin-top: 1.8rem !important; font-size: .95rem; }
.ah-schluss__akquire a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .5); }

/* Auftritte */
.ah-an .ah-auf { opacity: 0; transform: translateY(2rem); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .7, .1, 1); }
.ah-an .ah-auf.is-da { opacity: 1; transform: none; }
.ah-an .ah-chip { animation: ah-schweben 6s ease-in-out infinite; }
.ah-an .ah-chip--2 { animation-delay: -2s; }
.ah-an .ah-chip--3 { animation-delay: -4s; }
@keyframes ah-schweben { 50% { transform: translateY(-8px); } }

@media (max-width: 1100px) {
  .ah-ueber__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ah-zahlen, .ah-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ah-held__raster, .ah-zwei, .ah-hubdb { grid-template-columns: minmax(0, 1fr); }
  .ah-held__bild { padding-bottom: 2.5rem; }
  .ah-chip--1 { left: 0; }
  .ah-karten--drei { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ah-ueber__liste, .ah-zahlen, .ah-karten { grid-template-columns: minmax(0, 1fr); }
  .ah-umzug__buehne { grid-template-columns: minmax(0, 1fr); }
  .ah-zeit__liste li { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .ah-mensch__raster { grid-template-columns: 6rem minmax(0, 1fr); gap: 1.2rem; }
  .ah-mensch__text { font-size: 1.05rem; }
  .ah-chip { font-size: .75rem; padding: .4rem .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ah *, .ah *::before, .ah *::after { animation: none !important; transition: none !important; }
}

/* Keine Trennstriche in grossen Zeilen (auf 390 wurde «Auftrag» getrennt, 27.10.2026) */
.ah-woerter, .ah h1, .ah h2, .ah .ah-titel__wort { hyphens: none; -webkit-hyphens: none; }

/* Zweite Fassung (27.10.2026): sechs Schritte, die Leinwand mit drei ganzen Seiten aus Figma,
   Tafeln mit Styleguide, Bausteinen und Telefon, Standbilder der Animationen, das Wochenende vor dem Start */
.ah-ueber__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ah-ueber__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ah-ueber__liste { grid-template-columns: minmax(0, 1fr); } }

/* Leinwand: ohne Bewegung drei Bahnen nebeneinander, jede mit einem Fenster, das man scrollen kann */
.ah-leinwand { position: relative; padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
  background: radial-gradient(40% 60% at 15% 30%, rgba(123, 92, 240, .18), transparent 70%), radial-gradient(40% 60% at 85% 70%, rgba(59, 91, 219, .16), transparent 70%), #f4f3ff; }
.ah-leinwand__kopf h2 { margin-bottom: 2rem; }
.ah-leinwand__bahnen { max-width: var(--container-max, 84rem); margin: 0 auto; padding: 0 var(--ah-pad); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.ah-bahn { margin: 0; min-width: 0; }
.ah-bahn figcaption { margin-bottom: .6rem; font: 600 .8rem/1 var(--font-display); color: var(--ah-leise); }
.ah-bahn__fenster { height: 34rem; overflow-y: auto; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--ah-linie), 0 30px 60px -30px rgba(20, 26, 74, .45); scrollbar-width: thin; }
.ah-bahn__fenster img { display: block; width: 100%; height: auto; }
.ah-an .ah-leinwand { height: 360vh; padding: 0; }
.ah-an .ah-leinwand__klebt { position: sticky; top: var(--nav-h, 74px); height: calc(100svh - var(--nav-h, 74px)); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.ah-an .ah-leinwand__kopf h2 { margin-bottom: 1.4rem; font-size: clamp(1.8rem, 3.6vw, 3.2rem); }
.ah-an .ah-bahn__fenster { height: calc(100svh - var(--nav-h, 74px) - 14rem); min-height: 16rem; overflow: hidden; }
.ah-an .ah-bahn__fenster img { transform: translateY(calc(var(--s, 0) * -1px)); will-change: transform; }
.ah-an .ah-bahn--2 { transform: translateY(2.5rem); }
@media (max-width: 900px) {
  .ah-leinwand__bahnen { grid-template-columns: repeat(3, minmax(9rem, 1fr)); overflow-x: auto; }
  .ah-an .ah-leinwand__bahnen { overflow: visible; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
  .ah-an .ah-bahn--2 { transform: translateY(1.2rem); }
  .ah-an .ah-bahn__fenster { border-radius: 10px; }
}

.ah-tafeln { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; margin-top: 2.4rem; align-items: start; }
.ah-tafeln__breit { grid-column: 1 / -1; }
@media (max-width: 900px) { .ah-tafeln { grid-template-columns: minmax(0, 1fr); } }

.ah-lotties { list-style: none; margin: 2.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.ah-lotties li { min-width: 0; display: grid; gap: .6rem; align-content: start; padding: 1rem; border-radius: 22px; background: linear-gradient(180deg, #f4f3ff, #fff); box-shadow: inset 0 0 0 1px var(--ah-linie); }
.ah-lotties img { display: block; width: 100%; height: 12rem; object-fit: contain; }
.ah-lotties span { font: 600 .9rem/1.3 var(--font-display); color: var(--ah-tinte); text-align: center; }
.ah-an .ah-lotties img { animation: ah-schweben 6s ease-in-out infinite; }
.ah-an .ah-lotties li:nth-child(2) img { animation-delay: -1.5s; }
.ah-an .ah-lotties li:nth-child(3) img { animation-delay: -3s; }
.ah-an .ah-lotties li:nth-child(4) img { animation-delay: -4.5s; }
@media (max-width: 1100px) { .ah-lotties { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ah-bewegung { padding-bottom: clamp(3rem, 6vw, 5rem); }

.ah-start { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.ah-start h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.15; letter-spacing: -.03em; margin-bottom: 1rem; }
.ah-start p { line-height: 1.6; color: var(--ah-text); font-size: 1.05rem; }
.ah-start ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.ah-start li { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.2rem; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--ah-linie); line-height: 1.45; color: var(--ah-tinte); }
.ah-start li::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; margin-top: .1rem; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #fff 28%, transparent 30%), linear-gradient(135deg, var(--ah-blau), var(--ah-violett)); }
@media (max-width: 900px) { .ah-start { grid-template-columns: minmax(0, 1fr); } }
.ah-tafeln .ah-bild:not(.ah-tafeln__breit) img { background: #fff; }
.ah-tafeln { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); }
@media (max-width: 900px) { .ah-tafeln { grid-template-columns: minmax(0, 1fr); } }
.ah-telefone { margin: 0; }
.ah-telefone ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.6rem); }
.ah-telefone li { min-width: 0; padding: 7px; border-radius: 30px; background: #11163b; box-shadow: 0 30px 60px -30px rgba(20, 26, 74, .6); }
.ah-telefone li:nth-child(even) { transform: translateY(1.6rem); }
.ah-telefone img { display: block; width: 100%; height: auto; border-radius: 24px; }
.ah-telefone figcaption { margin-top: 2.4rem; font-size: .85rem; color: var(--ah-leise); }
@media (max-width: 700px) { .ah-telefone ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Daumenkino: das Storyboard der Startseiten-Animation aus Figma (27.10.2026, Daniel: "yes we designed it").
   Ohne Bewegung sechs Bilder im Raster, mit Bewegung klebt die Bühne und das Scrollen blättert. */
.ah-daumen { margin-top: 2.6rem; }
.ah-daumen__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ah-daumen__bild { margin: 0; }
.ah-daumen__bild img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 0 0 1px var(--ah-linie), 0 30px 60px -36px rgba(20, 26, 74, .45); }
.ah-daumen__unter { display: none; }
@media (max-width: 700px) { .ah-daumen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ah-an .ah-daumen { height: 260vh; }
.ah-an .ah-daumen__klebt { position: sticky; top: var(--nav-h, 74px); height: calc(100svh - var(--nav-h, 74px)); display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; }
.ah-an .ah-daumen__liste { display: block; position: relative; width: min(100%, 62rem, calc((100svh - var(--nav-h, 74px) - 8rem) * 1.77)); margin: 0 auto; aspect-ratio: 1400 / 788; }
.ah-an .ah-daumen__bild { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.ah-an .ah-daumen__bild.is-an { opacity: 1; }
.ah-an .ah-daumen__unter { display: block; text-align: center; font: 600 clamp(1.1rem, 2vw, 1.5rem)/1.2 var(--font-display); color: var(--ah-leise); }
.ah-an .ah-daumen__unter b { color: var(--ah-blau); font-variant-numeric: tabular-nums; }

/* Zitat zur Idee mit dem Banner */
.ah-zitat { margin: 2.4rem 0 0; padding: 1.6rem 1.8rem; border-radius: 22px; background: var(--ah-nacht); color: #fff; max-width: 44rem; }
.ah-zitat blockquote { margin: 0; }
.ah-zitat p { font: 700 clamp(1.4rem, 2.6vw, 2rem)/1.2 var(--font-display); letter-spacing: -.02em; }
.ah-zitat figcaption { margin-top: .7rem; font-size: .9rem; color: #b9c4ff; }
blockquote.ah-mensch__text { margin: 0; }
/* Kontrast der Kapitelziffern auf hellen Farben (27.10.2026): dunkle Ziffer statt weisser */
.ah-titel[style*="#14b8a6"] .ah-titel__nr, .ah-titel[style*="#e0559d"] .ah-titel__nr, .ah-umzug__kopf .ah-titel__nr { color: #12163a; }
/* Kapitelleiste auf dem Telefon: weiche Kanten zeigen, dass sie seitlich weitergeht (27.10.2026) */
@media (max-width: 700px) {
  .ah-leiste { -webkit-mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1.6rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1.6rem), transparent); }
}

/* Öffner (28.10.2026, Daniel: «wie eine Apple-Produktseite»): der Titel, darunter gross unser Entwurf der
   Startseite aus Figma. Er füllt den Rest des Bildschirms und rückt beim Scrollen ganz heran. */
.ah-oeffner { position: relative; overflow: hidden; isolation: isolate; min-height: calc(100svh - var(--nav-h, 74px)); padding: clamp(1.6rem, 4svh, 3rem) 0 0; text-align: center;
  background: radial-gradient(50% 40% at 80% 10%, rgba(123, 92, 240, .3), transparent 70%), radial-gradient(40% 40% at 15% 30%, rgba(59, 91, 219, .16), transparent 70%), linear-gradient(180deg, #f3f2ff, #fff 70%); }
.ah-oeffner__text { display: grid; justify-items: center; }
.ah-oeffner .ah-pfad { justify-content: center; margin-bottom: 1.2rem; }
.ah-oeffner .ah-marke { justify-content: center; }
.ah .ah-oeffner .ah-held__titel { max-width: 18ch; font-size: clamp(2.1rem, min(5.6vw, 8svh), 5.4rem); text-wrap: balance; }
.ah-oeffner__bild { position: relative; margin: clamp(1.6rem, 4svh, 3rem) auto 0; width: min(94vw, 88rem); }
.ah-oeffner__bild img { display: block; width: 100%; height: auto; border-radius: clamp(12px, 1.6vw, 24px); background: #fff;
  box-shadow: 0 0 0 1px var(--ah-linie), 0 60px 120px -50px rgba(20, 26, 74, .55); }
.ah-oeffner__bild figcaption { margin: .9rem 0 clamp(2rem, 5vw, 3.5rem); font-size: .85rem; color: var(--ah-leise); }
.ah-held { padding-top: clamp(2.5rem, 5vw, 4rem); background: #fff; }
.ah-held .ah-held__lead { margin-top: 0 !important; max-width: 50rem; font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
.ah-an .ah-oeffner__bild { transform: translateY(calc(var(--o, 0) * -2rem)) scale(calc(.94 + var(--o, 0) * .06)); transform-origin: 50% 0; will-change: transform; }
.ah-an .ah-oeffner__text { opacity: calc(1 - var(--o, 0) * 1.6); }
@media (max-width: 700px) {
  .ah-oeffner__bild { width: calc(100% - 2.5rem); }
  .ah-oeffner__bild img { aspect-ratio: 1480 / 1200; object-fit: cover; }
}

/* Je Kapitel eine Zeile, was es Firmen wie dieser bringt (28.10.2026, Daniel) */
.ah-titel__nutzen { margin-top: 1.5rem !important; max-width: 42rem; font-size: clamp(1.02rem, 1.35vw, 1.2rem); line-height: 1.55; color: var(--ah-tinte); text-wrap: pretty; }
.ah-titel__nutzen b { display: inline-block; margin-right: .65rem; padding: .38rem .62rem .34rem; border-radius: 999px; background: var(--ah-grund); color: var(--ah-blau); font: 700 .7rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; vertical-align: .18em; }
.ah-umzug__nutzen { margin: .9rem auto 0 !important; text-align: center; }
/* Gegenprobe Grok (28.10.2026): im Öffner endet der Verlauf im Violett, kein helles Pink auf Flieder */
.ah .ah-oeffner .ah-held__titel em { background-image: linear-gradient(90deg, var(--ah-blau), var(--ah-violett)); }
@media (max-width: 700px) { .ah-oeffner { min-height: 0; } }