/* ==================================================
   Sections – one block per file in /sections
================================================== */

/* ---------- hero ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  min-height: 50vh;
  padding: 1em;
}
.hero--full {
  min-height: 100vh;
  padding: 200px var(--ag-sp-50) 100px;
}
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .73) 42%, rgba(0, 0, 0, 0) 100%);
  opacity: .5;
}
.hero--full .hero__overlay {
  background: linear-gradient(0deg, rgba(0, 0, 0, .99) 0%, rgba(245, 240, 240, 0) 88%, rgba(0, 0, 0, 0) 100%);
  opacity: .7;
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
}
.hero__title {
  font-family: var(--ag-script);
  font-size: clamp(2.629rem, 2.629rem + ((1vw - .2rem) * 3.719), 5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
  margin: 0;
}
.hero--full .hero__title { line-height: 1.12; padding-top: 0; }
.hero__subtitle {
  font-weight: 700;
  margin: var(--ag-gap) 0 var(--ag-sp-60);
}

/* Wooden sign button (Karriere) */
.sign-button {
  display: flex;
  justify-content: center;
  margin-top: 35px;
}
.sign-button a {
  display: inline-block;
  line-height: 0;
  animation: sign-float 3s ease-in-out infinite;
  transition: transform .35s ease, filter .35s ease;
}
.sign-button img {
  display: block;
  width: clamp(240px, 22vw, 330px);
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .3)) drop-shadow(0 20px 32px rgba(0, 0, 0, .24));
  transition: filter .35s ease;
}
.sign-button a:hover, .sign-button a:focus-visible {
  animation-play-state: paused;
  transform: translateY(-10px) scale(1.1) rotate(-1deg);
}
.sign-button a:hover img, .sign-button a:focus-visible img {
  filter: brightness(1.08) saturate(1.12) drop-shadow(0 16px 18px rgba(0, 0, 0, .38)) drop-shadow(0 30px 42px rgba(0, 0, 0, .3));
}
.sign-button a:focus-visible { outline: 3px solid #fff; outline-offset: 8px; border-radius: 10px; }
@keyframes sign-float {
  0%, 100% { transform: translateY(0) rotate(-1deg) scale(1); }
  25% { transform: translateY(-5px) rotate(.8deg) scale(1.015); }
  50% { transform: translateY(-8px) rotate(0) scale(1.03); }
  75% { transform: translateY(-5px) rotate(-.8deg) scale(1.015); }
}
@media (max-width: 767px) {
  .sign-button { margin-top: 25px; }
  .sign-button img { width: min(250px, 78vw); }
}

/* ---------- split ---------- */

.split__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ag-sp-50);
  align-items: flex-start;
}
.split__row > * { flex: 1 1 0; min-width: 0; }
.split--reverse .split__row { flex-direction: row-reverse; }
@media (max-width: 781px) {
  .split__row { flex-wrap: wrap; }
  .split__row > * { flex-basis: 100%; }
}
@media (min-width: 782px) { .split__row { flex-wrap: nowrap; } }

.split__heading {
  color: var(--ag-primary);
  font-size: clamp(2.2rem, 2.2rem + ((1vw - .2rem) * 2.824), 4rem);
  margin-top: var(--ag-sp-40) !important;
  margin-bottom: var(--ag-sp-50) !important;
}
.split__heading + * { margin-top: 0 !important; }
.split__lead { margin-top: var(--ag-sp-50) !important; }

.split__figure { margin: 0 auto; max-width: 80%; }
.split__figure img, .split__figure video { display: block; width: 100%; }
.split__figure--circle img, .split__figure--circle video { aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.split__figure--rounded img { border-radius: var(--ag-radius); }

/* Animated pill buttons */
.pill-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 20px 0;
}
.pill-nav .btn-ag {
  opacity: 0;
  transform: translateY(16px) scale(.97);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease, opacity .55s ease;
}
.pill-nav.is-visible .btn-ag { opacity: 1; transform: none; }
.pill-nav.is-visible .btn-ag:hover { transform: translateY(-3px); }
.pill-nav.is-visible .btn-ag:nth-child(1) { transition-delay: .05s; }
.pill-nav.is-visible .btn-ag:nth-child(2) { transition-delay: .13s; }
.pill-nav.is-visible .btn-ag:nth-child(3) { transition-delay: .21s; }
.pill-nav.is-visible .btn-ag:nth-child(4) { transition-delay: .29s; }
.pill-nav.is-visible .btn-ag:nth-child(5) { transition-delay: .37s; }
.pill-nav.is-visible .btn-ag:hover { transition-delay: 0s; }
@media (max-width: 700px) {
  .pill-nav { gap: 8px; padding: 14px 0; }
  .pill-nav .btn-ag { min-height: 38px; padding: 9px 14px; font-size: .78rem; box-shadow: 0 5px 14px rgba(0, 0, 0, .09); }
}
@media (max-width: 420px) {
  .pill-nav { gap: 7px; }
  .pill-nav .btn-ag { padding: 8px 12px; font-size: .74rem; }
}

/* ---------- images ---------- */

.image-row__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--ag-sp-50);
  align-items: start;
}
@media (max-width: 781px) {
  .image-row__grid { grid-template-columns: 1fr; }
}
.image-row__item { margin: 0; }
.image-row__item img { display: block; width: 100%; border-radius: var(--radius, var(--ag-radius)); }

/* ---------- band ---------- */

.band {
  padding: var(--ag-sp-80) 0;
  color: #fff;
}
.band--gradient { background: var(--ag-gradient); }
.band--grey { background: var(--ag-grey); }
.band--light { background: var(--ag-light); color: var(--ag-text); }
.band--dark { background: var(--ag-dark); }
.band__heading {
  font-size: var(--ag-fs-xxl);
  color: inherit;
  margin-bottom: calc(20px + 2 * var(--ag-gap));
}
.band__video { margin: 0; }
.band__video video { display: block; width: 100%; height: auto; }

/* ---------- columns (coloured panels) ---------- */

.color-columns { margin: var(--ag-sp-50) 0 !important; }
.color-columns__wrap { padding-inline: var(--ag-gutter); }
.color-columns__row {
  display: flex;
  gap: var(--ag-sp-50) 10px;
  max-width: 95%;
  margin-inline: auto;
}
@media (max-width: 781px) {
  .color-columns__row { flex-direction: column; max-width: 100%; }
}
.color-columns__col {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 5px;
  color: #fff;
  padding: var(--ag-sp-40) var(--ag-sp-40) var(--ag-sp-60) var(--ag-sp-50);
}
.color-columns__col--primary { background: var(--ag-primary); padding-right: var(--ag-sp-50); }
.color-columns__col--dark { background: var(--ag-primary-dark); }
.color-columns__col--grey { background: #565656; }
.color-columns__title {
  color: #fff;
  font-size: var(--ag-fs-xl);
  font-weight: 600;
  padding: var(--ag-sp-30) 0;
  margin: 0;
}
.color-columns__body { font-size: clamp(.875rem, .875rem + ((1vw - .2rem) * .196), 1rem); }
.color-columns__body > * { margin: var(--ag-gap) 0 0; }
.color-columns__body > p + p { margin-top: 0; }
.color-columns__body ul { padding-left: var(--ag-sp-30); }
.color-columns__body li, .color-columns__body p { color: #fff; }

/* ---------- cta ---------- */

.cta-block { margin: var(--ag-sp-50) 0 !important; }
.cta-box {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem clamp(2rem, 5vw, 4.5rem);
  padding: clamp(32px, 5vw, 64px);
  border-radius: var(--ag-radius);
  color: #fff;
  background:
    linear-gradient(270deg, var(--ag-slate) 0%, var(--ag-slate) 40%, rgba(70, 79, 92, .7) 62%, rgba(70, 79, 92, .1) 100%),
    url("../../img/site/pattern-tile.svg") 0 0 / 84px 84px,
    var(--ag-slate);
  box-shadow: 0 30px 60px -28px rgba(70, 79, 92, .75);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}
.cta-box.is-visible { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .cta-box { grid-template-columns: 1fr; }
  .cta-box { background: linear-gradient(180deg, var(--ag-slate) 0%, var(--ag-slate) 55%, rgba(70, 79, 92, .6) 100%), url("../../img/site/pattern-tile.svg") 0 0 / 72px 72px, var(--ag-slate); }
}

/* faint logo watermark */
.cta-box__mark {
  position: absolute;
  right: -40px;
  bottom: -60px;
  z-index: -1;
  width: 260px;
  display: none;
  transform: rotate(-12deg);
  pointer-events: none;
}

.cta-box__text { max-width: 640px; }
.cta-box__kicker {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 1.1rem;
  padding: .35rem .85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cta-box__kicker i { color: var(--ag-rose); font-size: .9rem; }
.cta-box__title {
  color: #fff;
  font-size: clamp(1.6rem, 1.5rem + 1.1vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.12;
  margin: 0 0 .8rem;
}
.cta-box__lead {
  color: rgba(255, 255, 255, .8);
  margin: 0;
  font-size: var(--ag-fs-medium);
  line-height: 1.65;
}

.cta-box__actions { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.cta-box__button {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.6rem;
  border-radius: 999px;
  background: #fff;
  color: var(--ag-primary-dark);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .5);
}
.cta-box__phone {
  display: block;
  line-height: 1.5;
  padding-left: .4rem;
  color: rgba(255, 255, 255, .75);
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s ease;
}
.cta-box__phone i { margin-right: .3rem; }
.cta-box__phone strong { color: #fff; font-weight: 700; white-space: nowrap; }
.cta-box__phone:hover { color: #fff; }
.cta-box__phone:hover strong { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .cta-box { opacity: 1; transform: none; transition: none; } }

/* ---------- cover (image with text, optional parallax) ---------- */

.cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  padding: 1em var(--ag-gutter);
}
.cover__bg {
  position: absolute;
  inset: 0;
  background: no-repeat center / cover;
}
.cover--parallax .cover__bg { background-attachment: fixed; }
@supports (-webkit-touch-callout: none) { .cover--parallax .cover__bg { background-attachment: scroll; } }
.cover__overlay { position: absolute; inset: 0; background: var(--ag-text); opacity: .6; }
.cover__inner { position: relative; z-index: 1; width: 100%; max-width: var(--ag-content); text-align: center; }
.cover__title {
  font-family: var(--ag-script);
  font-size: var(--ag-fs-xxl);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: var(--ag-gap);
}
.cover__text p { color: #fff; }

/* Rotating benefit text in the hero (ticker) */
.hero-ticker {
font-family: var(--ag-font);
    position: relative;
    width: 100%;
    height: 60px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefit-slide {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    transform: translateX(100%);
}

.benefit-slide.animate {
    animation: heroTicker 3.5s ease-in-out forwards;
}

@keyframes heroTicker {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    15% {
        transform: translateX(0);
        opacity: 1;
    }

    70% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .benefit-slide {
        font-size: 20px;
    }

    .hero-ticker {
        height: 50px;
    }
}.hero__media--parallax { background: no-repeat center / cover; background-attachment: fixed; }
@supports (-webkit-touch-callout: none) { .hero__media--parallax { background-attachment: scroll; } }

/* ---------- page-title (pages without hero) ---------- */

main.has-header-space { padding-top: 140px; }
@media (max-width: 768px) { main.has-header-space { padding-top: 110px; } }
.page-title { margin-top: var(--ag-sp-60); }
.page-title__h1 {
  font-weight: 700;
  margin: var(--ag-sp-30) 0 var(--ag-sp-70);
}
.page-title__intro { margin-bottom: var(--ag-gap); }
.map-block__heading { margin: var(--ag-sp-60) 0 var(--ag-sp-50); }

/* ---------- hero: lava lamp gradient (footer colours) ---------- */

.hero--lava { background: var(--ag-gradient); }
.hero__lava {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  filter: blur(80px);
}
.hero__lava span {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
/* three soft shades of the footer red, drifting slowly */
.hero__lava span:nth-child(1) { width: 70vw; height: 70vw; left: -20vw; top: -35vw; background: #84423a; opacity: .7; animation: lava1 48s ease-in-out infinite alternate; }
.hero__lava span:nth-child(2) { width: 60vw; height: 60vw; right: -18vw; top: -20vw; background: #b0604f; opacity: .55; animation: lava2 56s ease-in-out infinite alternate; }
.hero__lava span:nth-child(3) { width: 50vw; height: 50vw; left: 22vw; bottom: -30vw; background: #9c5144; opacity: .5; animation: lava3 52s ease-in-out infinite alternate; }
.hero__lava span:nth-child(n+4) { display: none; }

@keyframes lava1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(8vw, 6vw) scale(1.08); } }
@keyframes lava2 { from { transform: translate(0, 0) scale(1.05); } to { transform: translate(-9vw, 5vw) scale(.95); } }
@keyframes lava3 { from { transform: translate(0, 0) scale(1); } to { transform: translate(7vw, -6vw) scale(1.1); } }

/* subtle grain so the gradient doesn't band */
.hero--lava::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero--lava .hero__title { text-shadow: 0 6px 30px rgba(60, 20, 15, .25); }

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

/* Startseite hero: lighter shade, content a bit lower */
.page-startseite .hero--full { padding-top: 320px; }
.page-startseite .hero--full .hero__overlay {
  background: linear-gradient(0deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .25) 45%, rgba(0, 0, 0, 0) 75%);
  opacity: .6;
}
.page-startseite .hero__title, .page-startseite .hero__subtitle { text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
@media (max-width: 768px) { .page-startseite .hero--full { padding-top: 260px; } }

/* ---------- photo-stack: two overlapping photos with parallax ---------- */
.photo-stack {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  aspect-ratio: 1 / 1.12;
}
.photo-stack__item {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: var(--ag-radius);
  will-change: transform;
}
.photo-stack__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-stack__item--back {
  top: 0; left: 0;
  width: 68%; aspect-ratio: 3 / 4;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45);
}
.photo-stack__item--front {
  right: 0; bottom: 0;
  width: 56%; aspect-ratio: 3 / 4;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .5);
}
@media (max-width: 781px) { .photo-stack { max-width: 460px; margin: var(--ag-sp-40) auto 0; } }

/* ---------- Startseite hero animations ---------- */

/* rotating subline */
.hero-rotator {
  position: relative;
  display: grid;
  justify-items: center;
  overflow: hidden;
  height: 1.75em;
}
.hero-rotator__item {
  grid-area: 1 / 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(100%);
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .7s ease;
}
.hero-rotator__item.is-active { opacity: 1; transform: none; }
.hero-rotator__item.is-leaving { opacity: 0; transform: translateY(-100%); }
@media (max-width: 480px) { .hero-rotator__item { white-space: normal; text-align: center; } .hero-rotator { height: 3.5em; align-items: center; } }

/* slow zoom of the hero photo */
.page-startseite .hero--full .hero__media { animation: heroZoom 24s ease-in-out infinite alternate; transform-origin: 35% 40%; }
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.08); } }

/* entrance: claim writes in, subline + sign follow (start when the preloader is gone) */
.page-startseite .hero--full .hero__title { clip-path: inset(-20% 100% -20% 0); opacity: 0; transform: translateY(14px); }
.page-startseite .hero--full .hero-rotator,
.page-startseite .hero--full .sign-button { opacity: 0; }
.page-startseite.is-loaded .hero--full .hero__title { animation: claimWrite 1.6s cubic-bezier(.6, .1, .2, 1) .3s forwards; }
.page-startseite.is-loaded .hero--full .hero-rotator { animation: fadeUp .8s ease 1.4s forwards; }
.page-startseite.is-loaded .hero--full .sign-button { animation: signSwing 1.3s cubic-bezier(.3, 1.4, .4, 1) 1.8s forwards; transform-origin: 50% -40px; }
@keyframes claimWrite {
  0%   { clip-path: inset(-20% 100% -20% 0); opacity: 0; transform: translateY(14px); }
  15%  { opacity: 1; }
  100% { clip-path: inset(-20% 0 -20% 0); opacity: 1; transform: none; }
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes signSwing {
  0%   { opacity: 0; transform: translateY(-50px) rotate(-14deg); }
  35%  { opacity: 1; transform: translateY(0) rotate(7deg); }
  60%  { transform: rotate(-4deg); }
  80%  { transform: rotate(2deg); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .page-startseite .hero--full .hero__media { animation: none; }
  .page-startseite .hero--full .hero__title,
  .page-startseite .hero--full .hero-rotator,
  .page-startseite .hero--full .sign-button { animation: none !important; opacity: 1; clip-path: none; transform: none; }
}

/* Startseite: Karriere sign lower and with a calmer entrance */
.page-startseite .hero--full .sign-button { margin-top: clamp(60px, 9vh, 110px); }
.page-startseite.is-loaded .hero--full .sign-button { animation: signIn 1.1s cubic-bezier(.2, .8, .2, 1) 1.8s forwards; }
@keyframes signIn {
  from { opacity: 0; transform: translateY(-12px) rotate(-2deg); }
  to   { opacity: 1; transform: none; }
}
/* Karriere sign sits in the lower part of the Startseite hero, independent of the claim */
.page-startseite .hero--full .hero__inner { position: static; }
.page-startseite .hero--full .hero__inner > * { position: relative; z-index: 2; }
.page-startseite .hero--full .sign-button {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(48px, 12vh, 130px);
  z-index: 3;
  margin: 0;
}

/* cover with grey logo background (Einzelmenüs "Probieren Sie unser Angebot!") */
.cover--logo { background: radial-gradient(circle at 50% 50%, #5a5a5a 0%, #3e3e3e 70%); }
.cover--logo .cover__overlay { display: none; }
.cover__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(900px, 120vw);
  transform: translate(-50%, -50%) rotate(-8deg);
  filter: grayscale(1) brightness(1.6);
  opacity: .1;
  pointer-events: none;
}

/* cover with looping background video */
.cover__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover:has(.cover__video) .cover__overlay { background: #1c1514; opacity: .55; }
.cover__toggle {
  position: absolute; right: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); z-index: 2;
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .4); background: rgba(0, 0, 0, .3); backdrop-filter: blur(6px);
  color: #fff; font-size: 1.15rem; cursor: pointer; transition: background-color .2s ease;
}
.cover__toggle:hover { background: rgba(0, 0, 0, .55); }
.cover__title--sans {
  font-family: var(--ag-font);
  font-size: clamp(2rem, 1.6rem + 2vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.cover__toggle { right: auto; left: clamp(16px, 2vw, 28px); }

/* Subpage heroes a bit lower (Startseite / Über uns keep full height) */
.hero--page { min-height: clamp(340px, 40vh, 440px); padding-top: 90px; }
@media (max-width: 768px) { .hero--page { min-height: 320px; padding-top: 110px; } }

/* Startseite claim tilted 3° counter-clockwise */
.page-startseite .hero--full .hero__title { transform: translateY(14px) rotate(-3deg); }
@keyframes claimWrite {
  0%   { clip-path: inset(-30% 100% -30% -6%); opacity: 0; transform: translateY(14px) rotate(-3deg); }
  15%  { opacity: 1; }
  100% { clip-path: inset(-30% -6% -30% -6%); opacity: 1; transform: rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) { .page-startseite .hero--full .hero__title { transform: rotate(-3deg); } }

/* ---------- Auto reveal: content fades up when scrolled into view (JS adds .ar) ---------- */
.ar { opacity: 0; transform: translateY(26px); transition: opacity .7s ease var(--ar-d, 0s), transform .8s cubic-bezier(.2, .8, .2, 1) var(--ar-d, 0s); }
.ar.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ar { opacity: 1; transform: none; transition: none; } }

/* ---------- Shared cards (Startseite style): benefits, icon-cards, steps ---------- */
.ag-cards { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1100px) { .ag-cards { grid-template-columns: repeat(min(var(--cols, 3), 3), minmax(0, 1fr)); } }
@media (max-width: 860px) { .ag-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 480px) { .ag-cards { grid-template-columns: 1fr; } }

.ag-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 26px 24px 24px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #eee9e1;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .12);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease calc(var(--i) * 70ms), transform .6s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 70ms), box-shadow .35s ease, border-color .35s ease;
}
.ag-card.is-visible { opacity: 1; transform: none; }
.ag-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(160px circle at 100% 100%, rgba(var(--ag-primary-rgb), .14), transparent 70%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.ag-card.is-visible:hover { transform: translateY(-6px); border-color: rgba(var(--ag-primary-rgb), .25); box-shadow: 0 24px 44px -18px rgba(var(--ag-primary-rgb), .45); transition-delay: 0s; }
.ag-card:hover::after { opacity: 1; }

.ag-card__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: .6rem;
  border-radius: 50%;
  background: rgba(var(--ag-primary-rgb), .1);
  color: var(--ag-primary-dark);
  font-size: 1.6rem;
  transition: background-color .35s ease, color .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.ag-card__icon svg { width: 46px; height: 46px; }
.ag-card:hover .ag-card__icon { background: var(--ag-primary); color: #fff; transform: rotate(-8deg) scale(1.08); }
.ag-card__kicker { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ag-primary); }
.ag-card__title { margin: 0; font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: var(--ag-text); }
.ag-card__text { margin: 0; font-size: .9rem; font-weight: 500; line-height: 1.55; color: #666; }
.ag-cards--steps .ag-card { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 1rem; }
.ag-cards--steps .ag-card__icon { margin: 0; }
.ag-cards--steps .ag-card__kicker, .ag-cards--steps .ag-card__title { flex-basis: calc(100% - 64px - 1rem); }
.ag-cards--steps .ag-card__kicker { align-self: end; }
@media (prefers-reduced-motion: reduce) { .ag-card { opacity: 1; transform: none; transition: none; } }

/* long German words in narrow cards: hyphenate instead of overflowing */
.ag-card__title, .ag-card__text, .service-card__title, .process__title, .fact__label, .feature-card__title, .job-card h3 {
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
}
/* only split really long words (≥ 14 letters, at least 6 on each side); never body text */
.ag-card__title, .service-card__title, .process__title, .fact__label, .feature-card__title, .job-card h3 { hyphenate-limit-chars: 14 6 6; -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 6; }
.ag-card__text { hyphens: manual; -webkit-hyphens: manual; }
.ag-card__text { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 14 6 6; }
/* shared cards: equal height in every row */
.ag-cards { grid-auto-rows: 1fr; }

/* CTA box: pattern only as a decorative strip on the left edge – text always on solid slate */
.cta-box {
  background:
    linear-gradient(90deg, rgba(70, 79, 92, 0) 0, rgba(70, 79, 92, .25) 60px, var(--ag-slate) 150px),
    url("../../img/site/pattern-tile.svg") 0 0 / 84px 84px,
    var(--ag-slate);
  padding-left: clamp(130px, 13vw, 190px);
}
@media (max-width: 860px) {
  .cta-box {
    background:
      linear-gradient(180deg, rgba(70, 79, 92, 0) 0, rgba(70, 79, 92, .25) 40px, var(--ag-slate) 110px),
      url("../../img/site/pattern-tile.svg") 0 0 / 72px 72px,
      var(--ag-slate);
    padding-left: clamp(24px, 6vw, 40px);
    padding-top: 110px;
  }
}

/* ---------- Card icons everywhere like on the Startseite: white circle, red ring, red icon; red/white on hover ---------- */
.ag-card__icon, .fact__icon, .process__icon {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--ag-primary);
  color: var(--ag-primary);
}
.ag-card__icon svg, .fact__icon svg { color: var(--ag-primary); }
.ag-card:hover .ag-card__icon, .ag-card:focus-visible .ag-card__icon,
.fact:hover .fact__icon,
.process__step:hover .process__icon { background: var(--ag-primary); color: #fff; }
.ag-card:hover .ag-card__icon svg, .fact:hover .fact__icon svg { color: #fff; }

/* heading as first grid cell (icon-cards) */
.ag-cards__lead { display: flex; flex-direction: column; justify-content: center; padding: 8px 8px 8px 0; }
.ag-cards__lead .h-section { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.2rem); margin: 0 0 .6rem !important; }
.ag-cards__lead p { margin: 0; color: #666; font-size: .95rem; }
@media (max-width: 860px) { .ag-cards__lead { grid-column: 1 / -1; } }
.icon-cards-block + * { margin-top: var(--ag-gap); }
@media (max-width: 860px) { .ag-cards:has(.ag-cards__lead) { grid-auto-rows: auto; } .ag-cards__lead { padding-bottom: 4px; } }