:root{
  --bg:#F1F3F9; --bg2:#FFFFFF; --panel:#FFFFFF;
  --ink:#1C244B; --mut:#565F87; --line:rgba(28,36,75,.14);
  --accent:#0090D0; --accent-soft:#3FB0E6; --accent-ink:#0A6CA0;
  --cta:#7DBD24; --cta-soft:#97D43F; --cta-ink:#15230A;
  --blue:#0B5FA5; --blue-ink:#094E88; --blue-soft:#3E97DF;
  --sand:#E5E9F5;
  --g-hi:rgba(255,255,255,.80); --g-lo:rgba(255,255,255,.44);
  --edge:rgba(255,255,255,.92); --iring:rgba(28,36,75,.07);
  --shadow:0 18px 46px rgba(28,36,75,.14); --shadow-sm:0 8px 22px rgba(28,36,75,.11);
  --ring-grad:rgba(28,36,75,.16);
  --chipbg:rgba(28,36,75,.05);
  --photo-glass:linear-gradient(135deg,rgba(255,255,255,.64),rgba(255,255,255,.36));
  --photo-glass-edge:rgba(255,255,255,.62); --on-photo:#0E1330;
  /* Fehlerfarbe der Formulare (Etappe 1) und das Pfeilchen der Auswahlfelder.
     Das Pfeilchen steckt als Datenadresse im CSS, damit kein zusaetzliches
     Bild geladen wird und es die Farbe des Themas mitnimmt. */
  --bad:#C6392F;
  --caret:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23565F87' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
html[data-theme="dark"] .am-sec.am-sec, html[data-theme="dark"] body:has(.am-sec){
  --bg:#0B0F26; --bg2:#1C244B; --panel:#1C244B;
  --ink:#E8ECF9; --mut:#A3AACB; --line:rgba(255,255,255,.12);
  --accent:#3FB6EC; --accent-soft:#6FCAF2; --accent-ink:#8FD6F4;
  --cta:#8ECB2E; --cta-soft:#A9DC52; --cta-ink:#0F1C07;
  --blue:#3E97DF; --blue-ink:#7CBEEE; --blue-soft:#3E97DF;
  --sand:#232C58;
  --g-hi:rgba(255,255,255,.07); --g-lo:rgba(255,255,255,.028);
  --edge:rgba(255,255,255,.16); --iring:rgba(255,255,255,.05);
  --shadow:0 18px 50px rgba(0,0,0,.5); --shadow-sm:0 8px 22px rgba(0,0,0,.4);
  --ring-grad:rgba(255,255,255,.14);
  --chipbg:rgba(255,255,255,.05);
  --photo-glass:linear-gradient(135deg,rgba(14,19,48,.62),rgba(14,19,48,.36));
  --photo-glass-edge:rgba(255,255,255,.18); --on-photo:#E8ECF9;
  --bad:#FF8177;
  --caret:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3AACB' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
.am-sec.am-sec, .am-sec.am-sec *{margin:0;padding:0;box-sizing:border-box}
.am-sec.am-sec{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){.am-sec.am-sec{scroll-behavior:auto}}
body:has(.am-sec){background:var(--bg)}
.am-sec.am-sec{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--ink);line-height:1.62;-webkit-font-smoothing:antialiased;background:transparent}
.am-sec.am-sec a{color:inherit}
.am-sec.am-sec img{display:block;max-width:100%;height:auto}
.am-sec.am-sec .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.am-sec.am-sec .g{position:relative;background:linear-gradient(135deg,var(--g-hi),var(--g-lo));box-shadow:inset 0 1px 0 var(--edge),inset 0 0 0 1px var(--iring),var(--shadow);border-radius:22px}
.am-sec.am-sec .ring::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--ring-grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1}
.am-sec.am-sec .ring.accent::before{background:var(--accent);padding:2px}
.am-sec.am-sec .ring.blue::before{background:var(--blue);padding:2px}
@supports (corner-shape:squircle){.am-sec.am-sec .g{corner-shape:squircle}
.am-sec.am-sec .ring::before{corner-shape:inherit}}
.am-sec.am-sec .glassp{position:relative;background:var(--photo-glass);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);border:1px solid var(--photo-glass-edge);box-shadow:var(--shadow);border-radius:24px;color:var(--on-photo)}
.am-sec.am-sec .rv{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.am-sec.am-sec .rv.in{opacity:1;transform:none}
.am-sec.am-sec .rv.d1{transition-delay:.08s}
.am-sec.am-sec .rv.d2{transition-delay:.16s}
.am-sec.am-sec .rv.d3{transition-delay:.24s}
.am-sec.am-sec .rv.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.am-sec.am-sec .rv{transition:none}}
.am-sec.am-sec svg.ic{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-.12em}
/* ===== Navigation: getrennte Glas-Inseln (Logo+Links · Theme · CTA) ===== */

.am-sec.am-sec .nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:9px;white-space:nowrap;max-width:calc(100vw - 24px)}
.am-sec.am-sec .island{display:flex;align-items:center;gap:3px;padding:7px 8px 7px 7px;border-radius:999px;background:var(--photo-glass);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border:1px solid var(--photo-glass-edge);box-shadow:var(--shadow-sm)}
/* Der Abstand rechts vom Logo waechst beim Scrollen mit. Das Logo ist sehr
   breit (Verhaeltnis rund 9,9:1), zwei Pixel mehr Hoehe machen es zwanzig
   Pixel breiter. Bliebe der Abstand fest, ruecke das ".com" am Logoende an
   "Solutions" heran und die Leiste wirkt gedraengt. */

.am-sec.am-sec .nav .brand{display:flex;align-items:center;text-decoration:none;padding:3px 21px 3px 6px;flex:none}
/* Das Logo waechst beim Scrollen ueber "transform", nicht mehr ueber Hoehe und
   Abstand. Das hat zwei Gruende. Erstens musste der Browser die Zeichnung bei
   jedem Bild in einer neuen Groesse neu zeichnen; eine Skalierung uebernimmt
   dagegen die Grafikkarte. Zweitens, und das war das eigentliche Haken: das
   Logo wurde rund 20px breiter, davon wurde die ganze Leiste breiter, und weil
   sie mittig sitzt, rutschte sie dabei 13px nach links. Das Logo wanderte also
   nach links, waehrend es wuchs. Jetzt bleibt jedes Kaestchen, wie es ist, und
   das Logo waechst an seinem Platz.
   Die Zeichnung liegt immer in der grossen Groesse vor und wird in Ruhe
   verkleinert (Faktor 0,905 = die bisherigen 19px von 21px). So wird sie nie
   hochgerechnet und bleibt in jedem Zustand scharf. */

.am-sec.am-sec .brand-logo{height:21px;width:auto;max-width:none;flex:none;display:block;
  transform:scale(.905);transform-origin:left center;
  transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.am-sec.am-sec .logo-white{display:none}
html[data-theme="dark"] .am-sec.am-sec .logo-ink{display:none}
html[data-theme="dark"] .am-sec.am-sec .logo-white{display:block}
.am-sec.am-sec .nav.scrolled .brand-logo{transform:none}
/* Schmale Fenster: die Menuepunkte sind ausgeblendet, rechts steht nur noch
   das Burger-Feld. Dort ist der Zusatzabstand nur verschenkter Platz. */

@media (max-width:1100px){.am-sec.am-sec .nav .brand{padding-right:8px}}
/* Auf dem Handy waechst das Logo nicht mit; dort zaehlt jeder Millimeter, und
   die kleinere Zeichnung soll in beiden Zustaenden gleich gross bleiben. */

@media (max-width:520px){.am-sec.am-sec .brand-logo,.am-sec.am-sec .nav.scrolled .brand-logo{height:17px;transform:none}}
@media (max-width:380px){.am-sec.am-sec .brand-logo,.am-sec.am-sec .nav.scrolled .brand-logo{height:16px}}
.am-sec.am-sec .nav .lnk{font-size:12.5px;font-weight:600;color:var(--on-photo);opacity:.82;text-decoration:none;padding:7px 10px;border-radius:999px;transition:opacity .2s,background .2s;line-height:1.2}
.am-sec.am-sec .nav .lnk:hover{opacity:1;background:rgba(255,255,255,.24)}
.am-sec.am-sec .nav .lnk.active{opacity:1;background:rgba(255,255,255,.32)}
.am-sec.am-sec .nav .grp{position:relative;display:flex}
.am-sec.am-sec .nav .grp>.lnk{cursor:pointer}
.am-sec.am-sec .nav .grp::after{content:'';position:absolute;left:0;right:0;top:28px;height:18px}
.am-sec.am-sec .nav .menu{position:absolute;top:42px;left:0;display:none;flex-direction:column;gap:1px;padding:8px;border-radius:16px;min-width:248px;background:var(--bg2);box-shadow:var(--shadow);border:1px solid var(--line)}
.am-sec.am-sec .nav .grp:hover .menu,.am-sec.am-sec .nav .grp:focus-within .menu,.am-sec.am-sec .nav .grp.open .menu{display:flex}
.am-sec.am-sec .nav .menu a{font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;padding:9px 12px;border-radius:9px;display:flex;align-items:center;gap:10px}
.am-sec.am-sec .nav .menu a .mi{width:16px;height:16px;color:var(--accent);flex:none}
.am-sec.am-sec .nav .menu a:hover{background:var(--chipbg)}
.am-sec.am-sec .nav .menu a.active{color:var(--accent-ink);background:var(--chipbg)}
.am-sec.am-sec .nav .menu .mdiv{height:1px;background:var(--line);margin:6px 4px}
/* Zwischenueberschrift im Aufklappmenue (Bestand: die Gruppe "White Papers") */

.am-sec.am-sec .nav .menu .mlbl{display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut);padding:10px 12px 4px;
  border-top:1px solid var(--line);margin:6px 4px 0}
.am-sec.am-sec .nav .menu .mlbl:first-child{border-top:0;margin-top:0;padding-top:4px}
/* Login: the last group in the bar, so its menu opens towards the left and
   stays under the bar. Each region names where its data lives. */

.am-sec.am-sec .nav .grp.login .menu{left:auto;right:0;min-width:236px}
.am-sec.am-sec .nav .menu .mreg{display:flex;flex-direction:column;line-height:1.25}
.am-sec.am-sec .nav .menu .mreg small{font-size:11.5px;font-weight:500;color:var(--mut);margin-top:2px}
.am-sec.am-sec .nav .navcta{font-size:13px;font-weight:800;letter-spacing:.01em;color:var(--cta-ink);background:var(--cta);border-radius:999px;padding:13px 18px;text-decoration:none;box-shadow:0 8px 20px rgba(125,189,36,.42),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .2s,box-shadow .2s}
.am-sec.am-sec .nav .navcta:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(125,189,36,.54),inset 0 1px 0 rgba(255,255,255,.3)}
.am-sec.am-sec .nav button.tg{cursor:pointer;border:1px solid var(--photo-glass-edge);background:var(--photo-glass);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);color:var(--on-photo);border-radius:999px;width:44px;height:44px;font-size:15px;line-height:1;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,background .2s}
.am-sec.am-sec .nav button.tg:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(21,32,26,.18);background:rgba(255,255,255,.3)}
.am-sec.am-sec .mnav{display:none;position:relative}
.am-sec.am-sec .mnav summary{list-style:none;cursor:pointer;width:34px;height:34px;border-radius:999px;border:1px solid var(--photo-glass-edge);background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:var(--on-photo)}
.am-sec.am-sec .mnav summary::-webkit-details-marker{display:none}
.am-sec.am-sec .mnav .sheet{position:absolute;right:0;top:46px;display:none;flex-direction:column;gap:1px;padding:10px;border-radius:18px;width:max-content;min-width:240px;max-width:calc(100vw - 20px);max-height:78vh;overflow:auto;background:var(--bg2);box-shadow:var(--shadow);border:1px solid var(--line)}
.am-sec.am-sec .mnav[open] .sheet{display:flex}
.am-sec.am-sec .mnav .sheet a{font-size:14px;font-weight:600;text-decoration:none;color:var(--ink);padding:9px 12px;border-radius:10px}
.am-sec.am-sec .mnav .sheet a.sub{padding-left:24px;font-size:13px;color:var(--mut)}
.am-sec.am-sec .mnav .sheet .lbl{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);padding:10px 12px 4px}
.am-sec.am-sec .mnav .sheet a:hover{background:var(--chipbg)}
.am-sec.am-sec .mnav .sheet a.cta{color:var(--cta-ink);background:var(--cta);text-align:center;margin-top:6px;font-weight:800}
@media (max-width:1100px){.am-sec.am-sec .nav .lnk,.am-sec.am-sec .nav .grp{display:none}
.am-sec.am-sec .mnav{display:block}}
@media (max-width:600px){.am-sec.am-sec .nav .navcta{display:none}}
/* Phones: the sheet hung from the burger's right edge and grew leftwards to
   its longest entry, 293px. At 390px that is 15px past the left edge of the
   screen, at 360px 35px: the first letters and the rounded corner were cut
   off. Here it hangs from the whole bar instead (the .nav is its containing
   block, being fixed and transformed), exactly as wide as the bar, and long
   entries wrap. */

@media (max-width:600px){.am-sec.am-sec .mnav{position:static}
.am-sec.am-sec .mnav .sheet{left:0;right:0;top:calc(100% + 10px);width:auto;min-width:0;max-width:none;white-space:normal}}
@media (max-width:470px){.am-sec.am-sec .nav{gap:7px}}
/* ===== Hero (Startseite) ===== */

.am-sec.am-sec .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.am-sec.am-sec .hero .bg{position:absolute;inset:0;z-index:-2}
.am-sec.am-sec .hero .bg img{width:100%;height:100%;object-fit:cover}
.am-sec.am-sec .hero .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,15,38,.52) 0%,rgba(11,15,38,.22) 36%,rgba(11,15,38,.36) 66%,rgba(11,15,38,.8) 100%)}
/* ----- Home-Hero Diashow (Crossfade + Ken-Burns + Scroll-Cue, BODE-Stil) ----- */

.am-sec.am-sec .hslides{position:absolute;inset:0;z-index:-2}
.am-sec.am-sec .hslides .hslide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease-in-out;will-change:opacity}
.am-sec.am-sec .hslides .hslide.active{opacity:1}
.am-sec.am-sec .hslides .hslide img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);filter:saturate(1.22) contrast(1.08) brightness(1.08)}
@media (prefers-reduced-motion:no-preference){.am-sec.am-sec .hslides .hslide.active.kb-a img{animation:heroKBa 11s ease-out both}
.am-sec.am-sec .hslides .hslide.active.kb-b img{animation:heroKBb 11s ease-out both}}
@keyframes heroKBa{from{transform:scale(1.16) translate3d(2%,1.5%,0)}to{transform:scale(1.03) translate3d(0,0,0)}}
@keyframes heroKBb{from{transform:scale(1.16) translate3d(-2%,-1.5%,0)}to{transform:scale(1.03) translate3d(0,0,0)}}
.am-sec.am-sec .hslides::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(11,15,38,.30) 0%,rgba(11,15,38,.08) 40%,rgba(11,15,38,.20) 72%,rgba(11,15,38,.56) 100%)}
.am-sec.am-sec .hctrl{position:absolute;right:26px;bottom:26px;z-index:4;display:flex;align-items:center;gap:14px;pointer-events:none}
.am-sec.am-sec .hcap{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.92);text-shadow:0 2px 8px rgba(0,0,0,.55);transition:opacity .26s}
.am-sec.am-sec .hdots{display:flex;gap:9px;pointer-events:auto}
.am-sec.am-sec .hdots button{width:9px;height:9px;padding:0;border:none;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.5);box-shadow:0 1px 5px rgba(0,0,0,.35);transition:background .25s,width .25s}
.am-sec.am-sec .hdots button:hover{background:rgba(255,255,255,.85)}
.am-sec.am-sec .hdots button.active{background:var(--accent-soft);width:26px;border-radius:6px}
.am-sec.am-sec .hscroll{position:absolute;left:50%;transform:translateX(-50%);bottom:24px;z-index:4;width:30px;height:48px;border-radius:16px;border:2px solid rgba(255,255,255,.62);background:rgba(255,255,255,.07);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding-top:8px;cursor:pointer;transition:border-color .2s,background .2s}
.am-sec.am-sec .hscroll:hover{border-color:#fff;background:rgba(255,255,255,.16)}
.am-sec.am-sec .hscroll span{display:block;width:4px;height:9px;border-radius:2px;background:#fff}
@media (prefers-reduced-motion:no-preference){.am-sec.am-sec .hscroll span{animation:heroScroll 1.6s ease-in-out infinite}}
@keyframes heroScroll{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{transform:translateY(0);opacity:0}}
@media (max-width:680px){.am-sec.am-sec .hscroll{display:none}
.am-sec.am-sec .hctrl{right:16px;bottom:16px}}
.am-sec.am-sec .hero-inner{position:relative;z-index:2;width:100%;padding:120px 0 56px}
.am-sec.am-sec .hero-inner.home{padding-bottom:108px}
@media (max-width:680px){.am-sec.am-sec .hero-inner.home{padding-bottom:56px}}
.am-sec.am-sec .hero-panel{max-width:680px;padding:34px 38px 36px}
.am-sec.am-sec .eyebrow{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:14px;display:flex;align-items:center;gap:9px}
.am-sec.am-sec .eyebrow::before{content:'';width:26px;height:2px;background:var(--accent);border-radius:2px}
/* Eyebrow auf hellem Glas-Panel: tiefes, gut lesbares Blau; im Dark-Theme heller */

.am-sec.am-sec .on-photo .eyebrow,.am-sec.am-sec .hero .eyebrow,.am-sec.am-sec .band .eyebrow{color:var(--accent-ink)}
html[data-theme=dark] .am-sec.am-sec .on-photo .eyebrow,html[data-theme=dark] .am-sec.am-sec .hero .eyebrow,html[data-theme=dark] .am-sec.am-sec .band .eyebrow{color:var(--accent-soft)}
.am-sec.am-sec .hero h1{font-size:clamp(34px,5.4vw,60px);line-height:1.03;font-weight:900;letter-spacing:-.025em;margin-bottom:16px}
.am-sec.am-sec .hero h1 .acc{color:var(--accent-soft)}
.am-sec.am-sec .hero-panel .lead{font-size:17px;max-width:54ch;opacity:.94}
.am-sec.am-sec .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.am-sec.am-sec .btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:800;font-size:14.5px;border-radius:999px;padding:13px 24px;transition:transform .2s,box-shadow .2s;cursor:pointer;border:0}
.am-sec.am-sec .btn .ic{width:17px;height:17px}
.am-sec.am-sec .btn:hover{transform:translateY(-2px)}
.am-sec.am-sec .btn-p{background:var(--cta);color:var(--cta-ink);box-shadow:0 10px 26px rgba(125,189,36,.42)}
.am-sec.am-sec .btn-p:hover{box-shadow:0 14px 32px rgba(125,189,36,.54)}
.am-sec.am-sec .btn-b{background:var(--blue);color:#fff;box-shadow:0 10px 26px rgba(12,113,195,.36)}
.am-sec.am-sec .btn-g{background:var(--accent);color:#fff;box-shadow:0 10px 26px rgba(0,144,208,.3)}
.am-sec.am-sec .btn-s{border:1px solid var(--photo-glass-edge);color:var(--on-photo);background:rgba(255,255,255,.2)}
.am-sec.am-sec .btn-o{border:1px solid var(--line);color:var(--ink);background:var(--chipbg)}
@media (max-width:700px){.am-sec.am-sec .hero-panel{padding:26px 22px}
.am-sec.am-sec .hero{min-height:auto}}
/* ===== Pagehero (Unterseiten) ===== *//* Francois, 24.09.2026: as much air under the menu as under the panel, on any
   screen height, so the panel sits in the middle of the photo, not at its foot. */

.am-sec.am-sec .pagehero{position:relative;min-height:52vh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.am-sec.am-sec .pagehero .bg{position:absolute;inset:0;z-index:-2}
.am-sec.am-sec .pagehero .bg img{width:100%;height:100%;object-fit:cover}
.am-sec.am-sec .pagehero .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,15,38,.52) 0%,rgba(11,15,38,.2) 50%,rgba(11,15,38,.7) 100%)}
.am-sec.am-sec .pagehero-inner{position:relative;z-index:2;width:100%;padding:110px 0 48px}
.am-sec.am-sec .pagehero-panel{max-width:760px;padding:28px 34px 30px}
.am-sec.am-sec .pagehero .badge{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--accent);border-radius:999px;padding:6px 13px;margin-bottom:14px}
.am-sec.am-sec .pagehero .badge.blue{color:#fff;background:var(--blue)}
.am-sec.am-sec .pagehero .badge.green{color:var(--cta-ink);background:var(--cta)}
.am-sec.am-sec .pagehero .badge svg{width:14px;height:14px}
.am-sec.am-sec .pagehero h1{font-size:clamp(30px,4.8vw,50px);line-height:1.04;font-weight:900;letter-spacing:-.025em;margin-bottom:10px}
.am-sec.am-sec .pagehero p{opacity:.94;font-size:16.5px;max-width:62ch}
.am-sec.am-sec .crumb{font-size:12px;font-weight:700;letter-spacing:.04em;opacity:.82;margin-bottom:12px}
.am-sec.am-sec .crumb a{text-decoration:none;opacity:.85}
.am-sec.am-sec .pagehero.has-fig{min-height:64vh}
.am-sec.am-sec .pagehero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:34px;align-items:center}
.am-sec.am-sec .pagehero-grid .pagehero-panel{max-width:none}
.am-sec.am-sec .herofig{position:relative;display:flex;justify-content:center}
.am-sec.am-sec .herofig img{width:100%;max-width:560px;height:auto;display:block;border-radius:14px;
  filter:drop-shadow(0 30px 60px rgba(11,15,38,.5))}
/* On narrow screens the picture stands under the panel, still in the head. */

@media (max-width:920px){.am-sec.am-sec .pagehero-grid{grid-template-columns:1fr;gap:22px}
.am-sec.am-sec .pagehero.has-fig{min-height:52vh}}
/* ===== Sektionen ===== */

.am-sec.am-sec section{padding:84px 0;position:relative}
.am-sec.am-sec .alt{background:var(--bg2)}
.am-sec.am-sec.sand{background:var(--sand)}
.am-sec.am-sec .shead{max-width:700px;margin-bottom:46px}
.am-sec.am-sec .shead.center{margin-left:auto;margin-right:auto;text-align:center}
.am-sec.am-sec .shead.center .eyebrow{justify-content:center}
.am-sec.am-sec .shead .eyebrow{margin-bottom:12px}
.am-sec.am-sec h2{font-size:clamp(27px,3.6vw,40px);font-weight:900;letter-spacing:-.025em;line-height:1.12;margin-bottom:14px}
/* Der Bestand setzt manche Ueberschriften als ganze Saetze. In Schaugroesse
   fuellen die einen halben Bildschirm; eine Stufe kleiner bleiben sie
   Ueberschrift, ohne den Abschnitt zu erschlagen. */

.am-sec.am-sec .shead.long{max-width:880px}
.am-sec.am-sec .shead.long h2{font-size:clamp(23px,2.5vw,31px)}
.am-sec.am-sec .shead p{color:var(--mut);font-size:16.5px}
.am-sec.am-sec h3{font-size:20px;font-weight:800;letter-spacing:-.01em;margin-bottom:8px}
/* Kartenraster (Foto oben) */

.am-sec.am-sec .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.am-sec.am-sec .cards2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.am-sec.am-sec .cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:980px){.am-sec.am-sec .cards4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:920px){.am-sec.am-sec .cards3,.am-sec.am-sec .cards2{grid-template-columns:1fr}}
@media (max-width:560px){.am-sec.am-sec .cards4{grid-template-columns:1fr}}
.am-sec.am-sec .card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.am-sec.am-sec .card .ph{aspect-ratio:16/10;overflow:hidden;background:var(--sand);position:relative}
.am-sec.am-sec .card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.am-sec.am-sec .card:hover .ph img{transform:scale(1.05)}
.am-sec.am-sec .card .bd{padding:24px 26px 28px;display:flex;flex-direction:column;gap:12px;flex:1}
.am-sec.am-sec .card .kick{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);display:flex;align-items:center;gap:8px}
.am-sec.am-sec .card p{color:var(--mut);font-size:14.5px}
.am-sec.am-sec .card .more{margin-top:auto;font-size:13.5px;font-weight:800;color:var(--accent-ink);text-decoration:none;display:inline-flex;align-items:center;gap:7px;padding-top:4px}
.am-sec.am-sec .card .more svg{width:15px;height:15px;transition:transform .2s}
.am-sec.am-sec .card .more:hover svg{transform:translateX(3px)}
/* ----- Solutions-Karten: Icon-gefuehrt statt Foto (keine Stockbild-Wiederholung) ----- */

.am-sec.am-sec .scards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:1040px){.am-sec.am-sec .scards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.am-sec.am-sec .scards{grid-template-columns:1fr}}
.am-sec.am-sec .scard{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:13px;padding:28px 26px 24px;isolation:isolate}
.am-sec.am-sec .scard::before{content:'';position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--ca),var(--cb));opacity:.95}
.am-sec.am-sec .scard .corner{position:absolute;right:-46px;top:-46px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--ca),transparent 68%);opacity:.12;pointer-events:none;z-index:-1;transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.am-sec.am-sec .scard:hover .corner{opacity:.2;transform:scale(1.15)}
.am-sec.am-sec .scard .sico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--ca),var(--cb));box-shadow:0 12px 26px -10px var(--ca);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.am-sec.am-sec .scard:hover .sico{transform:translateY(-3px) rotate(-4deg)}
.am-sec.am-sec .scard .sico svg{width:26px;height:26px;stroke-width:2}
.am-sec.am-sec .scard .kick{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ca);display:flex;align-items:center;gap:7px}
.am-sec.am-sec .scard h3{font-size:19px;line-height:1.18;letter-spacing:-.01em}
.am-sec.am-sec .scard p{color:var(--mut);font-size:14.5px;line-height:1.55;flex:1}
.am-sec.am-sec .scard .more{margin-top:4px;font-size:13.5px;font-weight:800;color:var(--ca);text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.am-sec.am-sec .scard .more svg{width:15px;height:15px;transition:transform .2s}
.am-sec.am-sec .scard:hover .more svg{transform:translateX(3px)}
.am-sec.am-sec .feat{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:2px}
.am-sec.am-sec .feat li{position:relative;padding-left:26px;font-size:14.5px;color:var(--mut)}
/* Verweise in Aufzaehlungen sichtbar machen, ohne die Zeile zu ueberfaerben. */

.am-sec.am-sec .feat li a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);
  text-underline-offset:3px;text-decoration-thickness:1.5px}
.am-sec.am-sec .feat li a:hover{color:var(--accent)}
.am-sec.am-sec .feat li::before{content:'';position:absolute;left:0;top:7px;width:13px;height:13px;border-radius:4px;background:var(--accent);opacity:.92}
.am-sec.am-sec .feat.check li::before{content:'';width:14px;height:14px;border-radius:50%;background:var(--accent);top:6px}
.am-sec.am-sec .feat.blue li::before{background:var(--blue)}
/* Icon-Karten (Module/Features ohne Foto) */

.am-sec.am-sec .icards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:920px){.am-sec.am-sec .icards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.am-sec.am-sec .icards{grid-template-columns:1fr}}
.am-sec.am-sec .icard{padding:26px 26px 26px;display:flex;flex-direction:column;gap:11px}
.am-sec.am-sec .icard .ich{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent-soft),var(--accent));box-shadow:0 8px 20px rgba(0,144,208,.34);flex:none}
.am-sec.am-sec .icard .ich svg{width:25px;height:25px;color:#fff}
.am-sec.am-sec .icard h3{font-size:18px;margin-bottom:2px}
.am-sec.am-sec .icard p{color:var(--mut);font-size:14px}
.am-sec.am-sec .icard .more{margin-top:auto;font-size:13px;font-weight:800;color:var(--accent-ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px;padding-top:6px}
.am-sec.am-sec .icard .more svg{width:14px;height:14px;transition:transform .2s}
.am-sec.am-sec .icard .more:hover svg{transform:translateX(3px)}
.am-sec.am-sec .icard.b .ich{background:linear-gradient(135deg,var(--blue-soft),var(--blue));box-shadow:0 8px 20px rgba(12,113,195,.3)}
.am-sec.am-sec .icard.b .more{color:var(--blue-ink)}
/* ---- Fallstudien: Eckdaten-Band + Anriss-Karten ---- */

.am-sec.am-sec .factband{padding:26px 0 6px}
.am-sec.am-sec .factgrid{display:flex;align-items:center;gap:26px;padding:20px 26px;border-radius:20px;background:var(--bg2);border:1px solid var(--line)}
@media (max-width:760px){.am-sec.am-sec .factgrid{flex-direction:column;align-items:flex-start;gap:16px;padding:18px}}
.am-sec.am-sec .factlogo{flex:none;width:118px;display:flex;align-items:center;justify-content:center}
.am-sec.am-sec .factlogo img{max-height:62px;max-width:100%;width:auto;object-fit:contain}
.am-sec.am-sec .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px 26px;flex:1;min-width:0}
.am-sec.am-sec .fact{display:flex;flex-direction:column;gap:3px;min-width:0}
.am-sec.am-sec .fact .fk{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}
.am-sec.am-sec .fact .fv{font-size:14px;color:var(--ink);line-height:1.45}
.am-sec.am-sec .casegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:980px){.am-sec.am-sec .casegrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.am-sec.am-sec .casegrid{grid-template-columns:1fr}}
.am-sec.am-sec .casecard{padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;position:relative}
.am-sec.am-sec .caselogo{height:52px;display:flex;align-items:center}
.am-sec.am-sec .caselogo img{max-height:52px;max-width:170px;width:auto;object-fit:contain}
.am-sec.am-sec .caseflag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
.am-sec.am-sec .caseflag svg{width:13px;height:13px;color:var(--accent)}
.am-sec.am-sec .casecard h3{font-size:19px;line-height:1.25;margin:0}
.am-sec.am-sec .casecard .who{font-size:13px;color:var(--accent-ink);font-weight:700;margin:0}
.am-sec.am-sec .casecard .excerpt{color:var(--mut);font-size:14px;line-height:1.6}
.am-sec.am-sec .chips.small{gap:6px}
.am-sec.am-sec .chips.small .chip{font-size:11.5px;padding:5px 10px}
.am-sec.am-sec .casecard .more{margin-top:auto;font-size:13px;font-weight:800;color:var(--accent-ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px;padding-top:8px}
.am-sec.am-sec .casecard .more svg{width:14px;height:14px;transition:transform .2s}
.am-sec.am-sec .casecard:hover .more svg{transform:translateX(3px)}
/* ---- Kundenverzeichnis (Vorlage T4): Suchfeld, Laenderfilter, Kachelwand ---- */

.am-sec.am-sec .cwrap{margin-top:8px}
.am-sec.am-sec .cbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:18px}
.am-sec.am-sec .csearch{position:relative;flex:1 1 280px;min-width:0}
.am-sec.am-sec .csearch svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--mut);pointer-events:none}
.am-sec.am-sec .csearch input{width:100%;height:46px;padding:0 16px 0 40px;border-radius:13px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);font:inherit;font-size:14.5px}
.am-sec.am-sec .csearch input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,144,208,.16)}
.am-sec.am-sec .cselect{position:relative}
.am-sec.am-sec .cselect select{height:46px;padding:0 38px 0 16px;border-radius:13px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);font:inherit;font-size:14.5px;appearance:none;cursor:pointer}
.am-sec.am-sec .cselect select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,144,208,.16)}
.am-sec.am-sec .cselect svg{position:absolute;right:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--mut);pointer-events:none}
.am-sec.am-sec .ccount{font-size:13px;font-weight:700;color:var(--mut);white-space:nowrap}
.am-sec.am-sec .ccount b{color:var(--accent-ink)}
.am-sec.am-sec .clientwall{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:1080px){.am-sec.am-sec .clientwall{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.am-sec.am-sec .clientwall{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.am-sec.am-sec .clientwall{grid-template-columns:1fr}}
.am-sec.am-sec .corg{padding:13px 15px;border-radius:13px;background:var(--bg2);border:1px solid var(--line);display:flex;flex-direction:column;gap:3px;min-width:0}
.am-sec.am-sec .corg .cn{font-size:13.5px;font-weight:700;line-height:1.35;color:var(--ink)}
.am-sec.am-sec .corg .cc{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.am-sec.am-sec .corg .cc svg{width:12px;height:12px;color:var(--accent);flex:none}
.am-sec.am-sec .corg.hide{display:none}
.am-sec.am-sec .cempty{display:none;padding:26px;text-align:center;color:var(--mut);font-size:14px;border:1px dashed var(--line);border-radius:14px}
.am-sec.am-sec .cempty.on{display:block}
/* ---- Wissensliste (Vorlage T3): Fachlinks, Dateien, Aufzeichnungen ---- */

.am-sec.am-sec .libwrap{margin-top:6px}
.am-sec.am-sec .libbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}
.am-sec.am-sec .libbar .csearch{flex:1 1 260px}
.am-sec.am-sec .libchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.am-sec.am-sec .lchip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;background:var(--chipbg);border:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--ink);cursor:pointer;line-height:1.2}
.am-sec.am-sec .lchip b{font-size:11px;font-weight:800;color:var(--mut)}
.am-sec.am-sec .lchip:hover{border-color:var(--accent)}
.am-sec.am-sec .lchip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.am-sec.am-sec .lchip.on b{color:rgba(255,255,255,.8)}
.am-sec.am-sec .libglabel{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);align-self:center;margin-right:2px}
.am-sec.am-sec .libgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
@media (max-width:1100px){.am-sec.am-sec .libgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.am-sec.am-sec .libgrid{grid-template-columns:1fr}}
.am-sec.am-sec .lcard{padding:20px 21px;border-radius:15px;background:var(--bg2);border:1px solid var(--line);display:flex;flex-direction:column;gap:9px;min-width:0}
.am-sec.am-sec .lcard.hide{display:none}
.am-sec.am-sec .lcard:hover{border-color:var(--accent)}
.am-sec.am-sec .lcard .lmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.am-sec.am-sec .lcard .ltag{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink);background:var(--chipbg);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.am-sec.am-sec .lcard .lyear{color:#fff;background:var(--accent);border-color:var(--accent)}
.am-sec.am-sec .lcard h3{font-size:15px;line-height:1.42;margin:0;font-weight:700}
.am-sec.am-sec .lcard h3 a{color:var(--ink);text-decoration:none;display:inline}
.am-sec.am-sec .lcard h3 a:hover{color:var(--accent-ink)}
.am-sec.am-sec .lcard p{font-size:13.5px;line-height:1.6;color:var(--mut);margin:0}
.am-sec.am-sec .lcard .lgo{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:4px;font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--accent-ink);text-decoration:none}
.am-sec.am-sec .lcard .lgo svg{width:14px;height:14px}
.am-sec.am-sec .lcard .lgo:hover{text-decoration:underline}
/* Gesperrter Zustand: Datei vorhanden, Zugang passwortgeschuetzt */

.am-sec.am-sec .lcard.locked{background:var(--chipbg)}
.am-sec.am-sec .lcard .llock{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:4px;font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--mut)}
.am-sec.am-sec .lcard .llock svg{width:14px;height:14px}
.am-sec.am-sec .lcard .lsub{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--mut);font-weight:600}
.am-sec.am-sec .lcard .lsub b{color:var(--ink);font-weight:700}
/* ---- Reiter (Lehrvideos, Musterberichte) ---- */

.am-sec.am-sec .tabnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;justify-content:center}
.am-sec.am-sec .tabbtn{padding:11px 22px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer;line-height:1.2}
.am-sec.am-sec .tabbtn:hover{border-color:var(--accent)}
.am-sec.am-sec .tabbtn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.am-sec.am-sec.tabs.on .tabpane, .am-sec.am-sec .tabs.on .tabpane{display:none}
.am-sec.am-sec.tabs.on .tabpane.act, .am-sec.am-sec .tabs.on .tabpane.act{display:block}
.am-sec.am-sec .tabpane h3.tabh{font-size:19px;margin:0 0 18px;text-align:center}
/* ---- Videokacheln: lokales Standbild, Player erst nach Klick ---- */

.am-sec.am-sec .vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1180px){.am-sec.am-sec .vgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:980px){.am-sec.am-sec .vgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.am-sec.am-sec .vgrid{grid-template-columns:1fr}}
.am-sec.am-sec .vcard{display:flex;flex-direction:column;gap:11px;min-width:0}
.am-sec.am-sec .vcard .ytframe{border-radius:14px;box-shadow:var(--shadow-sm)}
.am-sec.am-sec .vcard .ytplay{width:54px;height:54px}
.am-sec.am-sec .vcard .ytplay svg{width:20px;height:20px}
.am-sec.am-sec .vcard h4{font-size:14.5px;line-height:1.45;margin:0;font-weight:700;color:var(--ink)}
/* ---- Aufzeichnungen: Standbild links, Beschreibung rechts ---- */

.am-sec.am-sec .wlist{display:flex;flex-direction:column;gap:22px}
.am-sec.am-sec .wrow{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:26px;align-items:start;padding:22px;border-radius:18px}
@media (max-width:900px){.am-sec.am-sec .wrow{grid-template-columns:1fr;gap:18px}}
.am-sec.am-sec .wrow .ytframe{border-radius:13px}
.am-sec.am-sec .wrow h3{font-size:19px;line-height:1.35;margin:0 0 10px}
.am-sec.am-sec .wrow p{font-size:14.5px;line-height:1.68;color:var(--mut);margin:0 0 12px}
.am-sec.am-sec .wmeta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.am-sec.am-sec .wpill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink);background:var(--chipbg);border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.am-sec.am-sec .wpill svg{width:13px;height:13px}
.am-sec.am-sec .wpres{border-left:3px solid var(--accent);padding:2px 0 2px 14px;margin:0 0 14px;font-size:13.5px;line-height:1.62;color:var(--mut)}
.am-sec.am-sec .wpres b{color:var(--ink);font-weight:700}
.am-sec.am-sec .wpres a{color:var(--accent-ink);font-weight:600}
.am-sec.am-sec .wlinks{display:flex;flex-wrap:wrap;gap:10px}
/* ---- Berichtslisten ---- */

.am-sec.am-sec .rgroup+.rgroup{margin-top:26px}
.am-sec.am-sec .rgroup h3{font-size:15px;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);margin:0 0 12px}
.am-sec.am-sec .rlist{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:780px){.am-sec.am-sec .rlist{grid-template-columns:1fr}}
.am-sec.am-sec .ritem{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:13px;background:var(--bg2);border:1px solid var(--line);text-decoration:none;color:var(--ink);min-width:0}
.am-sec.am-sec .ritem:hover{border-color:var(--accent)}
.am-sec.am-sec .ritem .rico{width:38px;height:38px;flex:none;border-radius:11px;background:var(--chipbg);display:flex;align-items:center;justify-content:center}
.am-sec.am-sec .ritem .rico svg{width:18px;height:18px;color:var(--accent)}
.am-sec.am-sec .ritem .rname{font-size:14px;font-weight:600;line-height:1.4;min-width:0}
.am-sec.am-sec .ritem .rkind{margin-left:auto;font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:3px 9px;flex:none}
/* ---- Blog: Kachelwand mit Filter und Seitenzahlen ---- */

.am-sec.am-sec .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:1060px){.am-sec.am-sec .pgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.am-sec.am-sec .pgrid{grid-template-columns:1fr}}
.am-sec.am-sec .pcard{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:var(--bg2);border:1px solid var(--line);min-width:0}
.am-sec.am-sec .pcard.hide{display:none}
.am-sec.am-sec .pcard:hover{border-color:var(--accent)}
.am-sec.am-sec .pcard .pshot{aspect-ratio:16/9;overflow:hidden;background:var(--chipbg)}
.am-sec.am-sec .pcard .pshot img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.am-sec.am-sec .pcard:hover .pshot img{transform:scale(1.04)}
.am-sec.am-sec .pcard .pbody{padding:18px 19px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.am-sec.am-sec .pcard .pmeta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.am-sec.am-sec .pcard .ptag{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink);background:var(--chipbg);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.am-sec.am-sec .pcard .pdate{font-size:11.5px;font-weight:700;color:var(--mut);letter-spacing:.03em}
.am-sec.am-sec .pcard h3{font-size:16px;line-height:1.4;margin:0;font-weight:700}
.am-sec.am-sec .pcard h3 a{color:var(--ink);text-decoration:none}
.am-sec.am-sec .pcard h3 a:hover{color:var(--accent-ink)}
.am-sec.am-sec .pcard p{font-size:13.5px;line-height:1.62;color:var(--mut);margin:0}
.am-sec.am-sec .pcard .pby{font-size:12px;color:var(--mut);margin-top:auto;padding-top:6px}
.am-sec.am-sec .pcard .pgo{font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--accent-ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.am-sec.am-sec .pcard .pgo svg{width:14px;height:14px}
.am-sec.am-sec .pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:7px;margin-top:28px}
.am-sec.am-sec .pager button{min-width:40px;height:40px;padding:0 13px;border-radius:11px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.am-sec.am-sec .pager button:hover:not(:disabled){border-color:var(--accent)}
.am-sec.am-sec .pager button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.am-sec.am-sec .pager button:disabled{opacity:.4;cursor:default}
.am-sec.am-sec .pager .pdots{color:var(--mut);padding:0 2px}
/* ---- Leitfaden: drei Sprachfassungen ---- */

.am-sec.am-sec .gcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.am-sec.am-sec .gcards{grid-template-columns:1fr;max-width:520px;margin:0 auto}}
.am-sec.am-sec .gcard{display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:18px}
.am-sec.am-sec .gcard .gshot{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--bg2)}
.am-sec.am-sec .gcard .gshot img{width:100%;display:block}
.am-sec.am-sec .gcard h3{font-size:16px;line-height:1.42;margin:0;font-weight:700}
.am-sec.am-sec .gcard .glang{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-ink)}
.am-sec.am-sec .gcard .btn{margin-top:auto}
/* ---- Rechtstext (Vorlage T2): Sprungmarken links, Fliesstext rechts ----
   6.121 Woerter am Stueck sind ohne Wegweiser nicht benutzbar. Das
   Inhaltsverzeichnis bleibt beim Blaettern stehen und markiert den Abschnitt,
   in dem man gerade liest. Auf schmalen Geraeten klappt es zusammen. */

.am-sec.am-sec .legwrap{display:grid;grid-template-columns:272px minmax(0,1fr);gap:46px;align-items:start}
@media (max-width:1000px){.am-sec.am-sec .legwrap{grid-template-columns:1fr;gap:18px}}
.am-sec.am-sec .legtoc{position:sticky;top:96px;border-radius:18px;border:1px solid var(--line);background:var(--bg2);padding:17px 15px 15px;max-height:calc(100vh - 128px);overflow:auto;font-size:13.4px}
.am-sec.am-sec .legtoc>summary{display:none}
.am-sec.am-sec .legtoc .toch{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:9px;padding:0 8px}
.am-sec.am-sec .legtoc ol{list-style:none;display:flex;flex-direction:column;gap:1px}
.am-sec.am-sec .legtoc a{display:flex;gap:8px;padding:6px 9px;border-radius:9px;text-decoration:none;color:var(--mut);line-height:1.4;border-left:2px solid transparent}
.am-sec.am-sec .legtoc a:hover{color:var(--ink);background:var(--chipbg)}
.am-sec.am-sec .legtoc a.on{color:var(--accent-ink);background:var(--chipbg);border-left-color:var(--accent);font-weight:700}
.am-sec.am-sec .legtoc a b{font-variant-numeric:tabular-nums;font-weight:800;color:var(--accent-ink);flex:none;min-width:16px}
@media (max-width:1000px){.am-sec.am-sec .legtoc{position:static;max-height:none;padding:0}
.am-sec.am-sec .legtoc>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;list-style:none;cursor:pointer;padding:14px 17px;font-size:13.5px;font-weight:800;letter-spacing:.02em}
.am-sec.am-sec .legtoc>summary::-webkit-details-marker{display:none}
.am-sec.am-sec .legtoc>summary svg{width:17px;height:17px;color:var(--accent-ink);transition:transform .25s}
.am-sec.am-sec .legtoc[open]>summary svg{transform:rotate(180deg)}
.am-sec.am-sec .legtoc[open]>summary{border-bottom:1px solid var(--line)}
.am-sec.am-sec .legtoc .toch{display:none}
.am-sec.am-sec .legtoc ol{padding:8px 8px 12px}}
.am-sec.am-sec .legdoc{max-width:76ch}
.am-sec.am-sec .legdoc>.legintro{font-size:15.6px;line-height:1.76;color:var(--mut);display:flex;flex-direction:column;gap:13px;margin-bottom:8px}
.am-sec.am-sec .legdoc>.legintro p:first-child{color:var(--ink);font-size:16.2px;line-height:1.7}
/* Die Abschnitte sind <section>-Elemente und erben sonst die 84px Innenabstand
   der Seitenabschnitte. Das ergaebe unter jedem Abschnitt einen toten Streifen. */

.am-sec.am-sec .legsec{padding:0;scroll-margin-top:104px}
.am-sec.am-sec .legsec+.legsec,.am-sec.am-sec .legdoc>.legintro+.legsec{margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}
.am-sec.am-sec .legsec>h2{display:flex;gap:11px;align-items:baseline;font-size:21px;font-weight:800;letter-spacing:-.012em;line-height:1.32;margin-bottom:13px}
.am-sec.am-sec .legsec>h2 .legn{flex:none;font-size:12.5px;font-weight:900;letter-spacing:0;color:#fff;background:var(--accent);border-radius:8px;padding:3px 9px;line-height:1.5}
.am-sec.am-sec .legsec h3{font-size:15.5px;font-weight:800;margin:20px 0 7px;letter-spacing:-.005em}
.am-sec.am-sec .legsec p{font-size:14.8px;line-height:1.78;color:var(--mut);margin-bottom:12px}
.am-sec.am-sec .legsec p:last-child,.am-sec.am-sec .legsec ul:last-child,.am-sec.am-sec .legsec ol:last-child{margin-bottom:0}
.am-sec.am-sec .legsec a,.am-sec.am-sec .legintro a{color:var(--accent-ink);font-weight:600}
.am-sec.am-sec .legsec ul,.am-sec.am-sec .legsec ol{list-style:none;margin:0 0 13px;display:flex;flex-direction:column;gap:9px}
.am-sec.am-sec .legsec li{position:relative;padding-left:27px;font-size:14.8px;line-height:1.74;color:var(--mut)}
.am-sec.am-sec .legsec ul>li:before{content:'';position:absolute;left:9px;top:.76em;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.8}
.am-sec.am-sec .legsec ol{counter-reset:legli}
.am-sec.am-sec .legsec ol>li{counter-increment:legli;padding-left:32px}
.am-sec.am-sec .legsec ol>li:before{content:counter(legli);position:absolute;left:0;top:.08em;width:22px;text-align:center;font-size:11.5px;font-weight:800;color:var(--accent-ink);background:var(--chipbg);border-radius:6px;line-height:1.75}
.am-sec.am-sec .legdl{display:flex;flex-direction:column;gap:11px;margin-bottom:13px}
.am-sec.am-sec .legdl>div{border-left:3px solid var(--accent);padding:2px 0 2px 14px}
.am-sec.am-sec .legdl dt{font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--ink);margin-bottom:3px}
.am-sec.am-sec .legdl dd{font-size:14.6px;line-height:1.74;color:var(--mut)}
/* Anschrift und Kontakt als Karte statt als vier lose Zeilen. */

.am-sec.am-sec .legaddr{display:flex;gap:15px;align-items:flex-start;border-radius:16px;border:1px solid var(--line);background:var(--chipbg);padding:17px 19px;margin-top:14px}
.am-sec.am-sec .legaddr svg{width:19px;height:19px;color:var(--accent-ink);flex:none;margin-top:2px}
.am-sec.am-sec .legaddr .lines{font-size:14.4px;line-height:1.66;color:var(--mut)}
.am-sec.am-sec .legaddr .lines b{display:block;color:var(--ink);font-weight:800;font-size:14.8px;margin-bottom:2px}
.am-sec.am-sec .legtop{display:inline-flex;align-items:center;gap:7px;margin-top:26px;font-size:12.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--accent-ink);text-decoration:none}
.am-sec.am-sec .legtop svg{width:15px;height:15px;transform:rotate(-90deg)}
/* Hinweis fuer den Kunden, kein Seiteninhalt: sichtbar abgesetzt. */

.am-sec.am-sec .dnote{border-radius:16px;border:1px dashed var(--accent);background:var(--chipbg);padding:17px 19px;display:flex;gap:14px;align-items:flex-start;margin-bottom:26px}
.am-sec.am-sec .dnote svg{width:19px;height:19px;color:var(--accent-ink);flex:none;margin-top:2px}
.am-sec.am-sec .dnote .dlbl{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:4px}
.am-sec.am-sec .dnote p{font-size:14px;line-height:1.68;color:var(--mut);margin:0}
/* ---- Sicherheitsmerkmale: zwei Spalten mit Haken ---- */

.am-sec.am-sec .secgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media (max-width:900px){.am-sec.am-sec .secgrid{grid-template-columns:1fr}}
.am-sec.am-sec .secgrp{padding:26px 26px 24px;display:flex;flex-direction:column;gap:14px}
.am-sec.am-sec .secgrp h3{display:flex;align-items:center;gap:10px;font-size:17px;margin:0}
.am-sec.am-sec .secgrp h3 svg{width:20px;height:20px;color:var(--accent-ink)}
.am-sec.am-sec .secgrp ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.am-sec.am-sec .secgrp li{display:flex;gap:11px;font-size:14.4px;line-height:1.62;color:var(--mut)}
.am-sec.am-sec .secgrp li svg{width:17px;height:17px;color:var(--cta);flex:none;margin-top:3px}
/* ---- Weiche /legal/: zwei Karten auf die beiden Rechtstexte ---- */

.am-sec.am-sec .legcards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media (max-width:820px){.am-sec.am-sec .legcards{grid-template-columns:1fr}}
.am-sec.am-sec .legcard{padding:30px 30px 26px;display:flex;flex-direction:column;gap:12px;text-decoration:none}
.am-sec.am-sec .legcard .lico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-soft));box-shadow:0 12px 26px -12px var(--accent)}
.am-sec.am-sec .legcard .lico svg{width:23px;height:23px}
.am-sec.am-sec .legcard h3{margin:0;font-size:19px}
.am-sec.am-sec .legcard p{color:var(--mut);font-size:14.6px;line-height:1.66}
.am-sec.am-sec .legcard .more{margin-top:auto;padding-top:6px;font-size:13.5px;font-weight:800;color:var(--accent-ink);display:inline-flex;align-items:center;gap:7px}
.am-sec.am-sec .legcard .more svg{width:15px;height:15px;transition:transform .2s}
.am-sec.am-sec .legcard:hover .more svg{transform:translateX(3px)}
/* Fussleiste der Rechtstexte: die drei Dokumente untereinander erreichbar. */

.am-sec.am-sec .legnav{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:880px){.am-sec.am-sec .legnav{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.am-sec.am-sec .legnav{grid-template-columns:1fr}}
.am-sec.am-sec .legnav a{display:flex;align-items:center;gap:11px;padding:15px 17px;border-radius:14px;border:1px solid var(--line);background:var(--bg2);text-decoration:none;font-size:14px;font-weight:700}
.am-sec.am-sec .legnav a:hover{border-color:var(--accent)}
.am-sec.am-sec .legnav a.on{border-color:var(--accent);background:var(--chipbg);color:var(--accent-ink)}
.am-sec.am-sec .legnav a svg{width:18px;height:18px;color:var(--accent-ink);flex:none}
/* ---- Fehlerseite (Vorlage T7) ---- */

.am-sec.am-sec .nfgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:center}
@media (max-width:900px){.am-sec.am-sec .nfgrid{grid-template-columns:1fr;gap:26px}
.am-sec.am-sec .nffig{order:-1;max-width:210px;margin:0 auto}}
.am-sec.am-sec .nfcode{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink);background:var(--chipbg);border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.am-sec.am-sec .nfgrid h1{font-size:clamp(40px,7vw,68px);font-weight:900;letter-spacing:-.03em;line-height:1;margin:16px 0 10px}
.am-sec.am-sec .nfgrid h2{font-size:clamp(19px,2.4vw,26px);font-weight:800;letter-spacing:-.015em;line-height:1.28;color:var(--mut);margin-bottom:22px}
.am-sec.am-sec .nffig img{width:100%;border-radius:18px}
/* Ein Panel statt drei Karten: die Spalten sind 9, 3 und 1 Eintrag lang,
   nebeneinandergestellte Karten haetten unten zwei leere Kaesten ergeben. */

.am-sec.am-sec .nflinks{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 34px;align-items:start;padding:32px 34px 30px;margin-top:8px}
@media (max-width:900px){.am-sec.am-sec .nflinks{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.am-sec.am-sec .nflinks{grid-template-columns:1fr;gap:26px;padding:26px 24px 24px}}
.am-sec.am-sec .nfcol{display:flex;flex-direction:column;gap:11px}
/* Die Spalte "Features" traegt neun Eintraege, die beiden anderen drei und
   einen. Sie bekommt deshalb doppelte Breite und zwei Unterspalten, sonst
   stuenden zwei Drittel des Panels leer. */

.am-sec.am-sec .nfcol.wide{grid-column:span 2}
@media (max-width:560px){.am-sec.am-sec .nfcol.wide{grid-column:auto}}
.am-sec.am-sec .nfcol.wide ul{display:block;columns:2;column-gap:30px}
@media (max-width:560px){.am-sec.am-sec .nfcol.wide ul{columns:1}}
.am-sec.am-sec .nfcol.wide li{break-inside:avoid;margin-bottom:9px}
.am-sec.am-sec .nfcol .nfh{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
.am-sec.am-sec .nfcol ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.am-sec.am-sec .nfcol a{display:inline-flex;align-items:center;gap:8px;font-size:14.4px;color:var(--ink);text-decoration:none;line-height:1.5}
.am-sec.am-sec .nfcol a svg{width:14px;height:14px;color:var(--accent);flex:none;transition:transform .2s}
.am-sec.am-sec .nfcol a:hover{color:var(--accent-ink)}
.am-sec.am-sec .nfcol a:hover svg{transform:translateX(3px)}
/* ===================================================================== *//* Etappe 1: die Anfragestrecke (Demo, Kontakt, Angebot, Rechner,        *//* Empfehlungen, Danke). Ein Formularsatz fuer alle sechs Seiten.        *//* ===================================================================== *//* Formular links, Begleitspalte rechts. Der Bestand stellt die Felder in
   eine einzige, sehr lange Reihe; die Begleitspalte steht dort unter dem
   Formular und wird auf einem grossen Bildschirm nie gleichzeitig gesehen. */

.am-sec.am-sec .formlay{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:38px;align-items:start}
@media (max-width:1000px){.am-sec.am-sec .formlay{grid-template-columns:1fr;gap:26px}}
.am-sec.am-sec .formaside{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px}
@media (max-width:1000px){.am-sec.am-sec .formaside{position:static}}
.am-sec.am-sec .acard{padding:22px 24px 24px}
.am-sec.am-sec .acard h3{font-size:15px;font-weight:800;letter-spacing:.01em;margin-bottom:12px}
.am-sec.am-sec .acard ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.am-sec.am-sec .acard li{display:flex;gap:10px;align-items:flex-start;font-size:14.2px;line-height:1.55;color:var(--mut)}
.am-sec.am-sec .acard li svg{width:15px;height:15px;color:var(--cta);flex:none;margin-top:4px}
.am-sec.am-sec .acard .alnk{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;font-weight:700;color:var(--accent-ink);text-decoration:none}
.am-sec.am-sec .acard .alnk svg{width:15px;height:15px;transition:transform .2s}
.am-sec.am-sec .acard .alnk:hover svg{transform:translateX(3px)}
.am-sec.am-sec .fform{padding:30px 32px 32px;position:relative}
@media (max-width:560px){.am-sec.am-sec .fform{padding:24px 20px 26px}}
.am-sec.am-sec .fgroup+.fgroup{margin-top:28px;padding-top:26px;border-top:1px solid var(--line)}
.am-sec.am-sec .glegend{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:16px}
.am-sec.am-sec .glegend svg{width:15px;height:15px}
.am-sec.am-sec .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
@media (max-width:620px){.am-sec.am-sec .fgrid{grid-template-columns:1fr}}
.am-sec.am-sec .fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.am-sec.am-sec .fld.full{grid-column:1/-1}
.am-sec.am-sec .flab{font-size:13px;font-weight:700;color:var(--ink);line-height:1.4}
.am-sec.am-sec .flab i{color:var(--accent);font-style:normal;margin-left:2px}
.am-sec.am-sec .fhelp{font-size:12.4px;color:var(--mut);line-height:1.5}
.am-sec.am-sec .fform input[type=text],.am-sec.am-sec .fform input[type=email],.am-sec.am-sec .fform input[type=tel],.am-sec.am-sec .fform input[type=number],.am-sec.am-sec .fform input[type=date],.am-sec.am-sec .fform input[type=password],.am-sec.am-sec .fform select,.am-sec.am-sec .fform textarea,.am-sec.am-sec .pwgate input{
  width:100%;font-family:inherit;font-size:14.6px;line-height:1.5;color:var(--ink);
  background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:11px 13px;
  transition:border-color .18s,box-shadow .18s,background .18s;appearance:none}
.am-sec.am-sec .fform textarea{min-height:104px;resize:vertical}
.am-sec.am-sec .fform select{background-image:var(--caret);background-repeat:no-repeat;background-position:right 12px center;background-size:11px;padding-right:34px}
.am-sec.am-sec .fform input:focus,.am-sec.am-sec .fform select:focus,.am-sec.am-sec .fform textarea:focus,.am-sec.am-sec .pwgate input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,144,208,.18)}
.am-sec.am-sec .fform input::placeholder,.am-sec.am-sec .fform textarea::placeholder,.am-sec.am-sec .pwgate input::placeholder{color:var(--mut);opacity:.7}
.am-sec.am-sec .ferr{display:none;font-size:12.4px;font-weight:600;color:var(--bad)}
.am-sec.am-sec .ferr svg{width:13px;height:13px;vertical-align:-.14em;margin-right:5px}
.am-sec.am-sec .fld.err input,.am-sec.am-sec .fld.err select,.am-sec.am-sec .fld.err textarea,.am-sec.am-sec .fld.err .chkgrid{border-color:var(--bad);box-shadow:0 0 0 3px rgba(214,69,60,.14)}
.am-sec.am-sec .fld.err .ferr{display:block}
.am-sec.am-sec .fld.ok input,.am-sec.am-sec .fld.ok select,.am-sec.am-sec .fld.ok textarea{border-color:var(--cta)}
/* Kontrollkaestchen: der Bestand stellt 24 Schnittstellen untereinander, das
   ergibt eine Spalte von zwei Bildschirmhoehen. Hier als Raster. */

.am-sec.am-sec .chkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));gap:7px 12px;border:1px solid var(--line);border-radius:14px;padding:13px;background:var(--bg2)}
.am-sec.am-sec .chk{display:flex;align-items:flex-start;gap:9px;font-size:13.8px;line-height:1.45;color:var(--ink);cursor:pointer;padding:5px 6px;border-radius:9px;transition:background .16s}
.am-sec.am-sec .chk:hover{background:var(--chipbg)}
.am-sec.am-sec .chk input{appearance:none;width:17px;height:17px;flex:none;margin-top:2px;border:1px solid var(--line);border-radius:5px;background:var(--panel);cursor:pointer;transition:background .16s,border-color .16s;position:relative}
.am-sec.am-sec .chk input:checked{background:var(--cta);border-color:var(--cta)}
.am-sec.am-sec .chk input:checked::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--cta-ink);border-width:0 2px 2px 0;transform:rotate(42deg)}
.am-sec.am-sec .chk input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Aufklapper "Included features": im Bestand ein Fenster ueber der Seite. */

.am-sec.am-sec .fpop{border:1px solid var(--line);border-radius:14px;background:var(--bg2);overflow:hidden}
.am-sec.am-sec .formaside .fpop{box-shadow:var(--shadow-sm)}
.am-sec.am-sec .fpop>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;padding:12px 15px;font-size:13.6px;font-weight:700;color:var(--accent-ink)}
.am-sec.am-sec .fpop>summary::-webkit-details-marker{display:none}
.am-sec.am-sec .fpop>summary svg{width:15px;height:15px;transition:transform .2s}
.am-sec.am-sec .fpop[open]>summary svg.chev{transform:rotate(180deg)}
.am-sec.am-sec .fpop .fpopbody{padding:2px 15px 16px}
.am-sec.am-sec .fpcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:18px 22px}
.am-sec.am-sec .fpcol .fph{font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:9px}
.am-sec.am-sec .fpcol ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.am-sec.am-sec .fpcol li{display:flex;gap:8px;align-items:flex-start;font-size:13.2px;line-height:1.45;color:var(--mut)}
.am-sec.am-sec .fpcol li svg{width:13px;height:13px;color:var(--cta);flex:none;margin-top:3px}
.am-sec.am-sec .fconsent{font-size:12.6px;line-height:1.6;color:var(--mut);margin-top:16px;max-width:640px}
.am-sec.am-sec .fconsent a{color:var(--accent-ink)}
.am-sec.am-sec .fbot{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.am-sec.am-sec .freq{font-size:12.6px;color:var(--mut)}
.am-sec.am-sec .fsum{display:none;align-items:flex-start;gap:11px;border-radius:14px;border:1px solid var(--bad);background:rgba(214,69,60,.07);padding:13px 16px;margin-bottom:20px;font-size:13.6px;color:var(--bad);font-weight:600}
.am-sec.am-sec .fsum svg{width:17px;height:17px;flex:none;margin-top:2px}
.am-sec.am-sec .fform.invalid .fsum{display:flex}
.am-sec.am-sec .fsub{position:relative}
.am-sec.am-sec .fform.sending .fsub{pointer-events:none;opacity:.75}
.am-sec.am-sec .fspin{display:none;width:15px;height:15px;border:2px solid rgba(255,255,255,.45);border-top-color:currentColor;border-radius:50%;animation:fspin .7s linear infinite}
.am-sec.am-sec .fform.sending .fspin{display:inline-block}
.am-sec.am-sec .fform.sending .fsub svg{display:none}
@keyframes fspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.am-sec.am-sec .fspin{animation-duration:2.4s}}
/* Bestaetigung: derselbe Text wie auf der Dankeseite des Bestands. */

.am-sec.am-sec .fform.done .fbody{display:none}
.am-sec.am-sec .fdone{display:none;text-align:center;padding:14px 6px 8px}
.am-sec.am-sec .fform.done .fdone{display:block}
/* Auch die Dankeseite traegt dieses Zeichen, deshalb eigenstaendig. */

.am-sec.am-sec .fmark{width:62px;height:62px;border-radius:50%;background:var(--cta);color:var(--cta-ink);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.am-sec.am-sec .fmark svg{width:30px;height:30px;stroke-width:2.6}
.am-sec.am-sec .fdone h3{font-size:23px;font-weight:800;letter-spacing:-.01em;margin-bottom:10px}
.am-sec.am-sec .fdone p{font-size:14.6px;color:var(--mut);line-height:1.66;max-width:560px;margin:0 auto 10px}
.am-sec.am-sec .fdone .fagain{margin-top:18px}
/* Ergebnisfeld des Rechners. Die Zahlen entstehen im Bestand aus der
   Preislogik; im Entwurf steht die Form, nicht der Betrag. */

.am-sec.am-sec .qres{display:none;margin-top:26px;padding:24px 26px 22px;border-radius:18px;border:1px solid var(--accent);background:var(--chipbg)}
.am-sec.am-sec .fform.quoted .qres{display:block}
.am-sec.am-sec .qres h3{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:16px}
.am-sec.am-sec .qrows{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px 22px}
.am-sec.am-sec .qrow{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line)}
.am-sec.am-sec .qrow span{font-size:13.6px;color:var(--mut);line-height:1.4}
.am-sec.am-sec .qrow b{font-size:16px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.am-sec.am-sec .qrow.total{grid-column:1/-1;border-bottom:none;border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
.am-sec.am-sec .qrow.total span{font-size:14.4px;font-weight:700;color:var(--ink)}
.am-sec.am-sec .qrow.total b{font-size:21px;color:var(--accent-ink)}
/* Passwortabfrage: /price-calculator/ und /referrals/ liegen im Bestand
   hinter einem Passwort. Der Entwurf zeigt beides, die Abfrage und was
   dahinter steht. */

.am-sec.am-sec .pwlay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:start;max-width:1000px;margin:0 auto}
@media (max-width:860px){.am-sec.am-sec .pwlay{grid-template-columns:1fr}}
.am-sec.am-sec .pwgate{padding:30px 32px 32px;text-align:center}
.am-sec.am-sec .pwgate .pwic{width:54px;height:54px;border-radius:50%;background:var(--chipbg);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.am-sec.am-sec .pwgate .pwic svg{width:24px;height:24px}
.am-sec.am-sec .pwgate h3{font-size:20px;font-weight:800;margin-bottom:8px}
.am-sec.am-sec .pwgate p{font-size:14.4px;color:var(--mut);line-height:1.62;margin-bottom:18px}
.am-sec.am-sec .pwgate .pwrow{display:flex;gap:10px}
.am-sec.am-sec .pwgate input{flex:1}
.am-sec.am-sec .pwnote{font-size:12.6px;color:var(--mut);margin-top:14px}
/* Pakettabelle der Preisseite. Vier Karten, 16 Merkmale je Karte, enthalten
   oder nicht. Der Bestand setzt "+" und "-" als Zeichen davor. */

.am-sec.am-sec .packs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
@media (max-width:1080px){.am-sec.am-sec .packs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.am-sec.am-sec .packs{grid-template-columns:1fr}}
.am-sec.am-sec .pack{display:flex;flex-direction:column;padding:24px 22px 24px}
.am-sec.am-sec .pack h3{font-size:16.5px;font-weight:800;letter-spacing:-.01em;line-height:1.32;margin-bottom:16px;min-height:44px}
.am-sec.am-sec .pack ul{list-style:none;display:flex;flex-direction:column;gap:8px;flex:1}
.am-sec.am-sec .pack li{display:flex;gap:9px;align-items:flex-start;font-size:13.4px;line-height:1.45}
.am-sec.am-sec .pack li svg{width:14px;height:14px;flex:none;margin-top:3px}
.am-sec.am-sec .pack li.in{color:var(--ink)}
.am-sec.am-sec .pack li.in svg{color:var(--cta)}
.am-sec.am-sec .pack li.out{color:var(--mut);opacity:.62}
.am-sec.am-sec .pack li.out svg{color:var(--mut)}
.am-sec.am-sec .pack .pbtn{margin-top:20px}
/* Vertretungen auf der Kontaktseite: acht Anschriften, im Bestand als lange
   Spalte unter dem Formular. */

.am-sec.am-sec .offices{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1080px){.am-sec.am-sec .offices{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.am-sec.am-sec .offices{grid-template-columns:1fr}}
.am-sec.am-sec .office{padding:20px 22px 21px}
.am-sec.am-sec .office h3{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:11px}
.am-sec.am-sec .office p{font-size:13.8px;line-height:1.62;color:var(--mut);margin:0}
.am-sec.am-sec .office b{color:var(--ink);font-weight:700}
.am-sec.am-sec .office a{color:var(--accent-ink);text-decoration:none;word-break:break-word}
.am-sec.am-sec .office a:hover{text-decoration:underline}
/* ---- Zitatwand (Testimonials): 41 Stimmen, Spaltensatz statt Endlos-Liste ---- */

.am-sec.am-sec .qwall{columns:3;column-gap:18px;margin-top:6px}
@media (max-width:1100px){.am-sec.am-sec .qwall{columns:2}}
@media (max-width:680px){.am-sec.am-sec .qwall{columns:1}}
.am-sec.am-sec .qcard{break-inside:avoid;margin:0 0 18px;padding:24px 24px 22px;display:flex;flex-direction:column;gap:14px}
.am-sec.am-sec .qcard blockquote{margin:0;font-size:15px;line-height:1.62;color:var(--ink)}
.am-sec.am-sec .qcard blockquote:before{content:"\201C";display:block;font-family:Georgia,serif;font-size:44px;line-height:.6;color:var(--accent);opacity:.45;margin-bottom:6px}
.am-sec.am-sec .qwho{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:4px}
.am-sec.am-sec .qwho .qav{width:52px;height:52px;border-radius:50%;overflow:hidden;flex:none;background:var(--chipbg);border:1px solid var(--line)}
.am-sec.am-sec .qwho .qav img{width:100%;height:100%;object-fit:cover;display:block}
.am-sec.am-sec .qwho .qn{font-size:14px;font-weight:800;line-height:1.3}
.am-sec.am-sec .qwho .qr{font-size:12.5px;color:var(--mut);line-height:1.45}
.am-sec.am-sec .qwho .qo{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--accent-ink);margin-top:3px;text-decoration:none}
.am-sec.am-sec .qwho .qo img{width:20px;height:14px;object-fit:cover;border-radius:3px;border:1px solid var(--line)}
.am-sec.am-sec .qwho .qo:hover{text-decoration:underline}
/* ---- Team- und Personenraster (About) ---- */

.am-sec.am-sec .team{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1000px){.am-sec.am-sec .team{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.am-sec.am-sec .team{grid-template-columns:1fr}}
.am-sec.am-sec .tmem{padding:24px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.am-sec.am-sec .tmem .tav{width:96px;height:96px;border-radius:50%;overflow:hidden;background:var(--chipbg);border:1px solid var(--line);margin-bottom:6px}
.am-sec.am-sec .tmem .tav img{width:100%;height:100%;object-fit:cover;display:block}
.am-sec.am-sec .tmem h3{font-size:16px;margin:0}
.am-sec.am-sec .tmem .treg{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}
.am-sec.am-sec .tmem a.tmail{font-size:12.5px;color:var(--mut);text-decoration:none;overflow-wrap:anywhere;display:inline-flex;align-items:center;gap:6px}
.am-sec.am-sec .tmem a.tmail svg{width:14px;height:14px;color:var(--accent);flex:none}
.am-sec.am-sec .tmem a.tmail:hover{color:var(--accent-ink)}
/* Gruenderprofil: Portrait, Text, Profile */

.am-sec.am-sec .founder{display:grid;grid-template-columns:230px 1fr;gap:30px;align-items:center;padding:30px 32px}
@media (max-width:820px){.am-sec.am-sec .founder{grid-template-columns:1fr;text-align:center;justify-items:center}}
.am-sec.am-sec .founder .fav{width:200px;height:200px;border-radius:50%;overflow:hidden;background:var(--chipbg);border:1px solid var(--line)}
.am-sec.am-sec .founder .fav img{width:100%;height:100%;object-fit:cover;display:block}
.am-sec.am-sec .founder h3{font-size:23px;margin:2px 0 4px}
.am-sec.am-sec .founder p{color:var(--mut);font-size:15px;line-height:1.7;margin:0 0 16px}
.am-sec.am-sec .fsoc{display:flex;gap:10px}
@media (max-width:820px){.am-sec.am-sec .fsoc{justify-content:center}}
.am-sec.am-sec .fsoc a{width:40px;height:40px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:var(--chipbg);border:1px solid var(--line);color:var(--accent-ink)}
.am-sec.am-sec .fsoc a svg{width:18px;height:18px}
.am-sec.am-sec .fsoc a:hover{border-color:var(--accent)}
/* Danksagung: zwoelf Namen als Raster statt drei Umbruch-Absaetze */

.am-sec.am-sec .recgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:900px){.am-sec.am-sec .recgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.am-sec.am-sec .recgrid{grid-template-columns:1fr}}
.am-sec.am-sec .rec{padding:13px 16px;border-radius:13px;background:var(--bg2);border:1px solid var(--line)}
.am-sec.am-sec .rec .rn{display:block;font-size:14px;font-weight:700}
.am-sec.am-sec .rec .rc{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.am-sec.am-sec .rec .rc svg{width:12px;height:12px;color:var(--accent)}
/* Rollenkarten (Join the team): im Original zugeklappt, hier offen */

.am-sec.am-sec .roles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
@media (max-width:1000px){.am-sec.am-sec .roles{grid-template-columns:1fr}}
.am-sec.am-sec .role{padding:28px 28px 30px}
.am-sec.am-sec .role .rh{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.am-sec.am-sec .role .rh .ich{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--chipbg);border:1px solid var(--line);flex:none}
.am-sec.am-sec .role .rh .ich svg{width:21px;height:21px;color:var(--accent)}
.am-sec.am-sec .role h3{font-size:19px;margin:0}
.am-sec.am-sec .role .rbody{font-size:14.5px;line-height:1.68;color:var(--mut)}
.am-sec.am-sec .role .rbody p{margin:0 0 12px}
.am-sec.am-sec .role .rbody strong{color:var(--ink)}
.am-sec.am-sec .role .rbody ul{margin:0 0 14px;padding-left:20px}
.am-sec.am-sec .role .rbody li{margin-bottom:7px}
.am-sec.am-sec .role .rbody a{color:var(--accent-ink);font-weight:700}
/* Preis-Pille im Hero (COVID-Seite) */

.am-sec.am-sec .pricepill{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;padding:7px 14px;border-radius:99px;
  background:rgba(125,189,36,.16);border:1px solid rgba(125,189,36,.5);color:#fff;font-size:13px;font-weight:800}
.am-sec.am-sec .pricepill svg{width:15px;height:15px}
/* Vier-Saeulen-Band (Wellness/Workload/Health/Performance) */

.am-sec.am-sec .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:980px){.am-sec.am-sec .pillars{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.am-sec.am-sec .pillars{grid-template-columns:1fr}}
.am-sec.am-sec .pillar{padding:26px 24px 28px;display:flex;flex-direction:column;gap:11px}
.am-sec.am-sec .pillar .more{margin-top:auto;font-size:13px;font-weight:800;color:var(--accent-ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px;padding-top:6px}
.am-sec.am-sec .pillar .more svg{width:14px;height:14px;transition:transform .2s}
.am-sec.am-sec .pillar:hover .more svg{transform:translateX(3px)}
.am-sec.am-sec .pillar .pich{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--chipbg);border:1px solid var(--line)}
.am-sec.am-sec .pillar .pich svg{width:24px;height:24px;color:var(--accent)}
.am-sec.am-sec .pillar h3{font-size:18px}
.am-sec.am-sec .pillar p{color:var(--mut);font-size:14px}
.am-sec.am-sec .pillar .colintro{margin:8px 0 12px;line-height:1.55}
/* Drei Spalten nebeneinander: was hineingeht, was daraus wird, was herauskommt.
   Der Bestand stellt diese Abschnitte als eine Zeile mit drei Spalten dar; das
   Nebeneinander ist die Aussage und darf nicht zu einem Stapel werden. */

.am-sec.am-sec .flow{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
@media (max-width:980px){.am-sec.am-sec .flow{grid-template-columns:1fr}}
.am-sec.am-sec .flowcol{padding:26px 24px 28px;display:flex;flex-direction:column;gap:14px}
.am-sec.am-sec .flowcol .pich{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--chipbg);border:1px solid var(--line)}
.am-sec.am-sec .flowcol .pich svg{width:22px;height:22px;color:var(--accent)}
.am-sec.am-sec .flowcol h3{font-size:18px}
.am-sec.am-sec .flowcol p{color:var(--mut);font-size:14px}
.am-sec.am-sec .flowcol h4{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:8px}
.am-sec.am-sec .flowcol .feat li{font-size:14px}
.am-sec.am-sec .flowgrp+.flowgrp,.am-sec.am-sec .flowsub+.flowgrp{border-top:1px solid var(--line);padding-top:14px}
.am-sec.am-sec .flowsub{font-size:15px;font-weight:800;text-align:center;padding-top:4px}
.am-sec.am-sec .flowfig{margin:2px auto;max-width:270px}
.am-sec.am-sec .flowfig img{width:100%;height:auto;display:block}
.am-sec.am-sec .pstack{max-width:780px;margin:24px auto 0;text-align:center}
.am-sec.am-sec .pstack p{color:var(--mut)}
.am-sec.am-sec .pstack p+p{margin-top:12px}
/* Chips / Logos */

.am-sec.am-sec .chips{display:flex;flex-wrap:wrap;gap:11px}
.am-sec.am-sec .chip{font-size:14px;font-weight:600;color:var(--ink);background:var(--chipbg);border:1px solid var(--line);border-radius:999px;padding:10px 18px;display:flex;align-items:center;gap:9px}
.am-sec.am-sec .chip svg{width:16px;height:16px;color:var(--accent)}
/* Zweispalter Text + Foto */

.am-sec.am-sec .cols2{display:grid;grid-template-columns:1.02fr .98fr;gap:42px;align-items:center}
.am-sec.am-sec .cols2.rev .txt{order:2}
@media (max-width:880px){.am-sec.am-sec .cols2{grid-template-columns:1fr;gap:28px}
.am-sec.am-sec .cols2.rev .txt{order:0}}
.am-sec.am-sec .cols2 .txt p{color:var(--mut);margin-bottom:14px}
.am-sec.am-sec .figrow{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}
.am-sec.am-sec .figrow .txt p{color:var(--mut);margin:0;max-width:46ch}
.am-sec.am-sec .figrow figure{max-width:560px;margin-left:auto}
.am-sec.am-sec .figrow .txt p+p{margin-top:12px}
.am-sec.am-sec .figrow .devfig figcaption,.am-sec.am-sec .figrow .pic figcaption{display:none}
@media (max-width:900px){.am-sec.am-sec .figrow{grid-template-columns:1fr;gap:26px}
.am-sec.am-sec .figrow figure{margin:0 auto}}
/* Die beiden weiteren Versprechen aus dem Kopf der Bestandsstartseite.
   Enger als die uebrigen Abschnitte, damit das Band zum Kopf gehoert, aber
   oben und unten gleich viel, damit es sauber sitzt. */

.am-sec.am-sec.claimsec{padding-top:44px;padding-bottom:44px}
/* Partnerkennung neben dem Ueberblick: das Zeichen ist weiss auf durchsichtigem
   Grund und braucht deshalb eine dunkle Flaeche. */

.am-sec.am-sec .prow{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:center;margin-bottom:26px}
.am-sec.am-sec .prow .shead{margin-bottom:0}
.am-sec.am-sec .partner{background:linear-gradient(155deg,#0E1330 0%,#1C244B 55%,#16295C 100%);
  border-radius:22px;padding:24px 22px;text-align:center}
.am-sec.am-sec .partner span{display:block;color:#b8cad8;font-size:14.5px;line-height:1.5;margin-bottom:14px}
.am-sec.am-sec .partner img{width:100%;max-width:230px;height:auto;display:inline-block}
@media (max-width:900px){.am-sec.am-sec .prow{grid-template-columns:1fr;gap:24px}
.am-sec.am-sec .partner{max-width:340px}}
.am-sec.am-sec .claims{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.am-sec.am-sec .claims .claim{padding:22px 24px}
.am-sec.am-sec .claims .kick{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);display:flex;align-items:center;gap:8px}
.am-sec.am-sec .claims .claim p{margin:8px 0 0;color:var(--mut);font-size:15.5px;line-height:1.55}
@media (max-width:820px){.am-sec.am-sec .claims{grid-template-columns:1fr}}
/* Kategorienzeilen der Loesungsuebersicht: Foto und Text im Wechsel links und
   rechts, so wie im Bestand. Eine Kachelreihe traegt die Beschreibungstexte
   nicht, die dort je Kategorie zwei Absaetze lang sind. */

.am-sec.am-sec .solrow{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;margin-top:44px}
.am-sec.am-sec .solrow:first-of-type{margin-top:0}
.am-sec.am-sec .solrow.rev .soltxt{order:2}
.am-sec.am-sec .solrow figure{margin:0}
.am-sec.am-sec .solrow figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:5/3;display:block}
.am-sec.am-sec .solrow .soltxt h3{font-size:clamp(21px,2vw,27px);line-height:1.2;margin:6px 0 12px}
.am-sec.am-sec .solrow .soltxt p{color:var(--mut);margin:0 0 12px;max-width:52ch}
.am-sec.am-sec .solrow .soltxt .kick{margin:0;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);display:flex;align-items:center;gap:8px}
@media (max-width:900px){.am-sec.am-sec .solrow{grid-template-columns:1fr;gap:22px;margin-top:36px}
.am-sec.am-sec .solrow.rev .soltxt{order:0}}
.am-sec.am-sec .metricrow{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.am-sec.am-sec .metricrow.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.am-sec.am-sec .metricrow.four{grid-template-columns:repeat(2,1fr)}}
/* Vier nebeneinander: kleinere Ziffern, damit "Unlimited" und "30 min" in eine Zeile passen */

.am-sec.am-sec .metricrow.four .metric{padding:28px 16px}
.am-sec.am-sec .metricrow.four .metric .brace{font-size:44px}
.am-sec.am-sec .metricrow.four .metric .num{font-size:38px;white-space:nowrap}
.am-sec.am-sec .metric{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:32px 24px;text-align:center}
.am-sec.am-sec .metricval{display:flex;align-items:center;justify-content:center;gap:6px;line-height:1}
.am-sec.am-sec .metric .brace{font-size:58px;font-weight:800;line-height:.9;color:var(--accent-soft);flex:none}
.am-sec.am-sec .metric .num{font-size:52px;font-weight:900;letter-spacing:-1px;color:var(--accent-ink);
  background:linear-gradient(180deg,var(--accent),var(--accent-ink));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.am-sec.am-sec .metric h3{margin:0;font-size:18px;font-weight:700;color:var(--ink);max-width:13ch}
.am-sec.am-sec .metric-note{text-align:center;color:var(--mut);max-width:780px;margin:24px auto 0}
@media (max-width:760px){.am-sec.am-sec .metricrow{grid-template-columns:1fr}
.am-sec.am-sec .metric .brace{font-size:48px}
.am-sec.am-sec .metric .num{font-size:44px}
.am-sec.am-sec .metricrow.four{grid-template-columns:1fr}
.am-sec.am-sec .metricrow.four .metric .brace{font-size:44px}
.am-sec.am-sec .metricrow.four .metric .num{font-size:40px}}
.am-sec.am-sec .pic{overflow:hidden;padding:10px}
.am-sec.am-sec .pic img{width:100%;border-radius:15px;display:block}
.am-sec.am-sec .pic figcaption{font-size:12px;color:var(--mut);padding:9px 6px 2px}
/* Survey / Kennzahlen-Ringe */

.am-sec.am-sec .surveygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:820px){.am-sec.am-sec .surveygrid{grid-template-columns:repeat(2,1fr)}}
.am-sec.am-sec .stat{padding:28px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.am-sec.am-sec .stat .big{font-size:clamp(40px,6vw,56px);font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--accent-ink)}
.am-sec.am-sec .stat p{font-size:13.5px;color:var(--mut);line-height:1.4}
.am-sec.am-sec .statbar{display:flex;flex-wrap:wrap;gap:14px}
.am-sec.am-sec .statbar .st{flex:1 1 0;min-width:120px;padding:18px 20px}
.am-sec.am-sec .statbar .st b{display:block;font-size:26px;font-weight:900;letter-spacing:-.02em;color:var(--accent-ink)}
.am-sec.am-sec .statbar .st span{font-size:13px;color:var(--mut)}
/* Prozess / Timeline */

.am-sec.am-sec .tlwrap{display:grid;grid-template-columns:1.1fr .9fr;gap:42px;align-items:start}
@media (max-width:880px){.am-sec.am-sec .tlwrap{grid-template-columns:1fr}}
.am-sec.am-sec .tl{list-style:none;position:relative;padding-left:30px}
.am-sec.am-sec .tl::before{content:'';position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--accent),var(--blue))}
.am-sec.am-sec .tl li{position:relative;padding:0 0 26px 16px}
.am-sec.am-sec .tl li:last-child{padding-bottom:0}
.am-sec.am-sec .tl li::before{content:'';position:absolute;left:-28px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--bg)}
.am-sec.am-sec .tl b{display:block;font-size:16px;color:var(--accent-ink);font-weight:800;letter-spacing:.01em;margin-bottom:3px}
.am-sec.am-sec .tl p{font-size:14.5px;color:var(--mut)}
/* Praxis-Block: Screenshot + Punkte (Modul-Seiten) */

.am-sec.am-sec .practice{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center}
.am-sec.am-sec .practice.rev .ptxt{order:2}
@media (max-width:900px){.am-sec.am-sec .practice{grid-template-columns:1fr;gap:26px}
.am-sec.am-sec .practice.rev .ptxt{order:0}}
.am-sec.am-sec .shot{padding:10px;overflow:hidden}
.am-sec.am-sec .shot img{width:100%;border-radius:14px;display:block;box-shadow:var(--shadow-sm)}
/* ===== Bespoke-Treatments (Device-Frame, Glow, Spotlight, Bento) ===== *//* Geraete-/Browser-Rahmen fuer Produkt-Screenshots -> premium statt flach */

.am-sec.am-sec .device{position:relative;border-radius:16px;overflow:hidden;background:#131A3A;padding:0;
  box-shadow:0 34px 70px rgba(11,15,38,.46),inset 0 0 0 1px rgba(255,255,255,.10)}
.am-sec.am-sec .device .bar{height:36px;display:flex;align-items:center;gap:7px;padding:0 15px;background:linear-gradient(180deg,#2A3466,#1C244B)}
.am-sec.am-sec .device .bar i{width:11px;height:11px;border-radius:50%;background:#3D477A;display:block;flex:none}
.am-sec.am-sec .device .bar i:nth-child(1){background:#ec6a5e}
.am-sec.am-sec .device .bar i:nth-child(2){background:#f4bf4f}
.am-sec.am-sec .device .bar i:nth-child(3){background:#61c554}
.am-sec.am-sec .device .bar .url{margin-left:12px;height:18px;flex:1;max-width:340px;border-radius:6px;background:rgba(255,255,255,.08)}
.am-sec.am-sec .device img{display:block;width:100%;border-radius:0;box-shadow:none}
/* Cyan-Glow hinter Feature-Bildern */

.am-sec.am-sec .glowwrap{position:relative}
.am-sec.am-sec .glowwrap::before{content:'';position:absolute;inset:-9% -7%;z-index:0;pointer-events:none;
  background:radial-gradient(58% 58% at 72% 26%,rgba(0,144,208,.5),transparent 70%);filter:blur(40px)}
.am-sec.am-sec .glowwrap>*{position:relative;z-index:1}
/* Dunkles Spotlight-Band (eine Highlight-Sektion je Seite, z.B. "In practice") */

.am-sec.am-sec.spot{background:linear-gradient(155deg,#0E1330 0%,#1C244B 55%,#16295C 100%);color:#E8ECF9;overflow:hidden}
.am-sec.am-sec.spot::before{content:'';position:absolute;top:-30%;right:-10%;width:55%;height:120%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,144,208,.22),transparent 75%)}
.am-sec.am-sec.spot .wrap{position:relative;z-index:1}
.am-sec.am-sec.spot .shead h2,.am-sec.am-sec.spot h2,.am-sec.am-sec.spot h3{color:#fff}
.am-sec.am-sec.spot .eyebrow{color:var(--accent-soft)}
.am-sec.am-sec.spot .shead p,.am-sec.am-sec.spot p{color:#b8cad8}
.am-sec.am-sec.spot .feat li{color:#c8d7e3}
.am-sec.am-sec.spot .feat li::before{background:var(--accent-soft)}
/* Bento: erste Icard wird zur Feature-Kachel (bricht das uniforme Raster) */

.am-sec.am-sec .icards.bento .icard:first-child{grid-column:span 2;background:linear-gradient(135deg,rgba(0,144,208,.14),var(--g-lo))}
.am-sec.am-sec .icards.bento .icard:first-child h3{font-size:21px}
@media (max-width:560px){.am-sec.am-sec .icards.bento .icard:first-child{grid-column:span 1}}
/* Editorial: groesserer Lead-Absatz fuer den Sektions-Einstieg */

.am-sec.am-sec .rich p:first-of-type{font-size:17px;color:var(--ink);line-height:1.6}
/* Report-/Chart-Galerie (echte Statistik-Screenshots) */

.am-sec.am-sec .repgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:980px){.am-sec.am-sec .repgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.am-sec.am-sec .repgrid{grid-template-columns:1fr}}
.am-sec.am-sec .rep{display:flex;flex-direction:column;overflow:hidden;padding:0}
.am-sec.am-sec .rep .repimg{background:#fff;padding:14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;height:236px}
/* feste Hoehe: sonst beginnen die Texte
   einer Reihe auf verschiedenen Hoehen, weil die Ansichten unterschiedliche
   Seitenverhaeltnisse haben */

.am-sec.am-sec .rep .repimg img{width:100%;height:auto;max-height:100%;object-fit:contain;border-radius:8px;display:block}
.am-sec.am-sec .rep figcaption{padding:16px 18px 18px}
.am-sec.am-sec .rep figcaption h3{font-size:15.5px;display:flex;align-items:center;gap:9px;margin-bottom:7px}
.am-sec.am-sec .rep figcaption h3 .ic{width:17px;height:17px;color:var(--accent);flex:none}
.am-sec.am-sec .rep figcaption p{font-size:13.5px;color:var(--mut);line-height:1.5}
/* Kundennamen statt Kundenlogos: dieselbe Kachel wie im Kundenverzeichnis
   (.corg), hier in Dreierreihen statt in Viererreihen - die Abschnitte tragen
   sechs Organisationen, das ergibt zwei volle Reihen ohne Rest. */

.am-sec.am-sec .orggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:820px){.am-sec.am-sec .orggrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.am-sec.am-sec .orggrid{grid-template-columns:1fr}}
.am-sec.am-sec .orggrid .corg{min-height:74px;justify-content:center}
/* Integrations-Logos (Devices) */

.am-sec.am-sec .intgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media (max-width:900px){.am-sec.am-sec .intgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.am-sec.am-sec .intgrid{grid-template-columns:repeat(2,1fr)}}
/* Zitat-Karussell */

.am-sec.am-sec .qcarousel{position:relative;max-width:880px;margin:0 auto;display:flex;align-items:center;gap:14px}
/* min-width:0 ist noetig, damit die Buehne unter ihre Inhaltsbreite schrumpfen
   darf. Ohne das schiebt sie auf sehr schmalen Geraeten (360 px) den rechten
   Pfeil aus dem Bild und die ganze Seite laesst sich seitlich wackeln. */

.am-sec.am-sec .qstage{flex:1;min-width:0;display:grid;padding:46px 42px 54px}
.am-sec.am-sec .qs{grid-area:1/1;text-align:center;opacity:0;visibility:hidden;transition:opacity .45s ease}
.am-sec.am-sec .qs.active{opacity:1;visibility:visible}
.am-sec.am-sec .qs .qm{font-size:58px;line-height:.6;color:var(--accent);height:26px;font-weight:900}
.am-sec.am-sec .qs blockquote{font-size:clamp(20px,2.7vw,27px);font-weight:600;line-height:1.36;letter-spacing:-.01em;margin:12px 0 20px}
/* Zitatgeber im Karussell: Portrait links, Name und Rolle rechts. Der Text steht
   linksbuendig neben dem Bild, der Block als Ganzes bleibt mittig unter dem
   Zitat. Nur fuer das Karussell (.qwho); das einzelne Zitat ohne Portrait
   (sec_quote) nutzt dieselbe .who-Klasse und bleibt zentriert. */

.am-sec.am-sec .qs .who.qwho{display:flex;align-items:center;justify-content:center;gap:12px;text-align:left}
.am-sec.am-sec .qs .qpic{flex:none;width:46px;height:46px;border-radius:50%;object-fit:cover;display:block;
  border:2px solid var(--photo-glass-edge);box-shadow:var(--shadow-sm)}
.am-sec.am-sec .qs .who b{font-weight:800;font-size:15px;display:block}
.am-sec.am-sec .qs .who span{display:block;font-size:13px;color:var(--mut);margin-top:2px}
/* Die Flagge laeuft im Text mit, deshalb keine eigene Zeile. */

.am-sec.am-sec .qs .qflag{height:11px;width:auto;margin-right:6px;vertical-align:baseline;border-radius:2px}
@media(max-width:560px){.am-sec.am-sec .qs .who.qwho{gap:10px}
.am-sec.am-sec .qs .qpic{width:40px;height:40px}}
/* Experten-Endorsement (Portrait + Partnerschaftstext) */

.am-sec.am-sec .expert{display:flex;gap:26px;align-items:center;padding:30px 32px;max-width:900px;margin:0 auto}
.am-sec.am-sec .expert .exav{flex:none;width:104px;height:104px;border-radius:50%;overflow:hidden;border:3px solid var(--photo-glass-edge);box-shadow:var(--shadow-sm)}
.am-sec.am-sec .expert .exav img{width:100%;height:100%;object-fit:cover;display:block}
.am-sec.am-sec .expert .kick{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:8px;display:flex;align-items:center;gap:7px}
.am-sec.am-sec .expert .extext{font-size:15.5px;line-height:1.6}
.am-sec.am-sec .expert .extext+.extext{margin-top:12px}
.am-sec.am-sec .expert .exwho{margin-top:13px}
.am-sec.am-sec .expert .exwho b{font-weight:800;font-size:15px}
.am-sec.am-sec .expert .exwho span{display:block;font-size:13px;color:var(--mut);margin-top:2px}
@media (max-width:620px){.am-sec.am-sec .expert{flex-direction:column;text-align:center;padding:26px 22px}}
.am-sec.am-sec .qnav{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--bg2);color:var(--ink);font-size:23px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.am-sec.am-sec .qnav:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.18)}
.am-sec.am-sec .qdots{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;gap:8px}
.am-sec.am-sec .qdots button{width:9px;height:9px;border-radius:50%;border:none;padding:0;background:var(--line);cursor:pointer;transition:background .2s,transform .2s}
.am-sec.am-sec .qdots button.active{background:var(--accent);transform:scale(1.25)}
@media(max-width:560px){.am-sec.am-sec .qcarousel{gap:6px}
.am-sec.am-sec .qnav{width:38px;height:38px;font-size:20px}
.am-sec.am-sec .qstage{padding:34px 20px 50px}}
/* Foto-CTA-Band */

.am-sec.am-sec .band{position:relative;overflow:hidden;isolation:isolate;color:var(--on-photo)}
.am-sec.am-sec .band .bg{position:absolute;inset:0;z-index:-2}
.am-sec.am-sec .band .bg img{width:100%;height:100%;object-fit:cover}
.am-sec.am-sec .band .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,rgba(11,15,38,.6),rgba(11,15,38,.16) 72%)}
html[data-theme="dark"] .am-sec.am-sec .band .bg::after{background:linear-gradient(110deg,rgba(7,10,26,.8),rgba(7,10,26,.34) 72%)}
.am-sec.am-sec .band-inner{position:relative;z-index:2;padding:88px 0}
.am-sec.am-sec .band-panel{max-width:540px;padding:34px 36px}
.am-sec.am-sec .band-panel h2,.am-sec.am-sec .band-panel .eyebrow{color:var(--on-photo)}
.am-sec.am-sec .band-panel.center{margin:0 auto;text-align:center}
.am-sec.am-sec .band-panel.center .eyebrow,.am-sec.am-sec .band-panel.center .cta-row{justify-content:center}
/* Kontakt-/Formularkarten */

.am-sec.am-sec .contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;align-items:start}
@media (max-width:880px){.am-sec.am-sec .contact-grid{grid-template-columns:1fr}}
.am-sec.am-sec .cinfo{padding:30px 32px;display:flex;flex-direction:column;gap:20px}
.am-sec.am-sec .cinfo .row{display:flex;gap:14px;align-items:flex-start}
.am-sec.am-sec .cinfo .row svg{width:20px;height:20px;color:var(--accent);flex-shrink:0;margin-top:3px}
.am-sec.am-sec .cinfo .row b{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:700;margin-bottom:2px}
.am-sec.am-sec .cinfo .row a,.am-sec.am-sec .cinfo .row span{font-size:15.5px;font-weight:600;text-decoration:none;color:var(--ink)}
.am-sec.am-sec .form{padding:30px 32px}
.am-sec.am-sec .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.am-sec.am-sec .field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.am-sec.am-sec .field.full{grid-column:1 / -1}
.am-sec.am-sec .field label{font-size:12.5px;font-weight:700;color:var(--mut)}
.am-sec.am-sec .field input,.am-sec.am-sec .field select,.am-sec.am-sec .field textarea{font:inherit;font-size:14.5px;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);width:100%}
.am-sec.am-sec .field textarea{resize:vertical;min-height:104px}
.am-sec.am-sec .formnote{font-size:12.5px;color:var(--mut);margin-top:12px}
.am-sec.am-sec .formmsg{display:none;margin-top:14px;padding:13px 16px;border-radius:12px;background:var(--chipbg);border:1px solid var(--accent);font-size:14px;color:var(--accent-ink);font-weight:600}
/* Rich-Text (Rechtsseiten) */

.am-sec.am-sec .rich{max-width:840px}
.am-sec.am-sec .rich h3{margin:26px 0 8px}
.am-sec.am-sec .rich p{color:var(--mut);margin-bottom:12px;font-size:15px}
.am-sec.am-sec .rich ul{color:var(--mut);font-size:15px;margin:0 0 12px 22px}
.am-sec.am-sec .rich li{margin-bottom:6px}
/* Verweise im Fliesstext muessen als solche zu erkennen sein: der Bestand
   hinterlegt in den Fallstudien Personen, Organisationen und Modulseiten. */

.am-sec.am-sec .rich a{color:var(--accent-ink);font-weight:600;text-decoration:underline;
  text-decoration-color:rgba(0,144,208,.45);text-underline-offset:3px;
  text-decoration-thickness:1.5px}
.am-sec.am-sec .rich a:hover{text-decoration-color:var(--accent)}
/* Galerie + Lightbox */

.am-sec.am-sec .gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:152px;grid-auto-flow:dense;gap:14px}
.am-sec.am-sec .gallery .gi{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);display:block;cursor:zoom-in}
.am-sec.am-sec .gallery .gi img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.am-sec.am-sec .gallery .gi:hover img{transform:scale(1.05)}
.am-sec.am-sec .gallery .gi.w2{grid-column:span 2}
.am-sec.am-sec .gallery .gi.h2{grid-row:span 2}
.am-sec.am-sec .gallery .gi.big{grid-column:span 2;grid-row:span 2}
@media(max-width:900px){.am-sec.am-sec .gallery{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.am-sec.am-sec .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:128px}}
.am-sec.am-sec .lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(7,10,26,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.am-sec.am-sec .lb.open{display:flex}
.am-sec.am-sec .lb img{max-width:92vw;max-height:84vh;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.am-sec.am-sec .lb .lbx,.am-sec.am-sec .lb .lbn{position:absolute;cursor:pointer;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px;display:flex;align-items:center;justify-content:center;line-height:1;transition:background .2s,transform .2s}
.am-sec.am-sec .lb .lbx{top:20px;right:20px;width:46px;height:46px;font-size:24px}
.am-sec.am-sec .lb .lbx:hover{background:rgba(255,255,255,.26);transform:scale(1.06)}
.am-sec.am-sec .lb .lbn{top:50%;width:54px;height:54px;font-size:30px;transform:translateY(-50%)}
.am-sec.am-sec .lb .lbn:hover{background:rgba(255,255,255,.26);transform:translateY(-50%) scale(1.06)}
.am-sec.am-sec .lb .lbprev{left:18px}
.am-sec.am-sec .lb .lbnext{right:18px}
.am-sec.am-sec .lb .lbcap{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:rgba(255,255,255,.85);font-size:13.5px;padding:0 70px}
.am-sec.am-sec .lb .lbcount{position:absolute;left:0;right:0;top:26px;text-align:center;color:rgba(255,255,255,.7);font-size:12.5px;letter-spacing:.08em}
@media(max-width:560px){.am-sec.am-sec .lb .lbn{width:42px;height:42px;font-size:24px}
.am-sec.am-sec .lb .lbcap{padding:0 56px}}
/* ----- Datensparsames Video: laedt YouTube erst nach Klick (Zwei-Klick-Loesung).
   Vor dem Klick geht KEINE Anfrage an Google, das Standbild liegt lokal. ----- */

.am-sec.am-sec .ytbox{max-width:860px;margin:0 auto;padding:10px}
.am-sec.am-sec .ytframe{position:relative;width:100%;aspect-ratio:16/9;border:0;padding:0;margin:0;display:block;
  border-radius:14px;overflow:hidden;cursor:pointer;background:#0d1512}
.am-sec.am-sec .ytframe img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,filter .3s ease}
.am-sec.am-sec .ytframe:hover img{transform:scale(1.03);filter:brightness(.82)}
.am-sec.am-sec .ytframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Abdunkler, damit der Play-Knopf auf jedem Standbild trägt (auch auf hellen Folien) */

.am-sec.am-sec .ytframe::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(7,10,26,.55) 0,rgba(7,10,26,.22) 46%,rgba(7,10,26,.34) 100%)}
.am-sec.am-sec .ytframe[data-loaded]::after{display:none}
.am-sec.am-sec .ytplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:78px;height:78px;z-index:2;
  border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:var(--cta);border:2px solid rgba(255,255,255,.85);
  box-shadow:0 18px 44px rgba(0,0,0,.5);transition:transform .25s ease,background .25s ease}
.am-sec.am-sec .ytplay svg{width:30px;height:30px;stroke:#fff;fill:#fff;margin-left:4px}
.am-sec.am-sec .ytframe:hover .ytplay{transform:translate(-50%,-50%) scale(1.08);background:#6aa61d}
.am-sec.am-sec .ytnote{margin:12px 2px 0;font-size:13px;color:var(--mut);display:flex;gap:8px;align-items:flex-start;justify-content:center}
.am-sec.am-sec .ytnote svg{width:16px;height:16px;flex:0 0 16px;margin-top:2px;color:var(--accent)}
@media(max-width:560px){.am-sec.am-sec .ytplay{width:60px;height:60px}
.am-sec.am-sec .ytplay svg{width:24px;height:24px}}
.am-sec.am-sec .ytlabel{position:absolute;left:50%;top:calc(50% + 56px);transform:translateX(-50%);z-index:2;
  font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.5)}
@media(max-width:560px){.am-sec.am-sec .ytlabel{top:calc(50% + 44px)}}
/* Auf dem Handy schrumpft die Flaeche, der Knopf aber kaum, und auf Standbildern
   mit eingebranntem Titel sitzt er dann mittendrin. "up" holt ihn ins obere
   Drittel. Nicht als Regel fuer alle: beim Webinar liegt oben die Kernaussage
   der Folie, dort ist die Mitte die bessere Stelle. Gesetzt wird es am
   einzelnen Video (play_high), gemessen am jeweiligen Standbild. */

@media(max-width:560px){.am-sec.am-sec .ytbox.up .ytplay{top:35%}
.am-sec.am-sec .ytbox.up .ytlabel{top:calc(35% + 44px)}}
/* Footer */

.am-sec.am-sec footer{border-top:1px solid var(--line);padding:54px 0 38px;background:var(--bg2)}
/* Fuenf Spalten: Marke, Solutions, Modules, Learn more, Resources. Die letzten
   beiden fuehren dieselben Ziele wie die zwei Bestands-Fussspalten. */

.am-sec.am-sec .fgrid2{display:grid;grid-template-columns:1.45fr 1fr 1fr 1fr 1fr;gap:30px}
@media (max-width:1080px){.am-sec.am-sec .fgrid2{grid-template-columns:1.4fr 1fr 1fr;gap:26px 30px}}
@media (max-width:760px){.am-sec.am-sec .fgrid2{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.am-sec.am-sec .fgrid2{grid-template-columns:1fr}}
.am-sec.am-sec footer .brand{display:inline-flex;align-items:center;margin-bottom:16px;text-decoration:none}
.am-sec.am-sec .foot-logo{height:26px;width:auto;max-width:none}
.am-sec.am-sec .foot-logo.logo-white{display:none}
html[data-theme="dark"] .am-sec.am-sec .foot-logo.logo-white{display:block}
html[data-theme="dark"] .am-sec.am-sec .foot-logo.logo-ink{display:none}
.am-sec.am-sec footer h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:13px}
.am-sec.am-sec footer p,.am-sec.am-sec footer li,.am-sec.am-sec footer a{font-size:13.5px;color:var(--mut);text-decoration:none;line-height:1.95}
.am-sec.am-sec footer a:hover{color:var(--ink)}
.am-sec.am-sec footer ul{list-style:none}
/* Ein Ziel, das aus dem Entwurf herausfuehrt (Hilfeportal, soziales Netz,
   Anmeldung), bekommt denselben kleinen Pfeil wie im Aufklappmenue. */

.am-sec.am-sec footer a.fext::after{content:"\2197";font-size:11px;margin-left:4px;opacity:.65}
/* Die drei sozialen Netze stehen im Bestand in einer eigenen Fussspalte. Hier
   sitzen sie unter der Beschreibung, damit die Spalte nicht halb leer bleibt. */

.am-sec.am-sec .fsocial{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 14px}
.am-sec.am-sec .fsocial a{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
  border:1px solid var(--line);border-radius:999px;padding:7px 13px;line-height:1;white-space:nowrap}
.am-sec.am-sec .fsocial a:hover{border-color:var(--accent);color:var(--accent-ink)}
.am-sec.am-sec .fsocial .ic{width:14px;height:14px;flex:none}
/* Rechtszeile im Fuss – die Bestandsseite fuehrt sie ebenfalls dort. */

.am-sec.am-sec .flegal{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;font-weight:700}
.am-sec.am-sec .flegal a{color:var(--mut);text-decoration:none}
.am-sec.am-sec .flegal a:hover{color:var(--accent-ink)}
.am-sec.am-sec .fnote{margin-top:18px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:12.5px;color:var(--mut)}
.am-sec.am-sec .studiebadge{position:fixed;right:14px;bottom:14px;z-index:55;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--on-photo);background:var(--photo-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--photo-glass-edge);border-radius:999px;padding:8px 14px;box-shadow:var(--shadow-sm)}
@media print{.am-sec.am-sec .studiebadge,.am-sec.am-sec .nav,.am-sec.am-sec .mnav{display:none}}
/* ===================================================================== *//* v5 Design-Uplift – Ambient-Tiefe, Rhythmus, Mikro-Interaktionen.      *//* Rein gestalterisch (CSS-Kaskade ueberschreibt gezielt). Inhalte 1:1.  *//* ===================================================================== *//* Ambient-Aurora: dezente Marken-Lichtfelder hinter transparenten
   Sektionen; opake .alt/.sand-Slabs setzen den Rhythmus dagegen. */

body:has(.am-sec){
  background:
    radial-gradient(52% 48% at 4% -6%,rgba(0,144,208,.13),transparent 60%),
    radial-gradient(44% 46% at 106% 12%,rgba(12,113,195,.11),transparent 64%),
    radial-gradient(54% 52% at 96% 106%,rgba(125,189,36,.08),transparent 64%),
    var(--bg)}
.am-sec.am-sec{background:transparent}
html[data-theme="dark"] body:has(.am-sec){
  background:
    radial-gradient(52% 48% at 4% -6%,rgba(63,182,236,.15),transparent 60%),
    radial-gradient(44% 46% at 106% 12%,rgba(62,151,223,.12),transparent 64%),
    radial-gradient(54% 52% at 96% 106%,rgba(142,203,46,.09),transparent 64%),
    var(--bg)}
html[data-theme="dark"] .am-sec.am-sec{background:transparent}
/* Scroll-Fortschritt – duenne Markenlinie ganz oben */

.am-sec.am-sec .progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:80;pointer-events:none;
  background:linear-gradient(90deg,var(--accent),var(--blue) 60%,var(--cta));
  box-shadow:0 0 14px rgba(0,144,208,.55)}
/* Hero – groessere, dramatischere Headline + Gradient-Akzentwort */

.am-sec.am-sec .hero h1{font-size:clamp(40px,6.6vw,76px);line-height:.99;letter-spacing:-.035em}
/* Akzentwort: im hellen Theme tiefes, sattes Blau (lesbar auf hellem Glas);
   im Dark-Theme das hellere Cyan-Gradient fuer Drama. */

.am-sec.am-sec .hero h1 .acc{background:linear-gradient(110deg,#0B5FA5,#0090D0 55%,#0B5FA5);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#0B5FA5}
html[data-theme=dark] .am-sec.am-sec .hero h1 .acc{background:linear-gradient(110deg,#34c2ff,#8fe3ff 50%,#34c2ff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#7fdcff}
.am-sec.am-sec .hero-panel .lead{font-size:17.5px;line-height:1.6}
/* Hero-Kennzahlen als Glas-Pillen statt nackter Text */

.am-sec.am-sec .hero-stats{gap:10px!important}
.am-sec.am-sec .hero-stats .st{background:rgba(255,255,255,.15);border:1px solid var(--photo-glass-edge);
  border-radius:14px;padding:11px 15px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.am-sec.am-sec .hero-stats .st b{display:block;font-size:16.5px;font-weight:900;letter-spacing:-.02em;color:#fff;line-height:1.1}
.am-sec.am-sec .hero-stats .st span{font-size:11.5px;opacity:.86;letter-spacing:.01em}
/* Zentrierte Sektionskoepfe bekommen eine Marken-Unterstreichung */

.am-sec.am-sec .shead.center h2{position:relative;margin-bottom:24px}
.am-sec.am-sec .shead.center h2::after{content:'';position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);
  width:58px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--blue))}
/* Karten – spuerbarer Lift + Glow, Icon-Chip hebt sich mit */

.am-sec.am-sec .card,.am-sec.am-sec .icard,.am-sec.am-sec .pillar,.am-sec.am-sec .rep{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.am-sec.am-sec .card:hover,.am-sec.am-sec .icard:hover,.am-sec.am-sec .pillar:hover,.am-sec.am-sec .rep:hover{transform:translateY(-7px)}
.am-sec.am-sec .g.ring:hover{box-shadow:inset 0 1px 0 var(--edge),inset 0 0 0 1px var(--iring),0 30px 64px rgba(28,36,75,.20)}
.am-sec.am-sec .icard .ich{transition:transform .38s cubic-bezier(.2,.7,.2,1),box-shadow .38s}
.am-sec.am-sec .icard:hover .ich{transform:translateY(-2px) scale(1.07);box-shadow:0 16px 32px rgba(0,144,208,.52)}
.am-sec.am-sec .icard.b:hover .ich{box-shadow:0 16px 32px rgba(12,113,195,.5)}
.am-sec.am-sec .pillar:hover .pich{border-color:var(--accent)}
.am-sec.am-sec .pillar .pich{transition:border-color .3s}
/* Gestaffeltes Reveal in Rastern (Kaskade statt gleichzeitig) */

.am-sec.am-sec .cards3>.rv:nth-child(2),.am-sec.am-sec .cards2>.rv:nth-child(2),.am-sec.am-sec .cards4>.rv:nth-child(2),.am-sec.am-sec .icards>.rv:nth-child(2),.am-sec.am-sec .pillars>.rv:nth-child(2),.am-sec.am-sec .repgrid>.rv:nth-child(2),.am-sec.am-sec .orggrid>.rv:nth-child(2){transition-delay:.06s}
.am-sec.am-sec .cards3>.rv:nth-child(3),.am-sec.am-sec .cards4>.rv:nth-child(3),.am-sec.am-sec .icards>.rv:nth-child(3),.am-sec.am-sec .pillars>.rv:nth-child(3),.am-sec.am-sec .repgrid>.rv:nth-child(3),.am-sec.am-sec .orggrid>.rv:nth-child(3){transition-delay:.12s}
.am-sec.am-sec .cards4>.rv:nth-child(4),.am-sec.am-sec .icards>.rv:nth-child(4),.am-sec.am-sec .pillars>.rv:nth-child(4),.am-sec.am-sec .repgrid>.rv:nth-child(4),.am-sec.am-sec .orggrid>.rv:nth-child(4){transition-delay:.18s}
.am-sec.am-sec .icards>.rv:nth-child(5),.am-sec.am-sec .repgrid>.rv:nth-child(5),.am-sec.am-sec .orggrid>.rv:nth-child(5){transition-delay:.24s}
.am-sec.am-sec .icards>.rv:nth-child(6),.am-sec.am-sec .repgrid>.rv:nth-child(6),.am-sec.am-sec .orggrid>.rv:nth-child(6){transition-delay:.30s}
/* Primaerbutton – sanfter Licht-Sweep beim Hover */

.am-sec.am-sec .btn{position:relative;overflow:hidden;isolation:isolate}
.am-sec.am-sec .btn-p::before,.am-sec.am-sec .btn-b::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.5) 50%,transparent 68%);
  transform:translateX(-130%)}
.am-sec.am-sec .btn-p:hover::before,.am-sec.am-sec .btn-b:hover::before{transform:translateX(130%);transition:transform .75s ease}
/* Spotlight-Band – langsam atmender Glow */

@media (prefers-reduced-motion:no-preference){.am-sec.am-sec.spot::before{animation:spotGlow 9s ease-in-out infinite alternate}}
@keyframes spotGlow{from{opacity:.7;transform:translate(0,0)}to{opacity:1;transform:translate(-4%,3%)}}
/* ===== Trust-Marquee (Logos direkt unter dem Hero, Kitman-Move) ===== */

.am-sec.am-sec .marquee-head{text-align:center;font-size:12px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut);margin-bottom:18px}
.am-sec.am-sec .marquee{overflow:hidden;position:relative;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.am-sec.am-sec .marquee .track{display:flex;align-items:center;gap:22px;width:max-content;animation:marq 46s linear infinite}
.am-sec.am-sec .marquee:hover .track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Namenskachel im Laufband: derselbe Aufbau wie die Kacheln des Kundenver-
   zeichnisses (.corg), nur als Kachel im laufenden Band. Umbruch ist hier
   verboten, sonst springt die Bandhoehe von Kachel zu Kachel. */

.am-sec.am-sec .marquee .orgm{flex:none;min-height:74px;display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding:0 28px;border-radius:15px;background:var(--bg2);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s}
.am-sec.am-sec .marquee .orgm:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(28,36,75,.16)}
.am-sec.am-sec .marquee .orgm .cn{font-size:14.5px;font-weight:800;line-height:1.3;color:var(--ink);white-space:nowrap}
.am-sec.am-sec .marquee .orgm .cc{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--mut);white-space:nowrap}
.am-sec.am-sec .marquee .orgm .cc svg{width:12px;height:12px;color:var(--accent);flex:none}
@media (prefers-reduced-motion:reduce){.am-sec.am-sec .marquee{-webkit-mask:none;mask:none}
.am-sec.am-sec .marquee .track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:34px 46px}}
/* ===== App-Sektion (Geraet-Foto + App-Store-Badges, XPS-Move) ===== */

.am-sec.am-sec .appcols{display:grid;grid-template-columns:1.06fr .94fr;gap:48px;align-items:center}
@media (max-width:880px){.am-sec.am-sec .appcols{grid-template-columns:1fr;gap:30px}}
.am-sec.am-sec .appshot{display:flex;justify-content:center}
.am-sec.am-sec .appshot img{width:100%;max-width:430px;height:auto;
  filter:drop-shadow(0 34px 64px rgba(11,15,38,.34))}
.am-sec.am-sec .storebadges{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.am-sec.am-sec .sbadge{display:inline-flex;align-items:center;gap:11px;background:#131A3A;color:#fff;
  border-radius:13px;padding:10px 17px;text-decoration:none;border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.am-sec.am-sec .sbadge:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(11,15,38,.30)}
.am-sec.am-sec .sbadge svg{width:25px;height:25px;flex:none}
.am-sec.am-sec .sbadge .sb{display:flex;flex-direction:column;line-height:1.12;text-align:left}
.am-sec.am-sec .sbadge .sb small{font-size:9.5px;letter-spacing:.05em;opacity:.82;text-transform:uppercase}
.am-sec.am-sec .sbadge .sb b{font-size:15px;font-weight:700;letter-spacing:.01em}
/* ===== Rahmenlose Device-/Screen-Ansichten (nur das Geraet, kein weisser Kasten) ===== */

.am-sec.am-sec .devfig{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
.am-sec.am-sec .devfig::before{display:none}
.am-sec.am-sec .devfig img{width:100%;height:auto;display:block;border-radius:10px;
  filter:drop-shadow(0 26px 56px rgba(11,15,38,.30))}
.am-sec.am-sec .devfig figcaption{text-align:center;font-size:13.5px;color:var(--mut);padding:20px 8px 0;max-width:66ch;margin:0 auto}
/* ===== Integrations-Composite auf dunklem Panel (weisse Logos sichtbar) ===== */

.am-sec.am-sec .intframe{position:relative;overflow:hidden;border-radius:22px;padding:34px 40px;
  background:linear-gradient(155deg,#0E1330 0%,#1C244B 55%,#16295C 100%);
  box-shadow:0 26px 60px rgba(11,15,38,.30),inset 0 0 0 1px rgba(255,255,255,.08)}
.am-sec.am-sec .intframe::after{content:'';position:absolute;top:-30%;right:-12%;width:55%;height:140%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,144,208,.20),transparent 75%)}
.am-sec.am-sec .intframe img{position:relative;z-index:1;width:100%;display:block;border-radius:8px}
/* ===== Integrations-Karten: Logo + Name + Text VERBUNDEN (nicht getrennt) ===== */

.am-sec.am-sec .intcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:920px){.am-sec.am-sec .intcards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.am-sec.am-sec .intcards{grid-template-columns:1fr}}
.am-sec.am-sec .intcard{padding:22px 24px 24px;display:flex;flex-direction:column;gap:9px}
.am-sec.am-sec .intcard .iclogo{height:60px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 16px;margin-bottom:6px}
.am-sec.am-sec .intcard .iclogo img{max-height:36px;max-width:150px;width:auto;object-fit:contain}
.am-sec.am-sec .intcard .iclogo img.inv{filter:brightness(0) saturate(0);opacity:.82}
.am-sec.am-sec .intcard h3{font-size:17px;margin:0}
.am-sec.am-sec .intcard p{color:var(--mut);font-size:13.5px;margin:0;line-height:1.55}

/* ---- Divi wrappers around our own sections ---- */
.et_pb_section.am-bleed,
.et_pb_section.am-bleed > .et_pb_row,
.et_pb_section.am-bleed .et_pb_column,
.et_pb_section.am-bleed .et_pb_module,
.et_pb_section.am-bleed .et_pb_code_inner {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
}
.et_pb_section.am-bleed > .et_pb_row { display: block !important; }

/* ---- Divi's own header and footer give way to ours ---- */
/* Only while ours are actually shipped: the class comes from am_child_body_class. */
body.am-has-parts #main-header,
body.am-has-parts #top-header,
body.am-has-parts #et-secondary-nav,
body.am-has-parts #main-footer { display: none !important; }
body.am-has-parts #page-container { padding-top: 0 !important; margin-top: 0 !important; }
/* Undone from the script when our header did not make it onto the page. */
body.am-parts-missing #main-header,
body.am-parts-missing #main-footer { display: block !important; }


/* ================= Divi's own modules as carriers of the draft ============ */

/* The draft takes the browser defaults as its base: 16px, weight 400. Divi
   sets the body to 14px and weight 500, and both inherit into every piece of
   text the draft does not size or weight itself. The weight is the quieter of
   the two: it makes all the body copy a step heavy and it widens the ch unit,
   which is what the draft measures its column widths in. */
.am-sec.am-sec { font-size: 16px; font-weight: 400; }
/* Divi hands every list a line height in pixels, and that breaks the chain
   of the draft's unitless one: a list item set at 14.5px then takes the line
   of the 16px text around it. Saying the number again mends the chain, and
   the number is read out of the draft's own body rule. */
.am-sec.am-sec ul, .am-sec.am-sec ol { line-height: 1.62; }
/* The same for the headings. Divi gives every one of them a line height of its
   own (h3 one and a third, h4 a bare one), and the draft names one only where
   it wants a different one: everywhere else a heading takes the line of the
   text around it. :where() carries no weight, so this reaches past Divi and
   steps aside wherever the draft speaks for itself. */
.am-sec.am-sec :where(h1, h2, h3, h4, h5, h6) { line-height: 1.62; }
/* Divi paints every heading #333 by name. The draft names no colour there at
   all: a headline takes the ink of whatever it stands in, which is how the
   same headline comes out dark on a white band and light on a photo. `inherit`
   gives that chain back rather than putting a second fixed colour in its
   place. */
.am-sec.am-sec h1, .am-sec.am-sec h2, .am-sec.am-sec h3,
.am-sec.am-sec h4, .am-sec.am-sec h5, .am-sec.am-sec h6 { color: inherit; }
/* Divi draws a quote the way a forum does: a five pixel blue bar down its
   left side and twenty pixels of air after it. The blanket reset takes the
   padding, because padding is a distance and the reset names distances, but a
   border is a decoration and stayed. The draft's quote carries neither. */
.am-sec.am-sec blockquote { border-left: 0; }
/* A <button> does not inherit its font family, and the draft names one only on
   .tabbtn and .pager button (`font: inherit`). Everywhere else its buttons
   therefore render in the browser's own button face, Arial, while Divi gives
   them `font-family: inherit` and they come out in Inter. That is the draft's
   accident, not its intent, but the draft is the agreed reference and the
   build has to look like it, so the browser default is written out here.
   Two classes and a tag: enough to reach past Divi's bare `button`, not enough
   to reach the two places where the draft does name a font. Named rather than
   left to the browser, because only Chrome's default is Arial; stating it
   keeps every browser on the face the reference was measured in. */
.am-sec.am-sec button { font-family: Arial; }

/* ---- 1. Section stands in for our <section> ---- */
.et_pb_section.am-mod {
  --am-sec-air: 84px; --am-wrap-pad: 24px;
  padding: var(--am-sec-air) 0; position: relative;
}
/* The same sticky section, one level up: Divi takes the bottom air off the
   section itself as well. Said again with the same custom property, so the
   distance is still written once. */
.et_pb_section.am-mod.wrap-sec.et_pb_section_sticky {
  padding-bottom: var(--am-sec-air) !important;
}
.et_pb_section.am-mod.alt { background: var(--bg2); }
/* The page background lies on <body> (see page_background), and Divi paints
   its page wrappers white on top of it. The sections themselves are cleared
   where the body rule used to reach them, so a band's own colour still wins. */
body:has(.am-sec) :is(#page-container, #et-main-area, #main-content) {
  background-color: transparent;
}

/* ---- Row stands in for .wrap ---- */
.et_pb_section.am-mod > .et_pb_row:not(.founder) {
  width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--am-wrap-pad);
}
/* A row that is a box inside the wrap and brings a width of its own. */
.et_pb_section.am-mod > .et_pb_row.qcarousel {
  max-width: calc(880px + 2 * var(--am-wrap-pad));
}
/* A card is not the wrap: it stands inside it, so it is as wide as the wrap's
   inside and keeps the padding the draft gives the card. */
.et_pb_section.am-mod > .et_pb_row.founder {
  width: 100%; margin: 0 auto;
  max-width: calc(1180px - 2 * var(--am-wrap-pad));
  padding-bottom: 30px !important;
}
/* Divi gives every column a percentage width, a gutter and a float. Our grids
   set their own. No max-width here: the draft puts its panel widths on the very
   element Divi's column stands in for, and a blanket max-width:none takes every
   one of them away (the page hero panel went from 760px to the full row). */
.et_pb_section.am-mod .et_pb_column {
  width: auto; margin: 0; float: none;
}
/* Below 980px Divi's responsive sheet sets the width again, with the same
   weight as the rule above and printed after it (".et_pb_column" and
   ".et_pb_row .et_pb_column.et_pb_column_1_4" at 100%, and 47.25% for the
   1/4 columns of some row shapes). In a flex row such as the carousel that
   makes every column claim the whole row. One level more of weight keeps the
   reset between 480 and 980px; .center-col below still wins, it weighs more.
   Below 480px Divi adds !important, see the carousel rule after this one. */
.et_pb_section.am-mod > .et_pb_row > .et_pb_column {
  width: auto;
}
/* Below 480px Divi makes it ".et_pb_column { width: 100% !important }", and
   no weight beats !important. In the carousel that gave each arrow column the
   whole row as its basis; they shrank to 145px and the stage to its padding.
   A cap holds against the !important width: the arrow column is exactly as
   wide as its button, as in the draft. */
.et_pb_section.am-mod > .et_pb_row.qcarousel > .et_pb_column:not(.qstage) {
  flex: none; max-width: max-content;
}
/* Our sections span the window, so nothing in them may reach past its sides.
   The glow behind the app picture reaches 7% beyond the picture; in the draft
   the picture keeps its own 370px, here Divi's image module takes the full
   column and at 430px the glow ended 3px outside the window, enough to make
   the page scroll sideways. clip, not hidden: it makes no scroll container,
   so sticky elements inside keep working, and the vertical axis stays open. */
.et_pb_section.am-mod { overflow-x: clip; }
.et_pb_section.am-mod .et_pb_module { margin-bottom: 0; }
/* A floor under Divi, not a ceiling over the draft: :where() carries no
   weight of its own, so this clears the margin Divi's own reset leaves on
   the first element of a text module, and steps aside wherever the draft
   asks for one itself. */
:where(.am-mod) :where(.et_pb_text_inner) > :first-child { margin-top: 0; }
.et_pb_section.am-mod .et_pb_row + .et_pb_row { margin-top: 24px; }

/* ---- The two photo bands. The picture is Divi's section background now, so
   the gradient that keeps the text legible has no .bg element left to sit on. -- */
.et_pb_section.am-mod.pagehero,
.et_pb_section.am-mod.band {
  overflow: hidden; isolation: isolate;
  background-size: cover; background-position: center;
}
/* The panel sits in the middle of the photo, as in the draft: as much air
   under the menu as under the panel, on any screen height. */
.et_pb_section.am-mod.pagehero { min-height: 52vh; display: flex; align-items: center; }
/* The home page's head is the same shape one size larger, and its box comes
   out of the draft's own .hero rule. */
.et_pb_section.am-mod.hero { position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; }
.am-sec.am-sec.am-mod.hero {
  padding-top: 120px !important;
  padding-bottom: 108px !important;
}
/* The hook class rides along on the panel's row so the draft's `.hero h1`
   still finds an ancestor. Three of the properties do not belong there: the
   window height, the flex box and the clip are the section's, not the wrap's. */
.et_pb_section.am-mod > .et_pb_row.hero {
  min-height: 0; display: block; overflow: visible;
}
/* The slideshow is not the wrap: it lies behind the whole head (inset: 0), so
   it gives up the wrap's cap and its side air. This takes two caps away and
   states no number of the draft's. */
.et_pb_section.am-mod > .et_pb_row.hslides { max-width: none; padding: 0; }
/* Divi's builder pins rows and columns to position: relative with an ID
   selector (.et-db #et-boc .et-l .et_pb_row); only !important beats an ID.
   Without it the slideshow stands beside the hero panel in the builder. The
   front end computes absolute already and does not change. */
.et_pb_section.am-mod > .et_pb_row.hslides,
.et_pb_section.am-mod > .et_pb_row.hslides > .et_pb_column.hslide { position: absolute !important; }
/* The slide's picture fills the slide, and the draft sizes it with a height of
   100%. A percentage height needs a parent that has one, so Divi's module and
   its <span> step out of the way and the picture is the slide's own child,
   which is what it is in the draft. */
.am-mod .et_pb_row.hslides .et_pb_image,
.am-mod .et_pb_row.hslides .et_pb_image .et_pb_image_wrap { display: contents; }
/* A row that carries a piece the draft positions against the section itself.
   The head is a flex container, so a row with a box of its own would stand
   next to the panel as a second item; row, column and module give up their
   boxes and the draft's own element is the section's child again. */
.am-mod .et_pb_row.am-loose,
.am-mod .et_pb_row.am-loose > .et_pb_column,
.am-mod .et_pb_row.am-loose > .et_pb_column > .et_pb_module,
.am-mod .et_pb_row.am-loose > .et_pb_column > .et_pb_module > .et_pb_text_inner {
  display: contents;
}
/* Divi's customizer lifts the first section of every page off the header, and
   it says so with !important, which beats the section's own setting on every
   page this theme serves. Our header is the draft's own and the hero is built
   to sit under it, so the lift has to go. It answers in kind, and only inside
   our own sections; the number is read out of the draft's own hero rule. */
.am-sec.am-sec.am-mod.pagehero { padding-top: 110px !important; }
/* A hero that carries a picture of the software beside its panel stands taller.
   The number is the draft's own, and it has to be written here because
   .pagehero is a section class the scoping cannot reach (see SECTION_CLASSES). */
.et_pb_section.am-mod.pagehero.has-fig { min-height: 64vh; }
.et_pb_section.am-mod.band { color: var(--on-photo); }
.et_pb_section.am-mod.pagehero::after,
.et_pb_section.am-mod.band::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.et_pb_section.am-mod.pagehero::after {
  background: linear-gradient(180deg, rgba(11,15,38,.52) 0%, rgba(11,15,38,.2) 50%, rgba(11,15,38,.7) 100%);
}
.et_pb_section.am-mod.band::after {
  background: linear-gradient(110deg, rgba(11,15,38,.6), rgba(11,15,38,.16) 72%);
}
[data-theme=dark] .et_pb_section.am-mod.band::after {
  background: linear-gradient(110deg, rgba(7,10,26,.8), rgba(7,10,26,.34) 72%);
}
.et_pb_section.am-mod.pagehero > .et_pb_row,
.et_pb_section.am-mod.band > .et_pb_row { position: relative; z-index: 2; }
/* The hook classes ride along on the row so the draft's descendant rules still
   find an ancestor. These two properties are the only ones that do not belong
   there. */
.et_pb_section.am-mod > .et_pb_row.pagehero:not(.pagehero-grid) {
  min-height: 0; display: block;
}
/* Where the hero carries a picture the row is the draft's two column grid, so
   only the height goes; the display belongs to the draft's own rule. */
.et_pb_section.am-mod > .et_pb_row.pagehero.pagehero-grid { min-height: 0; }
/* The thank-you page centres its head panel, which the draft writes inline on
   the panel. The row does the centring (see center-col), so here it needs the
   flex back that the rule above takes away. */
.et_pb_section.am-mod > .et_pb_row.pagehero.center-col:not(.pagehero-grid) {
  display: flex; justify-content: center;
}
.am-mod .et_pb_column.pagehero-panel.ph-center { text-align: center; }

/* The draft hangs 46px under every section head on .shead itself, and .shead
   is a Divi column here, whose margins the reset above clears. So the row
   carries it, and the generic row gap must not add to it. */
.et_pb_section.am-mod > .et_pb_row.shead-row { margin-bottom: 46px; }
.et_pb_section.am-mod > .et_pb_row.shead-row + .et_pb_row { margin-top: 0; }
/* Two rows that carry a distance of their own instead. */
.et_pb_section.am-mod > .et_pb_row.repgrid + .et_pb_row.repgrid {
  margin-top: 18px;
}
.et_pb_section.am-mod > .et_pb_row.metricrow { margin-top: 8px; }
.et_pb_section.am-mod > .et_pb_row.prow { margin-bottom: 26px; }
.et_pb_section.am-mod > .et_pb_row.solrow + .et_pb_row.solrow {
  margin-top: 44px;
}
@media (max-width: 900px) {
  .et_pb_section.am-mod > .et_pb_row.solrow + .et_pb_row.solrow {
    margin-top: 36px;
  }
}
/* The note under the outcome band hangs its own 24px and centres itself, so
   the row must not add the generic one. The two columns of the partner
   overview carry their distance to the running text the same way. */
.et_pb_section.am-mod > .et_pb_row.metric-note-row,
.et_pb_section.am-mod > .et_pb_row.prow + .et_pb_row { margin-top: 0; }
/* The tabbed box keeps its own rhythm. Its rows are the tab bar, the panes
   and the two notes, and every one of the three distances is written on the
   element itself: 22px under .tabnav, and the two notes' own margins. Divi's
   24px between two rows would come on top of each of them. */
.et_pb_section.am-mod.tabs > .et_pb_row + .et_pb_row { margin-top: 0; }
/* The thank-you page's button pair: its column carries the draft's 26px. */
.et_pb_section.am-mod > .et_pb_row.cta-pair-row { margin-top: 0; }
/* Two groups of a report list are no longer next to each other: the first
   group's list stands between the two headings. The draft's own distance is
   read out and hung on that pair instead. */
.am-mod .et_pb_row.tabpane > .et_pb_column.rlist + .et_pb_column.rgroup { margin-top:26px }

/* ---- Report cards ---- */
/* .repimg is a fixed height box that centres its picture; Divi puts a span
   between the two, and a span with no height of its own leaves the picture
   nothing to be centred in. */
.am-mod .et_pb_image.repimg .et_pb_image_wrap { display: contents; }
/* The guide's cover is a box of its own in the draft, with a border and a
   rounded corner clipping the picture. The module is that box, so Divi's span
   between the two has to go: an inline span leaves a line's descender under
   the picture, which the clip would then show as a strip of background. */
.am-mod .et_pb_image.gshot .et_pb_image_wrap { display: contents; }
/* The founder's portrait and the eight team portraits are round boxes that
   clip their picture, and the module is that box. Same reasoning as the
   guide's cover, and the same remedy. */
.am-mod .et_pb_image.fav .et_pb_image_wrap,
.am-mod .et_pb_image.tav .et_pb_image_wrap { display: contents; }
/* The draft pins the guide's download button to the bottom of its card, so
   three cards of different heights line their buttons up. A margin of auto
   only moves a flex item, and the item is Divi's block wrapper, not the
   button. Letting the wrapper out of the layout gives the rule its element. */
.am-mod .et_pb_column.gcard > .et_pb_button_module_wrapper { display: contents; }

/* ---- The partner mark ---- */
/* The draft leaves it inline inside a centred box. That is what centres it,
   and the line it sits on is what gives the plate its last few pixels below.
   Divi's image is a block, which takes both away. */
.am-mod .partner .et_pb_image img { display: inline-block; }

/* ---- 2. Row as grid: its columns become the cells ---- */
.am-mod .et_pb_row.figrow,
.am-mod .et_pb_row.cols2 { display: grid; align-items: center; }
.am-mod .et_pb_row.figrow { grid-template-columns: .9fr 1.1fr; gap: 50px; }
.am-mod .et_pb_row.cols2 { grid-template-columns: 1.02fr .98fr; gap: 42px; }
@media (max-width: 900px) {
  .am-mod .et_pb_row.figrow,
  .am-mod .et_pb_row.cols2 { grid-template-columns: 1fr; gap: 26px; }
}
/* Divi clears its floats with a pseudo-element on the row. In a grid that is
   not a clearfix but a cell: it opens a second track and hangs the track gap
   under the section, 50px here and 42px there. */
.am-mod .et_pb_row.figrow::before, .am-mod .et_pb_row.figrow::after,
.am-mod .et_pb_row.cols2::before, .am-mod .et_pb_row.cols2::after,
.am-mod .et_pb_row.flow::before, .am-mod .et_pb_row.flow::after,
.am-mod .et_pb_row.practice::before, .am-mod .et_pb_row.practice::after,
.am-mod .et_pb_row.cards2::before, .am-mod .et_pb_row.cards2::after,
.am-mod .et_pb_row.cards3::before, .am-mod .et_pb_row.cards3::after,
.am-mod .et_pb_row.pillars::before, .am-mod .et_pb_row.pillars::after,
.am-mod .et_pb_row.pagehero-grid::before, .am-mod .et_pb_row.pagehero-grid::after,
.am-mod .et_pb_row.repgrid::before, .am-mod .et_pb_row.repgrid::after,
.am-mod .et_pb_row.metricrow::before, .am-mod .et_pb_row.metricrow::after,
.am-mod .et_pb_row.prow::before, .am-mod .et_pb_row.prow::after,
.am-mod .et_pb_row.legwrap::before, .am-mod .et_pb_row.legwrap::after,
.am-mod .et_pb_row.legcards::before, .am-mod .et_pb_row.legcards::after,
.am-mod .et_pb_row.gcards::before, .am-mod .et_pb_row.gcards::after,
.am-mod .et_pb_row.founder::before, .am-mod .et_pb_row.founder::after,
.am-mod .et_pb_row.team::before, .am-mod .et_pb_row.team::after,
.am-mod .et_pb_row.roles::before, .am-mod .et_pb_row.roles::after,
.am-mod .et_pb_row.solrow::before, .am-mod .et_pb_row.solrow::after,
.am-mod .et_pb_row.tlwrap::before, .am-mod .et_pb_row.tlwrap::after,
.am-mod .et_pb_row.appcols::before, .am-mod .et_pb_row.appcols::after,
.am-mod .et_pb_row.qcarousel::before, .am-mod .et_pb_row.qcarousel::after,
.am-mod .et_pb_row.formlay::before, .am-mod .et_pb_row.formlay::after { display: none; }
/* Most of them need no grid of their own here: the class is the draft's and
   the row wears it, so the draft's rule (three columns, then one below 980px;
   1fr 1.1fr, then one below 900px) applies to the row as written. */

/* ---- Column as grid or flex container ---- */
/* No justify-content: the draft leaves the rows flush left inside the centred
   band, and the ragged right edge is what it looks like. Centring each row is
   a different picture. */
.am-mod .et_pb_column.chips {
  display: flex; flex-wrap: wrap; gap: 11px;
  max-width: 980px; margin-left: auto; margin-right: auto;
}
/* 9px, the draft's own gap between the tick and the word: here it sits one
   box further in, because Divi wraps every text module's content. */
.am-mod .et_pb_text.chip .et_pb_text_inner { display: inline-flex; align-items: center; gap: 9px; }
.am-mod .et_pb_column.orggrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 820px) { .am-mod .et_pb_column.orggrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .am-mod .et_pb_column.orggrid { grid-template-columns: 1fr; } }
.am-mod .et_pb_text.corg .et_pb_text_inner { display: flex; flex-direction: column; gap: 6px; }
.am-mod .et_pb_column.cta-center { display: flex; justify-content: center; margin-top: 26px; }
/* The same row with two buttons, as the thank-you page has it: the draft's
   .cta-row gap and wrap, and the wrappers stretch so the filled button grows
   to the outlined one's height (see the band's panel below). */
.am-mod .et_pb_column.cta-pair {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px;
}
.am-mod .et_pb_column.cta-pair > .et_pb_button_module_wrapper { display: flex; }
/* Divi pins the last column of every row with margin-right: 0 !important, so a
   centred column cannot be had through its own margins. The row centres it. */
.et_pb_section.am-mod > .et_pb_row.center-col { display: flex; justify-content: center; }
/* A flex item shrinks to its content, so it needs the full width to grow into
   its max-width. The margins are named explicitly: an auto margin would win
   over justify-content and push the column to one side. */
.et_pb_section.am-mod > .et_pb_row.center-col > .et_pb_column {
  width: 100%; margin-left: 0; margin-right: 0;
}
.et_pb_section.am-mod .et_pb_column.panel-box { max-width: 920px; padding: 34px 38px; }

/* ---- Divi's own idea of alignment ---- */
/* Divi hangs `et_pb_text_align_left` on every text module, because a module
   without a stated orientation defaults to left. The converter never states
   one, so this is an opinion nobody asked for, and it beats the alignment the
   draft inherits down from a container: `.shead.center` centres its heading,
   the module class turns it back to the left. The box keeps its place, so no
   height measurement ever sees it; only the glyphs move.
   Handing the module `inherit` gives the decision back to the draft.
   The weight is deliberate and low: two classes, enough to beat Divi's single
   one and not enough to reach the draft's own rules, which carry three. A
   stronger selector took the alignment away from `.chips`, which the draft
   centres on the element itself, so it would have replaced one wrong opinion
   with another. */
.am-mod .et_pb_text_align_left,
.am-mod .et_pb_text_align_center,
.am-mod .et_pb_text_align_right,
.am-mod .et_pb_text_align_justified {
  text-align: inherit;
}

/* ---- The closing band's buttons ---- */
/* The draft puts them in a .cta-row: side by side, 12px between, and wrapping
   when they do not fit. Divi has no element for a pair of buttons, it gives
   each module a block wrapper of its own, so they would stand one below the
   other. The panel becomes the row instead: everything above the buttons takes
   the full width, the buttons take their own, and the 12px is the row's column
   gap, which leaves a button that is alone on its line centred.
   The draft's gap is 12px in both directions, and the row gap is the one that
   shows when the two buttons do not fit on a line. It applies to every line of
   the panel, though, not only to the buttons', so every distance above them is
   written that much shorter: the converter subtracts the same number, which
   both sides read from one place. Doing it with margins instead is a trap, the
   buttons being stretched to the taller of them: a margin on a stretched item
   makes it grow, not move. */
.am-mod .et_pb_column.band-panel {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px;
}
.am-mod .et_pb_column.band-panel > *:not(.et_pb_button_module_wrapper) {
  flex: 0 0 100%;
}
/* The head panel of the home page carries the same button row, and the draft
   leaves it flush left there. Same construction as the band's panel, one line
   at a time, the buttons on a line of their own. */
.am-mod .et_pb_column.hero-panel {
  display: flex; flex-wrap: wrap; gap: 12px;
}
.am-mod .et_pb_column.hero-panel > *:not(.et_pb_button_module_wrapper) {
  flex: 0 0 100%;
}
.am-mod .et_pb_column.hero-panel > .et_pb_button_module_wrapper { display: flex; }
/* In the draft's .cta-row the two buttons are flex items and stretch to the
   taller of them, which is the outlined one: its 1px border makes it 2px
   taller than the filled one. Divi puts a wrapper between the row and the
   button, and a wrapper that stretches passes nothing on unless it is a flex
   container itself. */
.am-mod .et_pb_column.band-panel > .et_pb_button_module_wrapper { display: flex; }

/* ---- The knowledge list ---- */
/* The draft nests .libwrap inside the section and hangs 6px on it. Here the
   section is .libwrap, so that margin would sit outside it: the first row
   carries it instead, and this takes the duplicate away. */
.am-mod.libwrap { margin-top: 0; }
/* The grid is the column and the cards are its cells. Between them stands
   Divi's module wrapper, which would become the cell itself, so it and its
   inner box step out of the layout and let the card take their place. The
   same for the bar, the chip rows and the empty notice: with the wrappers
   transparent the draft's own boxes sit exactly where its rules expect them.
   Both levels are named because Divi wraps a module's content a second time. */
.am-mod .et_pb_column.libgrid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start;
}
@media (max-width: 1100px) { .am-mod .et_pb_column.libgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .am-mod .et_pb_column.libgrid { grid-template-columns: 1fr; } }
/* The blog's wall is the same arrangement with the draft's own numbers: its
   cards stretch to the tallest in their row, so no align-items here. */
.am-mod .et_pb_column.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1060px) { .am-mod .et_pb_column.pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .am-mod .et_pb_column.pgrid { grid-template-columns: 1fr; } }
/* The contact page's representatives and the pricing page's packages: the same
   arrangement, with the draft's numbers. */
.am-mod .et_pb_column.offices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1080px) { .am-mod .et_pb_column.offices { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .am-mod .et_pb_column.offices { grid-template-columns: 1fr; } }
.am-mod .et_pb_column.packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1080px) { .am-mod .et_pb_column.packs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .am-mod .et_pb_column.packs { grid-template-columns: 1fr; } }
/* The pricing page's chips stand in a 1000px box the draft writes inline. */
.am-mod .et_pb_column.chips-1000 { max-width: 1000px; }
/* Calculated Fields Form renders its own markup: fieldsets for the groups,
   .fields > label + .dfield for a field, a tooltip div for an error. The rules
   below give that markup the draft's .fgroup/.fld/.flab/.ferr/.chk look. Each
   selector carries #fbuilder, because the plugin's templates style through
   `.cp_cff_NN #fbuilder input` and an id outweighs any number of classes. */
.am-mod .fform #fbuilder, .am-mod .fform #fbuilder #fieldlist_1 { padding: 0; margin: 0; }
.am-mod .fform #fbuilder .clearer { display: none; }
.am-mod .fform #fbuilder .fields { float: none; width: auto; margin: 0; padding: 0; clear: none !important; }
.am-mod .fform #fbuilder .cff-container-field > fieldset { border: 0; margin: 0; padding: 0; background: none; box-shadow: none; min-width: 0; }
.am-mod .fform #fbuilder .cff-container-field + .cff-container-field { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--line); }
.am-mod .fform #fbuilder .cff-container-field > fieldset > legend {
  display: flex; align-items: center; gap: 10px; float: none; width: auto; margin: 0 0 16px; padding: 0;
  border: 0; background: none; font-size: 11px; font-weight: 800; letter-spacing: .12em; line-height: inherit;
  text-transform: uppercase; color: var(--accent-ink); }
/* The draft states .fgrid twice; the later rule (gap 14px) is the one that holds. */
.am-mod .fform #fbuilder .cff-container-field > fieldset > div { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.am-mod .fform #fbuilder .cff-container-field > fieldset > div > .fields:not(.column2) { grid-column: 1 / -1; }
@media (max-width: 620px) { .am-mod .fform #fbuilder .cff-container-field > fieldset > div { grid-template-columns: 1fr; } }
.am-mod .fform #fbuilder .fields > .dfield { position: relative; padding: 0; margin: 0; }
.am-mod .fform #fbuilder .fields:not(.cff-button-field) { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.am-mod .fform #fbuilder .fields > label {
  display: block; width: auto; float: none; margin: 0; padding: 0;
  font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.am-mod .fform #fbuilder .fields > label .r { color: var(--accent); font-style: normal; margin-left: 2px; font-weight: 700; }
.am-mod .fform #fbuilder input[type=text], .am-mod .fform #fbuilder input[type=email],
.am-mod .fform #fbuilder input[type=tel], .am-mod .fform #fbuilder input[type=number],
.am-mod .fform #fbuilder select, .am-mod .fform #fbuilder textarea {
  width: 100%; max-width: none; height: auto; min-height: 0; margin: 0; box-sizing: border-box;
  font-family: inherit; font-size: 14.6px; line-height: 1.5; color: var(--ink);
  background-color: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px;
  box-shadow: none; transition: border-color .18s, box-shadow .18s, background .18s; appearance: none; }
.am-mod .fform #fbuilder textarea { min-height: 104px; resize: vertical; }
.am-mod .fform #fbuilder select { background-image: var(--caret); background-repeat: no-repeat;
  background-position: right 12px center; background-size: 11px; padding-right: 34px; }
.am-mod .fform #fbuilder input:focus, .am-mod .fform #fbuilder select:focus, .am-mod .fform #fbuilder textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,144,208,.18); }
/* The error: the plugin marks the control and fills a tooltip below it. The
   draft shows a red frame and a plain line of text. */
.am-mod .fform #fbuilder .cpefb_error:is(input, select, textarea) {
  border-color: var(--bad); box-shadow: 0 0 0 3px rgba(214,69,60,.14); }
.am-mod .fform #fbuilder div.cpefb_error.message {
  position: static !important; margin: 6px 0 0; padding: 0; background: none; border: 0; box-shadow: none;
  font-size: 12.4px; font-weight: 600; line-height: 1.4; color: var(--bad); }
.am-mod .fform #fbuilder div.cpefb_error.message::after { display: none; }
/* Checkboxes and radios: the draft's .chkgrid box with .chk rows. The boxes
   carry .am-mod twice: template 13 styles them from inside a media query with
   the same weight and comes later. */
.am-mod .fform #fbuilder :is(.cff-checkbox-field, .cff-radiobutton-field) > .dfield {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(226px, 1fr)); gap: 7px 12px;
  border: 1px solid var(--line); border-radius: 14px; padding: 13px; background: var(--bg2); }
.am-mod .fform #fbuilder :is(.cff-checkbox-field, .cff-radiobutton-field) > .dfield > .uh:empty { display: none; }
.am-mod .fform #fbuilder :is(.cff-checkbox-field, .cff-radiobutton-field) > .dfield:has(.cpefb_error) {
  border-color: var(--bad); box-shadow: 0 0 0 3px rgba(214,69,60,.14); }
.am-mod .fform #fbuilder :is(.cff-checkbox-field, .cff-radiobutton-field) .one_column { width: auto; float: none; margin: 0; }
.am-mod .fform #fbuilder :is(.cff-checkbox-field, .cff-radiobutton-field) .one_column > label {
  display: flex; align-items: flex-start; gap: 9px; margin: 0; font-size: 13.8px; font-weight: 400; line-height: 1.45;
  color: var(--ink); cursor: pointer; padding: 5px 6px; border-radius: 9px; transition: background .16s; }
.am-mod .fform #fbuilder :is(.cff-checkbox-field, .cff-radiobutton-field) .one_column > label:hover { background: var(--chipbg); }
.am-mod.am-mod .fform #fbuilder .fields :is(input[type=checkbox], input[type=radio]) {
  appearance: none; width: 17px; height: 17px; min-width: 17px; flex: none; margin: 2px 0 0; padding: 0;
  border: 1px solid var(--line); border-radius: 5px; background: var(--panel); cursor: pointer;
  transition: background .16s, border-color .16s; position: relative; box-shadow: none; }
.am-mod.am-mod .fform #fbuilder .fields input[type=radio] { border-radius: 50%; }
.am-mod.am-mod .fform #fbuilder .fields :is(input[type=checkbox], input[type=radio]):checked { background: var(--cta); border-color: var(--cta); }
.am-mod.am-mod .fform #fbuilder .fields :is(input[type=checkbox], input[type=radio])::before { display: none; }
.am-mod.am-mod .fform #fbuilder .fields input[type=checkbox]:checked::after {
  content: ''; display: block; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; background: none;
  border: solid var(--cta-ink); border-width: 0 2px 2px 0; border-radius: 0; transform: rotate(42deg); }
.am-mod.am-mod .fform #fbuilder .fields input[type=checkbox]:not(:checked)::after { display: none; }
.am-mod.am-mod .fform #fbuilder .fields input[type=radio]:checked::after {
  content: ''; position: absolute; left: 4px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--cta-ink); }
/* The button: the draft's .btn.btn-p, on the plugin's button field. */
.am-mod .fform #fbuilder .cff-button-field { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end; }
.am-mod .fform #fbuilder .cff-button-field > .uh { display: none; }
.am-mod .fform #fbuilder :is(.cff-button-field input[type=button], .pbSubmit) {
  display: inline-flex; align-items: center; gap: 9px; width: auto; height: auto; margin: 0;
  font-family: inherit; font-weight: 800; font-size: 14.5px; line-height: 1.2; border-radius: 999px; padding: 13px 24px;
  border: 0; cursor: pointer; background: var(--cta); color: var(--cta-ink);
  box-shadow: 0 10px 26px rgba(125,189,36,.42); transition: transform .2s, box-shadow .2s; }
.am-mod .fform #fbuilder :is(.cff-button-field input[type=button], .pbSubmit):hover {
  transform: translateY(-2px); box-shadow: 0 14px 32px rgba(125,189,36,.54); }
.am-mod .et_pb_module.am-verbatim,
.am-mod .et_pb_module.am-verbatim > .et_pb_text_inner { display: contents; }
/* The same invented paragraph, three more times. In the filter bar it becomes
   a cell of the flex row and pushes the search field out of its twelve pixels;
   in a quote it wraps the sentence and the organization. Each gives up its
   box and states nothing of its own.

   `.qwho` is named without the card around it: the same block stands in the
   quote carousel of the home page, and there the invented paragraph lands
   between the portrait and the name. The row is centred, so it did not push
   the block aside but split it: the portrait six pixels left, the flag six
   right, half a gap each way. The draft writes no paragraph inside a .qwho
   anywhere, so nothing real is caught by the wider name. */
.am-mod .cbar > p,
.am-mod .qcard blockquote > p,
.am-mod .qwho p { display: contents; font: inherit; }
/* The empty notice ends the draft's .libwrap and shows only when a filter
   matches nothing; hidden it takes no room at all. As a Divi row it took the
   24px every row takes from the one before it and a pixel of its own, and the
   section came out 25px too tall. The row gives up both. When the notice does
   show, the draft puts it flush under the grid, so there is nothing to keep.

   Five classes, because the distance between two rows is written with four
   and a tie would be settled by the order of the file. The pixel is Divi's
   own: it gives every column a minimum height of one. */
.et_pb_section.am-mod .et_pb_row.am-row.libfoot,
.et_pb_section.am-mod .et_pb_row.am-row.cfoot { margin-top: 0; }
.et_pb_section.am-mod .et_pb_row.am-row.libfoot > .et_pb_column,
.et_pb_section.am-mod .et_pb_row.am-row.cfoot > .et_pb_column { min-height: 0; }
/* WordPress wraps in a paragraph of its own whatever it does not count as a
   block: a trailing link, and a <button> wherever one stands. The draft ends
   its card with a bare link (the paragraph makes the card 3px taller) and
   seats its video in a button (the paragraph would take the 16/9 box away).
   Both keep their place this way.

   Taking the box is only half of it: a paragraph the draft never wrote still
   passes on what the draft's paragraph rule says, and .lcard p names a line of
   1.6 where the card names 1.62. The link under the card read the paragraph's
   line, every card came out 0.3px short, and down 38 cards that drift is what
   the checker reported as 346 misplaced icons. An invented paragraph passes on
   its surroundings unchanged, so it states nothing of its own. */
.am-mod .lcard > p:has(> a.lgo),
.am-mod .pbody > p:has(> a.pgo),
.am-mod .icard p:has(> a.more),
.am-mod .pillar p:has(> a.more),
.am-mod .casecard > p:has(> a.more),
.am-mod .legcard p:has(> a.more),
.am-mod .acard > p:has(> a.alnk),
.am-mod p:has(> button.ytframe) { display: contents; font: inherit; }
/* Sometimes only half a paragraph is invented, and that half is the closing
   tag. Divi takes one paragraph off each end of a module's content, so where
   the draft opens a box with something WordPress does not count as a block
   (a bare icon, a bare label) the opening tag goes and the closing one stays.
   The browser makes an empty paragraph out of the orphan. Empty is not
   nothing: in a flex row it is a cell of its own and pushes everything after
   it over by one gap, which is what the note to the customer and the address
   card measured. It gives up its box; the draft's own paragraphs keep theirs. */
.am-mod .dnote p:empty,
.am-mod .legaddr p:empty,
.am-mod .nfhead p:empty,
.am-mod .vcard p:empty,
.am-mod .pcard p:empty { display: contents; }
/* An element with no box of its own cannot be clicked, and in the builder that
   is the whole point of a module. There it keeps its box; the grid is one cell
   wide per card in that view, which is a fair price for being able to edit. */
html.et-fb-root-ancestor .am-mod .et_pb_module.am-verbatim,
html.et-fb-root-ancestor .am-mod .et_pb_module.am-verbatim > .et_pb_text_inner,
body.et-fb .am-mod .et_pb_module.am-verbatim,
body.et-fb .am-mod .et_pb_module.am-verbatim > .et_pb_text_inner { display: block; }
/* The same question one level up. On the page the script folds the tab panes
   together and shows one of them; in the builder a row that is not drawn
   cannot be opened, and the second tab's rows would be out of reach. So there
   all panes stand under each other, which is the state the page itself has
   before the script runs. Six classes, because the rule it has to beat has
   five. Written from the same reasoning as the rule above it, and not measured
   in the builder. */
html.et-fb-root-ancestor .am-sec.am-sec.am-mod.tabs .et_pb_row.tabpane,
body.et-fb .am-sec.am-sec.am-mod.tabs .et_pb_row.tabpane { display: block; }
/* The same question for the quote carousel: the script shows one of three
   slides and hides the other two, and a module that is not drawn cannot be
   opened. In the builder all three stand under each other, which is the state
   the page has before the script runs. */
html.et-fb-root-ancestor .am-sec.am-sec.am-mod .et_pb_text.qs,
body.et-fb .am-sec.am-sec.am-mod .et_pb_text.qs {
  grid-area: auto; opacity: 1; visibility: visible;
}

/* ---- A passage that stands in the middle ---- */
/* The draft narrows a short passage without a picture to 820px and centres
   it, so that no empty half stays standing on the right. It writes that
   inline on .rich; here the column is .rich, and it says the same three
   things. */
.am-mod .et_pb_column.rich-center { max-width: 820px; text-align: center; }
/* The thank-you page's text: the same, at the 720px the draft writes there. */
.am-mod .et_pb_column.rich-narrow { max-width: 720px; text-align: center; }
/* Inside that box the head keeps its own 700px, and the draft centres it
   there. The head is no box here but two modules, so they centre themselves;
   the row above centres the column, because a column cannot (see center-col). */
.am-mod .et_pb_column.rich-center > .et_pb_module {
  margin-left: auto; margin-right: auto;
}

/* ---- Tiles: the module is the card ---- */
/* The column is the grid and the card is a module. The card keeps its box, it
   is the tile; only Divi's inner wrapper steps aside, so the icon, the heading,
   the sentence and the link are the card's own children again. That is what
   the draft's rules ask for: a gap between them, and a link that sits at the
   bottom of the tile however tall the tile turns out. The client cell is built
   the same way, and its name and country need the same. */
.am-mod .et_pb_text.icard > .et_pb_text_inner,
.am-mod .et_pb_text.corg > .et_pb_text_inner,
.am-mod .et_pb_text.intcard > .et_pb_text_inner,
.am-mod .et_pb_text.metricval > .et_pb_text_inner,
.am-mod .et_pb_text.pich > .et_pb_text_inner,
.am-mod .et_pb_text.facts > .et_pb_text_inner,
.am-mod .et_pb_text.legsec > .et_pb_text_inner,
.am-mod .et_pb_text.legintro > .et_pb_text_inner,
.am-mod .et_pb_text.secgrp > .et_pb_text_inner,
.am-mod .et_pb_text.nfcol > .et_pb_text_inner,
.am-mod .et_pb_text.dnote > .et_pb_text_inner,
.am-mod .et_pb_text.wrow > .et_pb_text_inner,
.am-mod .et_pb_text.pillar > .et_pb_text_inner,
.am-mod .et_pb_text.rh > .et_pb_text_inner,
.am-mod .et_pb_text.claim > .et_pb_text_inner { display: contents; }
.am-mod .et_pb_column.icards > .et_pb_text.icard .more { margin-top: auto; }
/* A list inside a module whose class states a line of its own. The adapter
   writes the page's line on every ul, to break the length Divi puts there
   (see 1.62), and that cuts the inheritance a second time: the
   role descriptions read 1.62 where .rbody says 1.68. Inheriting names no
   number, so the two cannot drift apart. */
.am-mod .et_pb_text.rbody ul { line-height: inherit; }
/* A bold word inside a link the draft already sets bold. The browser reads
   <strong> as one step bolder than its surroundings, so 700 becomes 900;
   Divi writes a fixed 700 and the step is gone. Saying "one step bolder"
   again names no number and changes nothing where the surroundings are
   normal, which is everywhere else. */
.am-mod .et_pb_text strong, .am-mod .et_pb_text b { font-weight: bolder; }
/* The distance above the store marks is stated by their row, the way the
   draft states it inline; the class must not state it a second time. */
.am-sec.am-sec.am-mod .storebadges { margin-top: 0; }
/* The pillars are built the same way and pin their link the same way, so
   three cards of different heights line their links up. */
.am-mod .et_pb_column.pillars > .et_pb_text.pillar .more { margin-top: auto; }

/* ---- The legal pages ---- */
/* The table of contents stays put while the document scrolls past it, and a
   sticky box can only move inside the box that holds it. The draft's grid
   starts its cells at the top, so Divi's column is exactly as tall as the
   list and there is nothing to move in. The column stretches instead: it
   draws nothing, so nothing about it is visible, and the list inside keeps
   the height it had. */
.am-mod .et_pb_column.legtoc-col { align-self: stretch; }
/* The error page fills its panel across the whole row, and the draft says so
   with an inline style. Divi's own custom-CSS field cannot carry that: it is
   printed with a single class and loses to the draft's panel width, which is
   written with three. This states no number of the draft's, it takes a cap
   away. */
.am-sec.am-sec.am-mod .et_pb_column.nfgrid { max-width: none; }
.am-sec.am-sec.am-mod .et_pb_text.legsec h2 { display:flex;gap:11px;align-items:baseline;font-size:21px;font-weight:800;letter-spacing:-.012em;line-height:1.32;margin-bottom:13px }
.am-sec.am-sec.am-mod .et_pb_text.legsec h2 .legn { flex:none;font-size:12.5px;font-weight:900;letter-spacing:0;color:#fff;background:var(--accent);border-radius:8px;padding:3px 9px;line-height:1.5 }
/* The draft makes the whole card on /legal/ one link. A link that holds a
   heading and a paragraph does not survive WordPress (see the paragraph rule
   above), so the card is a column here and the link it already draws at the
   bottom carries the click for the whole plate. */
.am-mod .et_pb_column.legcard { position: relative; }
.am-mod .et_pb_column.legcard .more::after {
  content: ''; position: absolute; inset: 0;
}

/* ---- The bands that bring their own ground ---- */
/* .spot and .sand sit on the section itself (see SECTION_CLASSES), so the
   draft's own rules carry the dark gradient, the sand, the glow and the light
   ink they give every headline and list inside. One thing has no element left:
   .spot .wrap lifts the content over the glow, and the row is the wrap. */
.et_pb_section.am-mod.spot > .et_pb_row { position: relative; z-index: 1; }

/* ---- The picture with a caption under it ---- */
/* Divi's image module has no <figcaption>, so the glass box moves up a level:
   the column is the figure and the caption is a module of its own inside it.
   The draft's .pic figcaption has nothing left to match, and says this. */
.am-mod .am-piccap .figcap {
  font-size: 12px; color: var(--mut); padding: 9px 6px 2px; text-align: center;
}

/* ---- The portrait beside an endorsement ---- */
/* The draft's .exav is a round window: a fixed box with the picture cropped to
   fill it. Divi puts a <span> between the two, and a span with no height of its
   own leaves the picture nothing to fill. */
.am-mod .et_pb_image.exav .et_pb_image_wrap { height: 100%; }

/* ---- The kicker beside the quote ---- */
/* sec_quote writes these two on the element itself. The module is the element
   here, and the blanket module reset above would take the second one away. */
.am-mod .et_pb_text.am-qeyebrow { justify-content: center; }

/* The reveal's start state applies only once the head script has armed it.
   Without that class everything stands visible: in the visual builder, where
   the reveal can never finish, and on a page whose script failed to load. */
html:not(.am-reveal) .am-sec .rv { opacity: 1; transform: none; }
/* And the builder itself, which the head script cannot reach: Divi renders
   the page inside #et-fb-app-frame, and that iframe's address carries no
   et_fb=1, so the script arms the reveal in there. Divi marks the document
   itself, which is the one hook that holds. Both classes named because Divi
   puts them on different elements. */
html.et-fb-root-ancestor .am-sec .rv,
body.et-fb .am-sec .rv { opacity: 1; transform: none; }

/* ---- One node per module ---- */
/* Every headline, paragraph and label sits in a module of its own, so it has
   its own text field in the builder. The spacing between them used to come
   from the nodes being siblings inside one block. It now rides on the module,
   and the node itself must not add a second helping of it. */
.am-sec.am-sec.am-mod .et_pb_module:not(.am-verbatim):not(.am-own-gap):not(.icard):not(.corg):not(.intcard):not(.metricval):not(.pich):not(.facts):not(.legsec):not(.legintro):not(.secgrp):not(.nfcol):not(.dnote):not(.wrow):not(.pillar):not(.rh):not(.claim)
  .et_pb_text_inner > *:last-child {
  margin-bottom: 0;
}
/* Sometimes the draft's own rule is the better carrier: a block of running
   text hangs 12px under every one of its paragraphs, the last one included, so
   the block ends with that space. A module cannot hold it (Divi clears the
   margin of the last module in a column, and says so with !important), and
   naming the number again here would put a second copy of it in the world.
   am-own-gap says: this node keeps the margin the draft gives it. */
/* The gaps the draft sets, named on the module. Four classes deep on purpose:
   the blanket zero above is three, and a Divi spacing setting would be one, so
   neither could carry these. */
.et_pb_section.am-mod .et_pb_module.am-gap-2 { margin-bottom: 2px; }
.et_pb_section.am-mod .et_pb_module.am-gap-4 { margin-bottom: 4px; }
.et_pb_section.am-mod .et_pb_module.am-gap-8 { margin-bottom: 8px; }
.et_pb_section.am-mod .et_pb_module.am-gap-10 { margin-bottom: 10px; }
.et_pb_section.am-mod .et_pb_module.am-gap-12 { margin-bottom: 12px; }
.et_pb_section.am-mod .et_pb_module.am-gap-14 { margin-bottom: 14px; }
.et_pb_section.am-mod .et_pb_module.am-gap-24 { margin-bottom: 24px; }
.et_pb_section.am-mod .et_pb_module.am-gap-46 { margin-bottom: 46px; }
.am-sec.am-sec.am-mod .et_pb_module.am-own-gap.flowfig { margin-bottom: 2px; }
.am-sec.am-sec.am-mod .et_pb_module.am-own-gap.dnote { margin-bottom: 26px; }
.am-sec.am-sec.am-mod .et_pb_module.am-own-gap.marquee-head { margin-bottom: 18px; }
.am-mod .et_pb_column.rich .et_pb_text:not(.am-rich-lead) .et_pb_text_inner p:first-of-type { color:var(--mut); font-size:15px; line-height: 1.62; }
.am-mod .et_pb_column.rich > .et_pb_text.am-eyebrow,
.am-mod .et_pb_column.rich > .et_pb_text.am-h2,
.am-mod .et_pb_column.rich > .et_pb_text.am-shead-lead { max-width: 700px; }
.am-mod .et_pb_column.rich > .et_pb_text.am-h2.long { max-width: 880px; }
/* .shead.long in the draft: a headline that is a whole sentence drops one
   step. The hook moved to the headline's own module, the wrapper being gone. */
.am-mod .et_pb_text.am-h2.long h2 { font-size: clamp(23px, 2.5vw, 31px); }

/* ---- 3. Where Divi has no equivalent ---- */
/* Divi's image module renders a <span>, never a <figure>. */
/* And it writes a per-module `text-align: left` for an image whose alignment
   nobody set, the same way it does for text. Same answer and the same weight:
   two classes, enough to beat Divi's one and not enough to reach the draft's
   three. Without it the partner logo hangs on the left edge of a plate the
   draft centres it on. */
.am-mod .et_pb_image { text-align: inherit; }
.am-mod .et_pb_image { line-height: 0; }
.am-mod .et_pb_image .et_pb_image_wrap { display: block; width: 100%; }
/* The mark on a case study's fact plate. The cell is 118px wide and centres
   what is in it; the draft's flex item is the picture itself, and a picture
   narrower than the cell sits in the middle. Divi's span took that place, and
   because the rule above gives it the full width it filled the cell instead of
   being centred in it, so the mark hung on the left edge. Measured on three of
   the seven case studies, and on the other four only because their marks are
   wide enough to fill the cell anyway.

   The wrapper gives up its box, the way the report card's does, and the
   picture is the flex item again. Four classes, one more than the rule above,
   so the order of the file decides nothing. */
.am-mod .et_pb_image.factlogo .et_pb_image_wrap { display: contents; }
/* The plate's note is a <span>, and the draft styles it as one. Divi's image
   module renders a <span> too, so the same rule lands on the wrapper around
   the logo and hands it the note's smaller line and the note's bottom margin;
   the plate grows by both, and because the row centres it, the logo rises by
   half. Nowhere else in the draft is an image inline, so nowhere else does the
   space under its baseline belong to the box around it. Here it does, and the
   wrapper carries the plate's own line instead of the note's. Four classes,
   one more than the draft's rule, and no reach beyond this one plate. */
.am-mod .partner .et_pb_image .et_pb_image_wrap {
  font-size: inherit; line-height: 1.62; margin-bottom: 0;
}
.am-mod .et_pb_image img { width: 100%; height: auto; display: block; }
/* The photo of a solutions category. The draft shapes it on `.solrow figure
   img`, and there is no <figure> here: Divi's image module is the box and its
   <span> stands where the picture stood. The selector is written again for
   Divi's element, and what it says is read out of the draft's own rule, so the
   crop and the 5:3 box are still decided in one place. */
.am-mod .et_pb_row.solrow .et_pb_image img { width:100%; height:100%; object-fit:cover; aspect-ratio:5/3; display:block; }
/* The draft writes `margin-left: auto` on this figure, and it does nothing
   there: the figure is a grid item, so the browser stretches it, clamps it at
   the max-width and leaves it at the start of its cell. Divi puts a column
   between the row and the module, which makes the module an ordinary block,
   and the same `auto` then pushes it 35px to the right. The draft's result is
   what counts, so only the width comes along. */
.am-mod .figrow .et_pb_image,
.am-mod .cols2 .et_pb_image { max-width: 560px; }
/* No <figcaption> either: the caption is a text module of its own. */
.am-mod .devcap .figcap {
  text-align: center; font-size: 13.5px; color: var(--mut);
  padding: 20px 8px 0; max-width: 66ch; margin: 0 auto;
}
/* Divi's button brings its own border, padding, font and arrow. Ours replaces
   all of it, the arrow included. The draft's icon cannot come along as markup,
   because a Divi button holds text and nothing else, so it is drawn instead:
   the icon's outline as a mask over the button's own text colour.
   What that buys is the thing this file exists for: the label stays a text
   field in Divi's button dialog. AM_BUTTON_ICONS holds one line per icon; the
   list of them lives in to_divi_modules, which is what writes the classes. */
body #page-container .am-mod .et_pb_button {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 14.5px;
  /* The draft lets the button take the page's line height. Divi writes its own
     with !important, which no amount of specificity gets past, so this one
     answers in kind. */
  line-height: 1.62 !important;
  border: 0; border-radius: 999px; padding: 13px 24px;
  transition: transform .2s ease, box-shadow .2s ease;
}
body #page-container .am-mod .et_pb_button::after { display: none !important; }
body #page-container .am-mod .et_pb_button:hover { transform: translateY(-2px); padding: 13px 24px; }
/* The five the draft knows. Divi's own colour would otherwise stand where the
   draft picks one of these, and the pick carries meaning: green asks for the
   demo, blue for the quote, the outline is the quiet one. */
body #page-container .am-mod .et_pb_button.btn-p { background: var(--cta); color: var(--cta-ink); box-shadow: 0 10px 26px rgba(125,189,36,.42); }
body #page-container .am-mod .et_pb_button.btn-b { background: var(--blue); color: #fff; box-shadow: 0 10px 26px rgba(12,113,195,.36); }
body #page-container .am-mod .et_pb_button.btn-g { background: var(--accent); color: #fff; box-shadow: 0 10px 26px rgba(0,144,208,.3); }
body #page-container .am-mod .et_pb_button.btn-o { background: var(--chipbg); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
body #page-container .am-mod .et_pb_button.btn-s { background: rgba(255,255,255,.2); color: var(--on-photo); border: 1px solid var(--photo-glass-edge); box-shadow: none; }
/* The icon rides on ::after, and the reason is the draft's own: .btn-p::before
   and .btn-b::before carry its light sweep, parked at translateX(-130%) with a
   white gradient across them. Drawing the icon there put the icon in the
   sweep's place: 22px outside the button, washed out along the gradient, and
   the sweep itself gone. Each keeps its own pseudo-element now.
   ::after was Divi's arrow, hidden above; the icon claims it back and orders
   itself in front of the label, which is where the draft puts play and
   download. Divi's own parking has to be undone all the same, the transition
   included: a running transition holds the value it is animating, whatever the
   cascade says, and this one starts at nought. */
body #page-container .am-mod .et_pb_button[class*="am-ic-"]::after {
  content: ''; position: static; display: inline-block !important; opacity: 1;
  transition: none; transform: none; z-index: auto; background-image: none;
  order: -1; width: 17px; height: 17px; flex: none; margin: 0;
  line-height: 0; background-color: currentColor;
  -webkit-mask: var(--am-ic) no-repeat center / contain;
  mask: var(--am-ic) no-repeat center / contain;
}
/* am-ic-end is a modifier, not an icon: it says the icon follows the label,
   the way the draft writes "View More Clients ->". to_divi_modules never
   writes it without an icon name beside it. */
body #page-container .am-mod .et_pb_button.am-ic-end::after { order: 0; }
/* ::before is the draft's light sweep, and it needs its box back. */
body #page-container .am-mod .et_pb_button.btn-p::before,
body #page-container .am-mod .et_pb_button.btn-b::before {
  transition: none; display: block; opacity: 1; margin: 0;
  transform: translateX(-130%);
}
body #page-container .am-mod .et_pb_button.btn-p:hover::before,
body #page-container .am-mod .et_pb_button.btn-b:hover::before { transform: translateX(130%); transition: transform .75s ease; }
body #page-container .am-mod .et_pb_button.am-ic-play { --am-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points=%226 3 20 12 6 21 6 3%22/%3E%3C/svg%3E"); }
body #page-container .am-mod .et_pb_button.am-ic-download { --am-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4%22/%3E%3Cpolyline points=%227 10 12 15 17 10%22/%3E%3Cline x1=%2212%22 x2=%2212%22 y1=%2215%22 y2=%223%22/%3E%3C/svg%3E"); }
body #page-container .am-mod .et_pb_button.am-ic-arrow-right { --am-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M5 12h14%22/%3E%3Cpath d=%22m12 5 7 7-7 7%22/%3E%3C/svg%3E"); }
body #page-container .am-mod .et_pb_button.am-ic-calculator { --am-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width=%2216%22 height=%2220%22 x=%224%22 y=%222%22 rx=%222%22/%3E%3Cline x1=%228%22 x2=%2216%22 y1=%226%22 y2=%226%22/%3E%3Cline x1=%228%22 x2=%228%22 y1=%2214%22 y2=%2214%22/%3E%3Cline x1=%2212%22 x2=%2212%22 y1=%2214%22 y2=%2214%22/%3E%3Cline x1=%2216%22 x2=%2216%22 y1=%2214%22 y2=%2214%22/%3E%3Cline x1=%228%22 x2=%228%22 y1=%2218%22 y2=%2218%22/%3E%3Cline x1=%2212%22 x2=%2212%22 y1=%2218%22 y2=%2218%22/%3E%3Cline x1=%2216%22 x2=%2216%22 y1=%2218%22 y2=%2218%22/%3E%3C/svg%3E"); }
body #page-container .am-mod .et_pb_button.am-ic-mail { --am-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width=%2220%22 height=%2216%22 x=%222%22 y=%224%22 rx=%222%22/%3E%3Cpath d=%22m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7%22/%3E%3C/svg%3E"); }
body #page-container .am-mod .et_pb_button.am-ic-bar-chart { --am-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1=%2212%22 x2=%2212%22 y1=%2220%22 y2=%2210%22/%3E%3Cline x1=%2218%22 x2=%2218%22 y1=%2220%22 y2=%224%22/%3E%3Cline x1=%226%22 x2=%226%22 y1=%2220%22 y2=%2216%22/%3E%3C/svg%3E"); }