/* ==========================================================================
   Aufsperrdienst Graz — main stylesheet (prefix ag-)
   Palette: #ffffff #21201f #f5f5f5 #fcd942 #707070 #e2e2e2 #fcd94275 #21201f24 #ffffff1f
   Fonts: DM Sans (headings), Manrope (body), DM Mono (labels)
   ========================================================================== */

:root {
  --white: #ffffff;
  --ink: #21201f;
  --soft: #f5f5f5;
  --y: #fcd942;
  --text: #707070;
  --pale: #e2e2e2;
  --y-a: #fcd94275;
  --bd: #21201f24;
  --bd-w: #ffffff1f;
  --f-head: "DM Sans", "Manrope", sans-serif;
  --f-body: "Manrope", sans-serif;
  --f-mono: "DM Mono", ui-monospace, monospace;
  --r: 4px;
  --r2: 6px;
  --pill: 9999px;
  --t: 300ms ease;
  --w: 1320px;
  --g: 20px;
  --sec: 100px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body {
  max-width: 1920px;
  min-width: 375px;
  margin: 0 auto;
  background: var(--white);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--f-head); font-weight: 500; line-height: 1.1; color: var(--ink); }
p { margin: 0; }
ul, ol { list-style: none; padding: 0; margin: 0; }
dl, dd, figure { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.ag-wrap { width: 100%; max-width: calc(var(--w) + 2 * var(--g)); margin: 0 auto; padding: 0 var(--g); }
.ag-sec { padding: var(--sec) 0; }
.ag-center { text-align: center; max-width: 845px; margin: 0 auto; }
.ag-center .ag-eyebrow { justify-content: center; }
.ag-center__p { margin-top: 20px; }

/* ---------- Type helpers ---------- */
.ag-h2 { font-size: 48px; line-height: 1.1; letter-spacing: 0; }
.ag-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 13px; font-weight: 500; line-height: 1.3;
  letter-spacing: .031em; text-transform: uppercase; color: var(--ink);
  margin-bottom: 20px;
}
.ag-eyebrow img { width: 13px; height: 13px; flex: 0 0 13px; }
.ag-eyebrow--light { color: var(--white); }

/* ---------- Buttons ---------- */
.ag-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 14px 28px; border-radius: var(--r); border: 1px solid transparent;
  font-family: var(--f-mono); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .033em; text-transform: uppercase;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.ag-btn img { width: 16px; height: 16px; flex: 0 0 16px; }
.ag-btn--y { background: var(--y); color: var(--ink); }
.ag-btn--y:hover { background: var(--white); }
.ag-btn--dark { background: var(--ink); color: var(--y); }
.ag-btn--dark:hover { background: var(--y); color: var(--ink); }
.ag-btn--line { border-color: var(--y); color: var(--y); background: transparent; }
.ag-btn--line:hover { background: var(--y); color: var(--ink); }
.ag-btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.ag-btn--ghost:hover { background: var(--ink); color: var(--y); }

/* ==========================================================================
   Header
   ========================================================================== */
.ag-head {
  position: sticky; top: 0; z-index: 900;
  background: var(--ink); border-bottom: 1px solid transparent;
  overflow-x: clip; transition: border-color var(--t);
}
.ag-head.is-scrolled { border-bottom-color: var(--bd-w); }
.ag-head__in {
  max-width: calc(var(--w) + 2 * var(--g)); margin: 0 auto; padding: 0 var(--g);
  height: 84px; display: flex; align-items: center; gap: 40px;
}
.ag-brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.ag-brand__mark { width: 40px; height: 40px; }
.ag-brand__txt { display: flex; flex-direction: column; line-height: 1.1; }
.ag-brand__txt strong { font-family: var(--f-head); font-size: 21px; font-weight: 600; color: var(--white); }
.ag-brand__txt small { font-family: var(--f-mono); font-size: 11px; letter-spacing: .033em; text-transform: uppercase; color: var(--y); margin-top: 4px; }
.ag-nav { display: flex; align-items: center; gap: 34px; margin: 0 auto; }
.ag-nav a { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .033em; text-transform: uppercase; color: var(--white); }
.ag-nav a:hover { color: var(--y); }
.ag-head__phone {
  display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto;
  background: var(--y); color: var(--ink); border-radius: var(--r); padding: 14px 22px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .033em;
  transition: background var(--t);
}
.ag-head__phone img { width: 16px; height: 16px; }
.ag-head__phone:hover { background: var(--white); }
.ag-burger { display: none; width: 44px; height: 44px; margin-left: auto; background: transparent; border: 1px solid var(--bd-w); border-radius: var(--r); padding: 0; position: relative; }
.ag-burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--white); border-radius: 2px; }
.ag-burger span:nth-child(1) { top: 14px; }
.ag-burger span:nth-child(2) { top: 21px; }
.ag-burger span:nth-child(3) { top: 28px; }

/* Drawer */
.ag-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1001;
  width: min(360px, 88vw); background: var(--ink); color: var(--white);
  display: flex; flex-direction: column; padding: 24px;
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--t), visibility var(--t);
}
.ag-drawer.is-open { transform: none; visibility: visible; }
.ag-drawer__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--bd-w); }
.ag-drawer__top span { font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .033em; color: var(--y); }
.ag-drawer__x { width: 40px; height: 40px; background: transparent; border: 1px solid var(--bd-w); border-radius: var(--r); display: grid; place-items: center; padding: 0; }
.ag-drawer__nav { display: flex; flex-direction: column; padding: 12px 0; overflow-y: auto; }
.ag-drawer__nav a { font-family: var(--f-head); font-size: 20px; padding: 12px 0; border-bottom: 1px solid var(--bd-w); color: var(--white); }
.ag-drawer__nav a:hover { color: var(--y); }
.ag-drawer__foot { margin-top: auto; display: grid; gap: 12px; padding-top: 16px; }
.ag-drawer__phone { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--y); color: var(--ink); border-radius: var(--r); padding: 15px; font-family: var(--f-mono); font-size: 13px; }
.ag-drawer__phone img { width: 18px; height: 18px; }
.ag-drawer__cta { display: block; text-align: center; border: 1px solid var(--y); color: var(--y); border-radius: var(--r); padding: 14px; font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .033em; }
.ag-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(33, 32, 31, .6); opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t); }
.ag-backdrop.is-open { opacity: 1; visibility: visible; }
body.is-locked { overflow: hidden; }

/* ==========================================================================
   1. Hero
   ========================================================================== */
.ag-hero { display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); }
.ag-hero__text {
  padding: 90px 60px 110px max(var(--g), calc((min(100vw, 1920px) - var(--w)) / 2));
  display: flex; flex-direction: column; justify-content: center;
}
.ag-hero__title { font-size: 74px; line-height: 1.1; color: var(--white); }
.ag-hero__title span { display: block; color: var(--y); font-size: .62em; line-height: 1.15; margin-top: 14px; }
.ag-hero__lead { color: var(--pale); max-width: 560px; margin-top: 26px; }
.ag-hero__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.ag-hero__meta { margin-top: 26px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .033em; text-transform: uppercase; color: var(--text); }
.ag-hero__media { position: relative; min-height: 780px; }
.ag-hero__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ag-hero__badges { position: absolute; left: 18px; right: 18px; bottom: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ag-hero__badge { background: var(--white); border-radius: var(--r2); padding: 16px; min-height: 110px; }
.ag-hero__badge--y { background: var(--y); }
.ag-hero__badge img { width: 18px; height: 18px; margin-bottom: 10px; }
.ag-hero__badge span { display: block; font-family: var(--f-head); font-size: 18px; font-weight: 500; line-height: 1.15; color: var(--ink); }

/* ==========================================================================
   2. Kennzahlen
   ========================================================================== */
.ag-zahlen { padding: 25px 0 0; }
.ag-zahlen__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ag-zahlen__card { border: 1px solid var(--bd); border-radius: var(--r); padding: 22px; min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.ag-zahlen__card--y { background: var(--y); border-color: var(--y); justify-content: center; align-items: center; text-align: center; gap: 14px; }
.ag-zahlen__card--y img { width: 50px; height: 50px; }
.ag-zahlen__h { font-size: 22px; color: var(--ink); }
.ag-zahlen__card--y p { color: var(--ink); font-size: 15px; }
.ag-zahlen__label { font-family: var(--f-head); font-size: 19px; font-weight: 500; line-height: 1.2; color: var(--text); }
.ag-zahlen__num { font-family: var(--f-head); font-size: 66px; font-weight: 500; line-height: 1; color: var(--ink); display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.ag-zahlen__num small { font-size: 28px; }

/* ==========================================================================
   3. Intro
   ========================================================================== */
.ag-intro__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 65px; align-items: end; }
.ag-intro__body { display: grid; gap: 16px; }

/* ==========================================================================
   4. Über uns
   ========================================================================== */
.ag-ueber { padding: 0 0 60px; }
.ag-ueber__row { display: grid; grid-template-columns: 1fr 1fr; gap: 65px; align-items: start; }
.ag-ueber__col { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ag-ueber__img { border-radius: var(--r2); overflow: hidden; width: 100%; }
.ag-ueber__img > img { width: 100%; height: 100%; object-fit: cover; }
.ag-ueber__img--wide { aspect-ratio: 622 / 370; margin-bottom: 14px; }
.ag-ueber__img--tall { aspect-ratio: 633 / 646; }
.ag-ueber__h { font-size: 28px; }
.ag-ueber__col .ag-btn { margin-top: 14px; }

/* ==========================================================================
   5. Marken
   ========================================================================== */
.ag-marken { padding: 40px 0 var(--sec); }
.ag-marken__cap { text-align: center; font-family: var(--f-mono); font-size: 13px; letter-spacing: .031em; text-transform: uppercase; color: var(--ink); }
.ag-marken__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 30px; margin: 28px 0 36px; padding: 26px 0; border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); }
.ag-marken__row li { font-family: var(--f-head); font-size: 30px; font-weight: 600; letter-spacing: .02em; color: var(--text); opacity: .6; }
.ag-marken__txt { max-width: 860px; margin: 0 auto; text-align: center; }

/* ==========================================================================
   6. Leistungen (dark)
   ========================================================================== */
.ag-svc { background: var(--ink); padding: var(--sec) 0; }
.ag-svc .ag-h2 { color: var(--white); }
.ag-svc__head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px 65px; align-items: end; margin-bottom: 70px; }
.ag-svc__head p { color: var(--pale); }
.ag-svc__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
.ag-svc__card {
  position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0;
  border: 1px solid var(--bd-w); border-radius: var(--r2); padding: 30px 26px 26px;
  transition: border-color var(--t);
}
.ag-svc__card:hover { border-color: var(--y-a); }
.ag-svc__num { font-family: var(--f-head); font-size: 14px; font-weight: 600; color: var(--text); }
.ag-svc__ico { position: absolute; top: 24px; right: 22px; width: 84px; height: 84px; opacity: .45; transition: opacity var(--t); }
.ag-svc__card:hover .ag-svc__ico { opacity: 1; }
.ag-svc__card h3 { font-size: 23px; color: var(--white); margin-top: 86px; }
.ag-svc__card p { color: var(--pale); font-size: 15px; }
.ag-svc__tag { margin-top: auto; align-self: flex-start; font-family: var(--f-mono); font-size: 11px; letter-spacing: .033em; text-transform: uppercase; color: var(--y); border: 1px solid var(--y-a); border-radius: var(--pill); padding: 6px 12px; }
.ag-svc__toggle { display: none; }

/* ==========================================================================
   7. Warum
   ========================================================================== */
.ag-warum__row { display: grid; grid-template-columns: 633fr 622fr; gap: 65px; align-items: center; }
.ag-warum__img { border-radius: var(--r2); overflow: hidden; aspect-ratio: 633 / 830; }
.ag-warum__img > img { width: 100%; height: 100%; object-fit: cover; }
.ag-warum__list { margin-top: 30px; }
.ag-warum__list li { position: relative; padding: 24px 0 24px 52px; border-bottom: 1px solid var(--bd); }
.ag-warum__list li:last-child { border-bottom: 0; }
.ag-warum__list img { position: absolute; left: 0; top: 22px; width: 32px; height: 32px; }
.ag-warum__list h3 { font-size: 25px; margin-bottom: 10px; }

/* ==========================================================================
   8. Ablauf
   ========================================================================== */
.ag-ablauf { padding: 20px 0 var(--sec); }
.ag-ablauf__h2 { max-width: 620px; margin-bottom: 70px; }
.ag-ablauf__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 35px; }
.ag-ablauf__step { position: relative; background: var(--soft); border-radius: var(--r); padding: 26px 24px 28px; min-height: 250px; min-width: 0; }
.ag-ablauf__step:nth-child(even) { margin-top: 44px; }
.ag-ablauf__step:not(:last-child)::after { content: ""; position: absolute; top: 60px; right: -35px; width: 35px; border-top: 2px dotted var(--y); }
.ag-ablauf__ghost { position: absolute; top: -34px; right: 0; font-family: var(--f-head); font-size: 64px; font-weight: 500; line-height: 1; color: var(--y-a); }
.ag-ablauf__label { display: block; font-family: var(--f-mono); font-size: 12px; letter-spacing: .033em; text-transform: uppercase; color: var(--text); margin-bottom: 40px; }
.ag-ablauf__step h3 { font-size: 21px; margin-bottom: 12px; }
.ag-ablauf__step p { font-size: 15px; }

/* ==========================================================================
   9. Türen in Graz
   ========================================================================== */
.ag-tueren { background: var(--soft); }
.ag-tueren__row { display: grid; grid-template-columns: 5fr 7fr; gap: 65px; align-items: start; }
.ag-tueren__fig { position: sticky; top: 110px; border-radius: var(--r2); overflow: hidden; }
.ag-tueren__fig > img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.ag-tueren__fig figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; background: var(--ink); color: var(--pale); border-radius: var(--r); padding: 18px 20px; font-size: 15px; }
.ag-tueren__fig figcaption span { display: block; font-family: var(--f-mono); font-size: 12px; letter-spacing: .033em; text-transform: uppercase; color: var(--y); margin-bottom: 6px; }
.ag-tueren__intro { margin-top: 20px; }
.ag-tueren__list { margin-top: 26px; }
.ag-tueren__item { padding: 24px 0; border-top: 1px solid var(--bd); }
.ag-tueren__where { display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .033em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.ag-tueren__where::before { content: ""; width: 8px; height: 8px; background: var(--y); flex: 0 0 8px; }
.ag-tueren__item h3 { font-size: 25px; margin-bottom: 10px; }

/* ==========================================================================
   10. Einsätze
   ========================================================================== */
.ag-cases__list { display: grid; gap: 20px; margin-top: 70px; }
.ag-case { position: relative; min-height: 640px; border-radius: var(--r2); overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 24px; }
.ag-case > .ag-case__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ag-case::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(33, 32, 31, .9) 0%, rgba(33, 32, 31, .55) 32%, rgba(33, 32, 31, 0) 62%); }
.ag-case__stats { position: relative; display: grid; grid-template-columns: repeat(2, minmax(140px, 180px)); gap: 22px 20px; padding: 0 0 4px 4px; }
.ag-case__stats dt { font-family: var(--f-head); font-size: 28px; font-weight: 500; color: var(--white); line-height: 1.1; }
.ag-case__stats dd { font-size: 15px; color: var(--pale); line-height: 1.35; margin-top: 6px; }
.ag-case__card { position: relative; background: var(--ink); border-radius: var(--r); padding: 22px 24px 26px; max-width: 486px; }
.ag-case__tag { display: block; font-family: var(--f-mono); font-size: 12px; letter-spacing: .033em; text-transform: uppercase; color: var(--y); margin-bottom: 14px; }
.ag-case__card h3 { font-size: 23px; color: var(--white); margin-bottom: 12px; }
.ag-case__card p { color: var(--pale); font-size: 15px; }

/* ==========================================================================
   11. Vorher / Nachher
   ========================================================================== */
.ag-vn { padding-top: 0; }
.ag-vn__head { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 65px; align-items: end; margin-bottom: 60px; }
.ag-vn__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.ag-vn__card { min-width: 0; }
.ag-vn__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r2); overflow: hidden; margin-bottom: 22px; }
.ag-vn__media > .ag-vn__after { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ag-vn__before { position: absolute; top: 14px; left: 14px; width: 42%; aspect-ratio: 4 / 3; border: 3px solid var(--y); border-radius: var(--r); overflow: hidden; background: var(--ink); }
.ag-vn__before > img { width: 100%; height: 100%; object-fit: cover; }
.ag-vn__before figcaption { position: absolute; left: 0; bottom: 0; background: var(--y); color: var(--ink); font-family: var(--f-mono); font-size: 10px; letter-spacing: .033em; text-transform: uppercase; padding: 4px 8px; border-top-right-radius: var(--r); }
.ag-vn__flag { position: absolute; right: 14px; bottom: 14px; background: var(--ink); color: var(--y); font-family: var(--f-mono); font-size: 11px; letter-spacing: .033em; text-transform: uppercase; padding: 7px 12px; border-radius: var(--r); }
.ag-vn__card h3 { font-size: 23px; margin-bottom: 10px; }

/* ==========================================================================
   12. Preise
   ========================================================================== */
.ag-price { background: var(--soft); padding: var(--sec) 0; }
.ag-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 70px; }
.ag-plan { background: var(--white); border-radius: var(--r2); padding: 30px; display: flex; flex-direction: column; min-width: 0; }
.ag-plan--dark { background: var(--ink); }
.ag-plan__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ag-plan__no { font-family: var(--f-mono); font-size: 13px; color: var(--text); }
.ag-plan__name { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .033em; text-transform: uppercase; color: var(--ink); }
.ag-plan__name img { width: 13px; height: 13px; }
.ag-plan__price { font-family: var(--f-head); font-size: 48px; font-weight: 500; line-height: 1; color: var(--ink); margin-top: 26px; }
.ag-plan__price small { font-size: 16px; color: var(--text); margin-right: 2px; }
.ag-plan__price span { font-size: 15px; color: var(--text); font-weight: 400; }
.ag-plan__desc { margin-top: 16px; padding-bottom: 22px; border-bottom: 1px solid var(--bd); }
.ag-plan__h { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .033em; text-transform: uppercase; color: var(--ink); margin: 22px 0 12px; }
.ag-plan__list { display: grid; gap: 8px; padding-bottom: 22px; border-bottom: 1px solid var(--bd); }
.ag-plan__list li { position: relative; padding-left: 18px; font-size: 15px; }
.ag-plan__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.ag-plan__fit { font-size: 15px; }
.ag-plan__btn { margin-top: 28px; width: 100%; }
.ag-plan--dark .ag-plan__no, .ag-plan--dark .ag-plan__name, .ag-plan--dark .ag-plan__price, .ag-plan--dark .ag-plan__h { color: var(--white); }
.ag-plan--dark .ag-plan__price small, .ag-plan--dark .ag-plan__price span { color: var(--pale); }
.ag-plan--dark p, .ag-plan--dark li { color: var(--pale); }
.ag-plan--dark .ag-plan__desc, .ag-plan--dark .ag-plan__list { border-color: var(--bd-w); }
.ag-plan--dark .ag-plan__list li::before { background: var(--y); }

.ag-table { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; margin-top: 60px; align-items: start; }
.ag-table > .ag-table__h { grid-column: 1 / -1; }
.ag-table__h { font-size: 28px; }
.ag-table__t { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--r2); overflow: hidden; }
.ag-table__t th { background: var(--ink); color: var(--white); font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .033em; text-transform: uppercase; text-align: left; padding: 16px 22px; }
.ag-table__t th:last-child, .ag-table__t td:last-child { text-align: right; white-space: nowrap; }
.ag-table__t td { padding: 14px 22px; border-bottom: 1px solid var(--bd); font-size: 15px; }
.ag-table__t td:last-child { font-family: var(--f-head); font-weight: 500; color: var(--ink); }
.ag-table__t tbody tr:last-child td { border-bottom: 0; }
.ag-table__side { background: var(--white); border-radius: var(--r2); padding: 30px; position: sticky; top: 110px; }
.ag-table__side .ag-table__h { font-size: 23px; }
.ag-table__sur { margin: 18px 0 22px; }
.ag-table__sur li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--bd); font-size: 15px; }
.ag-table__sur strong { font-family: var(--f-head); font-weight: 500; color: var(--ink); white-space: nowrap; }
.ag-table__note { font-size: 14px; }

/* ==========================================================================
   13. Kostenfaktoren
   ========================================================================== */
.ag-kosten__row { display: grid; grid-template-columns: 1fr 1.6fr; gap: 65px; align-items: start; }
.ag-kosten__head { position: sticky; top: 110px; }
.ag-kosten__head p { margin-top: 20px; }
.ag-kosten__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.ag-kosten__item { padding: 26px 0; border-top: 1px solid var(--bd); min-width: 0; }
.ag-kosten__item img { width: 40px; height: 40px; margin-bottom: 16px; }
.ag-kosten__item h3 { font-size: 22px; margin-bottom: 10px; }

/* ==========================================================================
   14. Kostenrechner (dark)
   ========================================================================== */
.ag-calc { background: var(--ink); padding: var(--sec) 0; }
.ag-calc .ag-h2 { color: var(--white); }
.ag-calc__row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 65px; align-items: center; }
.ag-calc__text p { color: var(--pale); margin-top: 20px; }
.ag-calc__text .ag-calc__small { font-size: 14px; color: var(--text); }
.ag-calc__box { background: var(--white); border-radius: var(--r2); padding: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ag-calc__field { display: grid; gap: 8px; min-width: 0; }
.ag-calc__field--wide { grid-column: 1 / -1; }
.ag-calc__field span { font-family: var(--f-mono); font-size: 12px; letter-spacing: .033em; text-transform: uppercase; color: var(--ink); }
.ag-calc__field select, .ag-calc__field input {
  width: 100%; min-width: 0; height: 50px; padding: 0 14px; border: 1px solid var(--bd); border-radius: var(--r);
  background: var(--white); color: var(--ink); font-family: var(--f-body); font-size: 15px;
}
.ag-calc__field select:focus, .ag-calc__field input:focus { outline: 2px solid var(--y); outline-offset: 1px; }
.ag-calc__field.is-hidden { display: none; }
.ag-calc__out { grid-column: 1 / -1; background: var(--y); border-radius: var(--r); padding: 20px 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.ag-calc__out span { font-family: var(--f-mono); font-size: 12px; letter-spacing: .033em; text-transform: uppercase; color: var(--ink); }
.ag-calc__out strong { font-family: var(--f-head); font-size: 34px; font-weight: 500; color: var(--ink); line-height: 1; }
.ag-calc__btns { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; }
.ag-calc__link { font-family: var(--f-mono); font-size: 12px; letter-spacing: .033em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ==========================================================================
   15. Schlosstypen
   ========================================================================== */
.ag-typen__head { max-width: 760px; margin-bottom: 60px; }
.ag-typen__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
.ag-typ { position: relative; border: 1px solid var(--bd); border-radius: var(--r2); padding: 30px 26px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ag-typ--hl { border-color: var(--y); box-shadow: inset 0 4px 0 var(--y); }
.ag-typ__label { align-self: flex-start; font-family: var(--f-mono); font-size: 11px; letter-spacing: .033em; text-transform: uppercase; color: var(--ink); background: var(--soft); border-radius: var(--pill); padding: 5px 12px; }
.ag-typ--hl .ag-typ__label { background: var(--y); }
.ag-typ > img { width: 56px; height: 56px; }
.ag-typ h3 { font-size: 22px; }
.ag-typ p { font-size: 15px; }
.ag-typ dl { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--bd); }
.ag-typ dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: .033em; text-transform: uppercase; color: var(--text); }
.ag-typ dd { font-size: 15px; color: var(--ink); margin: 4px 0 12px; }
.ag-typ dd:last-child { margin-bottom: 0; }

/* ==========================================================================
   16. Häufige Fehler
   ========================================================================== */
.ag-fehler { background: var(--soft); }
.ag-fehler__head { max-width: 760px; margin-bottom: 50px; }
.ag-fehler__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 50px; }
.ag-fehler__list li { padding: 28px 0; border-top: 1px solid var(--bd); min-width: 0; }
.ag-fehler__no { display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .033em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.ag-fehler__no::before { content: ""; width: 8px; height: 8px; background: var(--y); flex: 0 0 8px; }
.ag-fehler__list h3 { font-size: 23px; margin-bottom: 10px; }

/* ==========================================================================
   17. Ratgeber / Checkliste
   ========================================================================== */
.ag-rat__row { display: grid; grid-template-columns: 1fr 1.35fr; gap: 65px; align-items: start; }
.ag-rat__check { background: var(--ink); border-radius: var(--r2); padding: 40px 36px; position: sticky; top: 110px; }
.ag-rat__check h3 { color: var(--white); font-size: 28px; margin-bottom: 18px; }
.ag-rat__check li { position: relative; padding: 14px 0 14px 36px; border-bottom: 1px solid var(--bd-w); color: var(--pale); font-size: 15px; }
.ag-rat__check li:last-child { border-bottom: 0; }
.ag-rat__check li img { position: absolute; left: 0; top: 15px; width: 22px; height: 22px; }
.ag-rat__body > p { margin-top: 20px; }
.ag-rat__case { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; background: var(--soft); border-left: 4px solid var(--y); border-radius: var(--r); padding: 24px; margin-top: 26px; }
.ag-rat__case strong { display: block; font-family: var(--f-head); font-size: 28px; font-weight: 500; color: var(--ink); line-height: 1.1; }
.ag-rat__case span { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .033em; text-transform: uppercase; margin-top: 8px; }
.ag-rat__body .ag-rat__src { font-family: var(--f-mono); font-size: 12px; letter-spacing: .02em; }

/* ==========================================================================
   18. Einbruchschutz
   ========================================================================== */
.ag-schutz { padding-top: 0; }
.ag-schutz__row { display: grid; grid-template-columns: 1.1fr 1fr; gap: 65px; align-items: center; }
.ag-schutz__body p { margin-top: 20px; }
.ag-schutz__img { border-radius: var(--r2); overflow: hidden; aspect-ratio: 3 / 2; }
.ag-schutz__img > img { width: 100%; height: 100%; object-fit: cover; }
.ag-schutz__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-top: 50px; }
.ag-schutz__grid article { background: var(--soft); border-radius: var(--r2); padding: 30px; min-width: 0; }
.ag-schutz__grid img { width: 44px; height: 44px; margin-bottom: 18px; }
.ag-schutz__grid h3 { font-size: 22px; margin-bottom: 10px; }

/* ==========================================================================
   19. Gewährleistung
   ========================================================================== */
.ag-garantie { background: var(--soft); padding: var(--sec) 0; }
.ag-garantie__row { display: grid; grid-template-columns: 1fr 2.2fr; gap: 65px; align-items: start; }
.ag-garantie__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.ag-garantie__grid > div { background: var(--white); border-radius: var(--r2); padding: 30px; min-width: 0; }
.ag-garantie__grid img { width: 40px; height: 40px; margin-bottom: 18px; }
.ag-garantie__grid h3 { font-size: 22px; margin-bottom: 10px; }
.ag-garantie__grid p { font-size: 15px; }

/* ==========================================================================
   20. Einsatzgebiet (dark)
   ========================================================================== */
.ag-geo { background: var(--ink); padding: var(--sec) 0; }
.ag-geo .ag-h2 { color: var(--white); }
.ag-geo__row { display: grid; grid-template-columns: 1fr 1.1fr; gap: 65px; align-items: center; }
.ag-geo__map { border: 1px solid var(--bd-w); border-radius: var(--r2); overflow: hidden; }
.ag-geo__map > img { width: 100%; }
.ag-geo__body > p { color: var(--pale); margin-top: 20px; }
.ag-geo__groups { margin-top: 28px; }
.ag-geo__group { border-top: 1px solid var(--bd-w); }
.ag-geo__group:last-child { border-bottom: 1px solid var(--bd-w); }
.ag-geo__group summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0; font-family: var(--f-head); font-size: 19px; font-weight: 500; color: var(--white); cursor: pointer; }
.ag-geo__group summary::-webkit-details-marker { display: none; }
.ag-geo__group summary img { width: 16px; height: 16px; transition: transform var(--t); }
.ag-geo__group[open] summary img { transform: rotate(180deg); }
.ag-geo__list { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 20px; }
.ag-geo__list li { font-size: 14px; color: var(--pale); border: 1px solid var(--bd-w); border-radius: var(--pill); padding: 6px 13px; line-height: 1.3; }
.ag-geo__list--num li span { font-family: var(--f-mono); font-size: 11px; color: var(--y); margin-right: 6px; }
.ag-geo__body .ag-geo__note { font-size: 14px; color: var(--text); margin-top: 22px; }
.ag-geo--locked .ag-geo__group summary { cursor: default; }
.ag-geo--locked .ag-geo__group summary img { display: none; }

/* ==========================================================================
   21. Team
   ========================================================================== */
.ag-team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; margin-top: 70px; }
.ag-member { min-width: 0; }
.ag-member > img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r2); }
.ag-member__role { display: block; font-family: var(--f-mono); font-size: 12px; letter-spacing: .033em; text-transform: uppercase; color: var(--text); margin: 20px 0 8px; }
.ag-member h3 { font-size: 23px; margin-bottom: 10px; }
.ag-member p { font-size: 15px; }

/* ==========================================================================
   22. Bewertungen
   ========================================================================== */
.ag-rev { padding-top: 0; }
.ag-rev__score { margin-top: 18px; }
.ag-rev__score strong { font-family: var(--f-head); font-size: 22px; font-weight: 500; color: var(--ink); }
.ag-rev__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 21px; margin: 60px 0 40px; }
.ag-rev__card { background: var(--soft); border-radius: var(--r); padding: 30px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ag-rev__stars { color: var(--y); font-size: 18px; letter-spacing: 3px; }
.ag-rev__svc { font-size: 22px; }
.ag-rev__svc::before { content: "„"; }
.ag-rev__svc::after { content: "“"; }
.ag-rev__txt { font-size: 15px; }
.ag-rev__who { margin-top: auto; display: flex; align-items: center; gap: 14px; padding-top: 8px; }
.ag-rev__ava { width: 50px; height: 50px; flex: 0 0 50px; border-radius: 50%; background: var(--ink); color: var(--y); display: grid; place-items: center; font-family: var(--f-head); font-size: 20px; font-weight: 600; }
.ag-rev__who strong { display: block; font-family: var(--f-head); font-weight: 500; color: var(--ink); font-size: 17px; line-height: 1.2; }
.ag-rev__who small { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .033em; color: var(--text); margin-top: 4px; }

/* ==========================================================================
   23. FAQ
   ========================================================================== */
.ag-faq { border-top: 1px solid var(--bd); }
.ag-faq__head { max-width: 713px; margin-bottom: 60px; }
.ag-faq__row { display: grid; grid-template-columns: 765fr 510fr; gap: 45px; align-items: start; }
.ag-faq__item { border-bottom: 1px solid var(--bd); }
.ag-faq__item:first-child { border-top: 1px solid var(--bd); }
.ag-faq__item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; font-family: var(--f-head); font-size: 19px; font-weight: 500; line-height: 1.25; color: var(--ink); cursor: pointer; }
.ag-faq__item summary::-webkit-details-marker { display: none; }
.ag-faq__item summary img { width: 18px; height: 18px; flex: 0 0 18px; transition: transform var(--t); }
.ag-faq__item[open] summary img { transform: rotate(180deg); }
.ag-faq__item p { padding: 0 40px 20px 0; font-size: 15px; }
.ag-faq__img { position: sticky; top: 110px; border-radius: var(--r2); overflow: hidden; aspect-ratio: 510 / 484; }
.ag-faq__img > img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   24. Kontakt
   ========================================================================== */
.ag-contact { padding: 0 0 var(--sec); }
.ag-contact__frame { position: relative; border-radius: var(--r2); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding: 70px 60px; align-items: center; }
.ag-contact__frame > .ag-contact__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ag-contact__frame::before { content: ""; position: absolute; inset: 0; background: rgba(33, 32, 31, .82); z-index: 1; }
.ag-contact__info, .ag-contact__panel { position: relative; z-index: 2; min-width: 0; }
.ag-contact__info .ag-h2 { color: var(--white); }
.ag-contact__info p { color: var(--pale); margin-top: 20px; }
.ag-contact__info .ag-contact__hint { font-size: 14px; border-left: 3px solid var(--y); padding-left: 14px; }
.ag-contact__list { margin-top: 26px; display: grid; gap: 12px; }
.ag-contact__list li { position: relative; padding-left: 30px; color: var(--white); font-size: 15px; }
.ag-contact__list li img { position: absolute; left: 0; top: 3px; width: 18px; height: 18px; }
.ag-contact__list a:hover { color: var(--y); }
.ag-contact__panel { background: var(--white); border-radius: var(--r2); padding: 30px; }
.ag-form { display: grid; gap: 14px; }
.ag-form__title { font-size: 25px; margin-bottom: 4px; }
.ag-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ag-form__field { min-width: 0; }
.ag-form__input, .ag-form__textarea { width: 100%; border: 1px solid var(--bd); border-radius: var(--r); background: var(--white); color: var(--ink); font-family: var(--f-body); font-size: 15px; padding: 14px; }
.ag-form__textarea { resize: vertical; min-height: 120px; }
.ag-form__input:focus, .ag-form__textarea:focus { outline: 2px solid var(--y); outline-offset: 1px; }
.ag-form__input::placeholder, .ag-form__textarea::placeholder { color: var(--text); }
.ag-form__error { margin-top: 6px; display: inline-block; background: var(--y); color: var(--ink); font-family: var(--f-mono); font-size: 11px; padding: 3px 8px; border-radius: var(--r); }
.ag-form__submit { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; border: 0; border-radius: var(--r); background: var(--y); color: var(--ink); font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .033em; text-transform: uppercase; transition: background var(--t), color var(--t); }
.ag-form__submit img { width: 16px; height: 16px; }
.ag-form__submit:hover { background: var(--ink); color: var(--y); }
.ag-form__success { background: var(--y); color: var(--ink); border-radius: var(--r); padding: 14px; font-size: 15px; }

/* ==========================================================================
   25. Blog
   ========================================================================== */
.ag-blog { padding-top: 0; }
.ag-blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 70px; }
.ag-post { display: flex; flex-direction: column; border-radius: var(--r2); overflow: hidden; background: var(--soft); min-width: 0; }
.ag-post__img { aspect-ratio: 3 / 2; overflow: hidden; }
.ag-post__img > img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t); }
.ag-post:hover .ag-post__img > img { transform: scale(1.04); }
.ag-post__body { padding: 24px 24px 28px; display: grid; gap: 12px; }
.ag-post__cat { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-head); font-size: 14px; font-weight: 600; color: var(--text); }
.ag-post__cat img { width: 14px; height: 14px; }
.ag-post h3 { font-size: 21px; line-height: 1.2; }
.ag-post p { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ag-blog__more { display: inline-flex; align-items: center; gap: 10px; margin-top: 40px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .033em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--y); padding-bottom: 6px; }
.ag-blog__more img { width: 16px; height: 16px; }

/* ==========================================================================
   26. SEO-Text
   ========================================================================== */
.ag-seo { border-top: 1px solid var(--bd); }
.ag-seo__inner { max-width: 940px; }
.ag-seo__h2 { margin-bottom: 10px; }
.ag-seo h3 { font-size: 25px; margin: 36px 0 12px; }
.ag-seo p + p { margin-top: 16px; }
.ag-seo a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--y); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ==========================================================================
   27. CTA (yellow band)
   ========================================================================== */
.ag-cta { background: var(--y); padding: 80px 0; }
.ag-cta__row { display: flex; justify-content: space-between; align-items: center; gap: 30px 60px; }
.ag-cta__text { max-width: 720px; }
.ag-cta__text p { color: var(--ink); margin-top: 16px; }
.ag-cta__btns { display: flex; flex-wrap: wrap; gap: 14px; flex: 0 0 auto; }

/* ==========================================================================
   Footer
   ========================================================================== */
.ag-foot { background: var(--ink); color: var(--pale); padding: 100px 0 0; }
.ag-foot__in { max-width: calc(var(--w) + 2 * var(--g)); margin: 0 auto; padding: 0 var(--g); }
.ag-foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; }
.ag-foot__brand { display: flex; align-items: center; gap: 12px; }
.ag-foot__brand img { width: 44px; height: 44px; }
.ag-foot__brand strong { display: block; font-family: var(--f-head); font-size: 23px; font-weight: 600; color: var(--white); line-height: 1.1; }
.ag-foot__brand small { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .033em; text-transform: uppercase; color: var(--y); margin-top: 4px; }
.ag-foot__about { margin-top: 22px; font-size: 15px; max-width: 380px; }
.ag-foot__col h4 { font-family: var(--f-head); font-size: 19px; font-weight: 500; color: var(--white); margin-bottom: 16px; }
.ag-foot__links { display: grid; gap: 9px; }
.ag-foot__links a { font-size: 15px; color: var(--pale); }
.ag-foot__links a:hover { color: var(--y); }
.ag-foot__contact { display: grid; gap: 12px; }
.ag-foot__contact li { position: relative; padding-left: 30px; font-size: 15px; }
.ag-foot__contact img { position: absolute; left: 0; top: 3px; width: 18px; height: 18px; }
.ag-foot__contact a:hover { color: var(--y); }
.ag-foot__regions { margin-top: 60px; padding-top: 30px; border-top: 1px solid var(--bd-w); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ag-foot__regions-label { font-family: var(--f-mono); font-size: 12px; letter-spacing: .033em; text-transform: uppercase; color: var(--y); }
.ag-foot__regions-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ag-foot__region { font-size: 14px; border: 1px solid var(--bd-w); border-radius: var(--pill); padding: 6px 13px; }
.ag-foot__region:hover { border-color: var(--y); color: var(--y); }
.ag-foot__bottom { margin-top: 40px; padding: 24px 0 28px; border-top: 1px solid var(--bd-w); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; font-size: 14px; }
.ag-foot__legal { display: flex; gap: 24px; }
.ag-foot__legal a:hover { color: var(--y); }

/* Fixed call button */
.ag-fab { position: fixed; right: 22px; bottom: 22px; z-index: 9999; }
.ag-fab__btn { width: 65px; height: 65px; border-radius: 50%; background: var(--y); display: grid; place-items: center; animation: ag-pulse 2s infinite; }
.ag-fab__btn img { width: 28px; height: 28px; }
@keyframes ag-pulse {
  0% { box-shadow: 0 0 0 0 rgba(252, 217, 66, .6); }
  70% { box-shadow: 0 0 0 18px rgba(252, 217, 66, 0); }
  100% { box-shadow: 0 0 0 0 rgba(252, 217, 66, 0); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .ag-head__in { gap: 26px; }
  .ag-nav { gap: 22px; }
  .ag-hero__title { font-size: 62px; }
  .ag-hero__badge span { font-size: 16px; }
  .ag-h2 { font-size: 44px; }
  .ag-zahlen__num { font-size: 54px; }
  .ag-svc__grid { grid-template-columns: repeat(3, 1fr); }
  .ag-typen__grid { grid-template-columns: repeat(2, 1fr); }
  .ag-plans { gap: 20px; }
  .ag-plan { padding: 26px; }
  .ag-plan__price { font-size: 42px; }
  .ag-garantie__row { grid-template-columns: 1fr; gap: 40px; }
  .ag-foot__grid { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 30px; }
}

@media (max-width: 1024px) {
  :root { --sec: 70px; }
  body { font-size: 15px; }
  .ag-nav, .ag-head__phone { display: none; }
  .ag-burger { display: block; }
  .ag-head__in { height: 72px; }
  html { scroll-padding-top: 80px; }

  .ag-hero { grid-template-columns: 1fr; }
  .ag-hero__text { padding: 64px var(--g) 56px; }
  .ag-hero__title { font-size: 56px; }
  .ag-hero__media { min-height: 0; aspect-ratio: 16 / 10; }
  .ag-hero__badges { grid-template-columns: repeat(2, 1fr); }
  .ag-hero__badge { min-height: 0; }
  .ag-h2 { font-size: 40px; }

  .ag-zahlen__grid { grid-template-columns: repeat(2, 1fr); }
  .ag-zahlen__card { min-height: 220px; }
  .ag-intro__row, .ag-ueber__row, .ag-warum__row, .ag-tueren__row, .ag-kosten__row, .ag-calc__row, .ag-rat__row, .ag-schutz__row, .ag-geo__row, .ag-faq__row, .ag-svc__head, .ag-vn__head { grid-template-columns: 1fr; gap: 30px; }
  .ag-ueber__img--tall { aspect-ratio: 16 / 10; }
  .ag-svc__grid { grid-template-columns: repeat(2, 1fr); }
  .ag-svc__head { margin-bottom: 50px; }
  .ag-warum__img { aspect-ratio: 16 / 10; }
  .ag-ablauf__steps { grid-template-columns: repeat(2, 1fr); gap: 50px 30px; }
  .ag-ablauf__step:nth-child(even) { margin-top: 0; }
  .ag-ablauf__step::after { display: none; }
  .ag-tueren__fig { position: relative; top: 0; }
  .ag-tueren__fig > img { aspect-ratio: 16 / 10; }
  .ag-case { min-height: 560px; }
  .ag-vn__grid { grid-template-columns: repeat(2, 1fr); }
  .ag-plans { grid-template-columns: 1fr; max-width: 640px; margin-left: auto; margin-right: auto; }
  .ag-table { grid-template-columns: 1fr; }
  .ag-kosten__head, .ag-rat__check, .ag-faq__img, .ag-table__side { position: static; }
  .ag-rat__check { order: 2; }
  .ag-geo__map { max-width: 560px; }
  .ag-team__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 25px; }
  .ag-rev__grid { grid-template-columns: repeat(2, 1fr); }
  .ag-faq__img { display: none; }
  .ag-contact__frame { grid-template-columns: 1fr; gap: 40px; padding: 50px 30px; }
  .ag-blog__grid { grid-template-columns: repeat(2, 1fr); }
  .ag-cta__row { flex-direction: column; align-items: flex-start; }
  .ag-foot { padding-top: 70px; }
  .ag-foot__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 30px; }
  .ag-foot__grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .ag-svc__card:nth-child(n+7) { display: none; }
  .ag-svc.is-open .ag-svc__card:nth-child(n+7) { display: flex; }
  .ag-svc__toggle {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 25px;
    min-height: 50px; background: transparent; border: 1px solid var(--y); border-radius: var(--r); color: var(--y);
    font-family: var(--f-mono); font-size: 12px; letter-spacing: .033em; text-transform: uppercase;
  }
  .ag-svc__toggle img { width: 16px; height: 16px; transition: transform var(--t); }
  .ag-svc.is-open .ag-svc__toggle img { transform: rotate(180deg); }

  .ag-case { display: block; min-height: 0; padding: 0; background: var(--ink); }
  .ag-case::before { display: none; }
  .ag-case > .ag-case__bg { position: static; aspect-ratio: 16 / 9; height: auto; }
  .ag-case__stats { grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 22px 22px 0; }
  .ag-case__card { max-width: none; padding: 20px 22px 26px; }
  .ag-vn__grid { grid-template-columns: 1fr; gap: 40px; }
  .ag-kosten__grid { grid-template-columns: 1fr; }
  .ag-tueren__fig figcaption { position: static; border-radius: 0; }
  .ag-tueren__fig { background: var(--ink); }
  .ag-calc__box { grid-template-columns: 1fr; padding: 24px; }
  .ag-fehler__list { grid-template-columns: 1fr; }
  .ag-schutz__grid, .ag-garantie__grid { grid-template-columns: 1fr; gap: 16px; }
  .ag-rev__grid { grid-template-columns: 1fr; }
  .ag-marken__row { justify-content: center; }
  .ag-marken__row li { font-size: 24px; }
  .ag-geo--locked .ag-geo__group summary { cursor: pointer; }
  .ag-geo__group summary img { display: block; }
}

@media (max-width: 480px) {
  :root { --sec: 60px; }
  body { font-size: 14px; }
  .ag-hero__text { padding: 48px var(--g) 44px; }
  .ag-hero__title { font-size: 44px; }
  .ag-hero__title span { font-size: .56em; }
  .ag-hero__btns .ag-btn { width: 100%; }
  .ag-hero__media { aspect-ratio: 4 / 5; }
  .ag-hero__badges { left: 10px; right: 10px; bottom: 10px; gap: 8px; }
  .ag-hero__badge { padding: 10px 11px; border-radius: var(--r); }
  .ag-hero__badge img { width: 14px; height: 14px; margin-bottom: 6px; }
  .ag-hero__badge span { font-size: 13px; }
  .ag-h2 { font-size: 32px; }
  .ag-zahlen__grid { grid-template-columns: 1fr; }
  .ag-zahlen__card { min-height: 0; gap: 26px; }
  .ag-zahlen__num { font-size: 56px; }
  .ag-svc__grid { grid-template-columns: 1fr; }
  .ag-svc__card h3 { margin-top: 70px; font-size: 22px; }
  .ag-svc__ico { width: 70px; height: 70px; }
  .ag-ablauf__steps { grid-template-columns: 1fr; gap: 45px; }
  .ag-ablauf__step { min-height: 0; }
  .ag-ablauf__label { margin-bottom: 26px; }
  .ag-warum__list li { padding-left: 44px; }
  .ag-warum__list img { width: 28px; height: 28px; }
  .ag-warum__list h3, .ag-tueren__item h3 { font-size: 22px; }
  .ag-case__stats { grid-template-columns: 1fr 1fr; }
  .ag-case__stats dt { font-size: 24px; }
  .ag-plan { padding: 24px 20px; }
  .ag-plan__price { font-size: 38px; }
  .ag-table__t th, .ag-table__t td { padding: 12px 14px; }
  .ag-table__t td { font-size: 14px; }
  .ag-table__side { padding: 24px 20px; }
  .ag-typen__grid { grid-template-columns: 1fr; }
  .ag-rat__check { padding: 30px 22px; }
  .ag-rat__case { grid-template-columns: 1fr; gap: 14px; }
  .ag-team__grid { grid-template-columns: 1fr; }
  .ag-member > img { max-width: 420px; }
  .ag-faq__item summary { font-size: 17px; }
  .ag-faq__item p { padding-right: 0; }
  .ag-contact__frame { padding: 36px 18px; }
  .ag-contact__panel { padding: 22px 18px; }
  .ag-form__row { grid-template-columns: 1fr; }
  .ag-blog__grid { grid-template-columns: 1fr; }
  .ag-cta { padding: 60px 0; }
  .ag-cta__btns, .ag-cta__btns .ag-btn { width: 100%; }
  .ag-fab__btn { width: 55px; height: 55px; }
  .ag-fab__btn img { width: 24px; height: 24px; }
  .ag-fab { right: 14px; bottom: 14px; }
  .ag-foot__grid { gap: 32px 20px; }
  .ag-foot__links a, .ag-foot__contact li { font-size: 14px; }
}

@media (max-width: 375px) {
  :root { --g: 16px; }
  .ag-brand__txt strong { font-size: 18px; }
  .ag-hero__title { font-size: 38px; }
  .ag-h2 { font-size: 29px; }
  .ag-hero__badge span { font-size: 12px; }
  .ag-zahlen__num { font-size: 50px; }
  .ag-plan__price { font-size: 34px; }
  .ag-case__stats { gap: 14px 12px; padding: 18px 16px 0; }
  .ag-case__card { padding: 18px 16px 22px; }
  .ag-calc__out strong { font-size: 28px; }
  .ag-foot__grid { grid-template-columns: 1fr 1fr; }
}