/* Computer Controls 2026 – styles. Tokens = Figma variables „CC Web 2026“, text styles „CC Web 2026/…“. */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/montserrat-latin-ext-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/montserrat-latin-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("../fonts/montserrat-latin-ext-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("../fonts/montserrat-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* metric-matched fallback: text does not jump when Montserrat arrives (less CLS) */
@font-face { font-family: "Montserrat Fallback"; src: local("Arial"); size-adjust: 112.83%; ascent-override: 85.79%; descent-override: 22.25%; line-gap-override: 0%; }

:root {
  --magenta: #e6007e;
  --magenta-hover: #c4006b;
  --ink: #2d313c;
  --ink-80: #575a62;
  --ink-70: #6c6e76;
  --ink-60: #818389;
  --ink-40: #abacaf;
  --ink-20: #d5d5d6;
  --ink-10: #eaeae9;
  --ink-05: #f5f4f2;
  --white: #fffefc;
  --pure: #ffffff;
  --grey: #aaaaaa;
  --dark-raised: #3a3d48;
  --dark-line: #464a53;
  --wrap: 1440px;
  --gutter: 20px;
  --sec-pad: 64px;
  --radius: 4px;
  --ease: 180ms ease;
}
@media (min-width: 768px) { :root { --gutter: 40px; --sec-pad: 88px; } }
@media (min-width: 1280px) { :root { --gutter: 64px; --sec-pad: 112px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body { margin: 0; background: var(--white); color: var(--ink); font-family: "Montserrat", "Montserrat Fallback", system-ui, sans-serif; font-size: 16px; line-height: 26px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
@media (min-width: 1024px) { body { font-size: 18px; line-height: 30px; } }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--white); padding: 12px 16px; }
.skip:focus { left: 8px; top: 8px; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Typography (Desktop/…, Mobile/…) */
/* Headings never break words (no hyphenation, no mid-word wrap); long German words fit via font size. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h5, caption, .ig__label, .ig-node__title, .faqgrid__q, .course__date, .pricecard__value, .fact__value, .history__year, .label, .tag {
  hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: normal;
}
.lang-de .h1 { font-size: clamp(22px, 6.3vw, 36px); line-height: 1.18; }
.h1 { font-weight: 800; font-size: 36px; line-height: 42px; letter-spacing: -0.01em; }
.h2 { font-weight: 700; font-size: 28px; line-height: 34px; letter-spacing: -0.005em; }
.h5 { font-weight: 600; font-size: 19px; line-height: 27px; }
.lead { font-size: 18px; line-height: 28px; }
.label { font-weight: 600; font-size: 13px; line-height: 16px; letter-spacing: 0.12em; text-transform: uppercase; }
.tag { display: inline-block; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-80); }
@media (min-width: 1024px) {
  .h1 { font-size: 60px; line-height: 68px; }
  .lang-en .h1, .lang-de .h1 { font-size: 52px; line-height: 60px; }
  .h2 { font-size: 40px; line-height: 50px; }
  .h5 { font-size: 22px; line-height: 30px; }
  .lead { font-size: 22px; line-height: 34px; }
}

/* Buttons */
.btns { display: flex; flex-wrap: wrap; gap: 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 24px; border-radius: var(--radius); font-weight: 700; font-size: 15px; line-height: 20px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border: 1.5px solid transparent; transition: background-color var(--ease), color var(--ease), border-color var(--ease); }
.btn__arrow { width: 16px; height: 11px; flex: none; transition: transform var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--magenta); color: var(--pure); }
.btn--primary:hover { background: var(--magenta-hover); }
.btn--secondary { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--secondary:hover { background: var(--ink); color: var(--white); }
.btn--secondary-dark { border-color: var(--white); color: var(--white); background: transparent; }
.btn--secondary-dark:hover { background: var(--white); color: var(--ink); }

.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 16px; line-height: 26px; color: var(--ink); text-decoration: none; }
.link-arrow span { text-decoration: underline; text-decoration-color: var(--ink-20); text-underline-offset: 4px; transition: text-decoration-color var(--ease); }
.link-arrow:hover span { text-decoration-color: currentColor; }
.link-arrow__icon { width: 14px; height: 10px; flex: none; transition: transform var(--ease); }
.link-arrow:hover .link-arrow__icon { transform: translateX(4px); }

/* Header */
.site-head { position: relative; z-index: 50; background: var(--white); }
.util { background: var(--ink-05); display: none; }
.util__inner { display: flex; justify-content: flex-end; align-items: center; min-height: 36px; font-size: 13px; line-height: 20px; color: var(--ink-80); }
.util__item { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 0 20px; border-left: 1px solid var(--ink-20); }
.util__item:first-child { border-left: 0; }
a.util__item:hover span, a.util__item:hover { color: var(--ink); text-decoration: underline; }
a[href^="tel:"] { white-space: nowrap; }
.util__phones a { color: inherit; text-decoration: none; }
.util__phones a:hover { color: var(--ink); text-decoration: underline; }
.util__icon { width: 14px; height: 14px; flex: none; }
.util__langs { padding-right: 0; }
.langs { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; }
.langs a { text-decoration: none; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-70); padding-bottom: 2px; border-bottom: 2px solid transparent; }
.langs a:hover { color: var(--ink); }
.langs a.is-current { color: var(--ink); font-weight: 700; border-bottom-color: var(--magenta); }
.bar__inner { display: flex; align-items: center; gap: 40px; min-height: 64px; }
.logo { display: block; flex: none; line-height: 0; }
.logo__svg { width: 140px; height: auto; }
.nav { display: none; flex: 1; }
.nav__list { display: flex; justify-content: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav__link { display: inline-block; padding: 8px 0 6px; font-weight: 500; font-size: 15px; line-height: 20px; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid transparent; }
.nav__link:hover { border-bottom-color: var(--ink-20); }
.nav__link.is-active { border-bottom-color: var(--magenta); }
.bar .btn { display: none; }
.burger { margin-left: auto; width: 44px; height: 44px; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer; }
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform var(--ease), opacity var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.drawer { border-top: 1px solid var(--ink-10); padding: 8px var(--gutter) 28px; background: var(--white); }
.drawer[hidden] { display: none; }
.drawer__nav { list-style: none; margin: 0 0 20px; padding: 0; }
.drawer__nav a { display: block; padding: 14px 0; border-bottom: 1px solid var(--ink-10); font-weight: 500; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; }
.drawer__nav a[aria-current="page"] { color: var(--magenta); }
.drawer .btn { width: 100%; margin-bottom: 20px; }
.drawer__line { font-size: 15px; line-height: 26px; color: var(--ink-80); }
.drawer__line a { color: var(--ink); text-decoration: none; font-weight: 500; }
.drawer__langs { margin-top: 16px; }
@media (min-width: 1280px) {
  .util { display: block; }
  .bar__inner { min-height: 76px; }
  .logo__svg { width: 173px; }
  .nav { display: block; }
  .bar .btn { display: inline-flex; }
  .burger, .drawer { display: none !important; }
}

/* Hero (dark, single photo) */
.hero { position: relative; background: var(--ink); color: var(--white); overflow: hidden; }
.hero__media { position: relative; height: 220px; }
.hero__img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(45,49,60,0.2) 0%, rgba(45,49,60,0.6) 70%, var(--ink) 100%); }
.hero__inner { position: relative; padding: 24px 0 48px; }
.hero__text { max-width: 760px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.hero .lead { color: #d5d5d6; max-width: 640px; }
.hero .btns { margin-top: 6px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; line-height: 20px; color: var(--ink-40); }
.crumbs a { color: var(--ink-40); text-decoration: none; }
.crumbs a:hover { color: var(--white); text-decoration: underline; }
.crumbs span[aria-hidden] { color: var(--ink-60); }
.crumbs [aria-current] { color: var(--white); }
.hero__meta { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 12px 32px; }
.hero__meta li { display: grid; gap: 2px; }
.hero__meta span { font-size: 13px; line-height: 20px; color: var(--ink-40); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.hero__meta strong { font-weight: 600; font-size: 18px; line-height: 28px; }
.hero--plain .hero__inner { padding: 40px 0 56px; }
@media (min-width: 1024px) {
  .hero { min-height: 640px; display: flex; align-items: center; }
  .hero__media { position: absolute; top: 0; bottom: 0; right: 0; left: 38.5%; height: auto; }
  .hero__media::after { background: linear-gradient(90deg, var(--ink) 0%, rgba(45,49,60,0.88) 22%, rgba(45,49,60,0.55) 55%, rgba(45,49,60,0.35) 100%); }
  .hero__inner { padding: 96px 0; } /* Figma comment: enough room under the buttons */
  .hero__text { gap: 28px; }
  .hero--plain { min-height: 0; }
  .hero--plain .hero__inner { padding: 56px 0 64px; }
}

/* Sections */
.sec { padding-block: var(--sec-pad); }
.sec--white { background: var(--white); }
.sec--grey { background: var(--ink-05); }
.sec-head { max-width: 820px; display: grid; gap: 12px; margin-bottom: 32px; }
.sec-intro { color: var(--ink-80); font-size: 16px; line-height: 26px; }
@media (min-width: 1024px) { .sec-head { gap: 16px; margin-bottom: 48px; } .sec-intro { font-size: 20px; line-height: 34px; } }

/* Cards */
.cards { display: grid; gap: 40px 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } .cards--4 { grid-template-columns: repeat(4, 1fr); } }
.card { display: flex; flex-direction: column; gap: 14px; }
.card__media { aspect-ratio: 342 / 239; border-radius: var(--radius); overflow: hidden; background: var(--pure); }
.cards--3 .card__media { aspect-ratio: 464 / 325; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__title { margin-top: 0; }
.card__text { color: var(--ink-70); font-size: 16px; line-height: 26px; }
.card__link { margin-top: auto; padding-top: 2px; }

/* Columns: heading left, content right */
.cols { display: grid; gap: 28px; }
@media (min-width: 1024px) {
  .cols--questions { grid-template-columns: 520px 1fr; gap: 96px; }
  .cols--points { grid-template-columns: 560px 1fr; gap: 96px; }
  .cols--contact { grid-template-columns: 560px 1fr; gap: 96px; align-items: start; }
}
.cols__head { display: grid; gap: 20px; align-content: start; }
.qlist li a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--ink-10); text-decoration: none; font-size: 16px; line-height: 26px; }
.qlist li:first-child a { border-top: 1px solid var(--ink-10); }
@media (min-width: 1024px) { .qlist li:first-child a { border-top: 0; padding-top: 0; } .qlist li a { font-size: 18px; line-height: 30px; } }
.qlist__icon { width: 16px; height: 11px; flex: none; transition: transform var(--ease); }
.qlist a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.qlist a:hover .qlist__icon { transform: translateX(4px); }

/* Facts */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 0; margin: 0; }
.fact { padding: 0 20px; border-left: 1px solid var(--ink-10); display: grid; gap: 6px; align-content: start; }
.fact:nth-child(odd) { padding-left: 0; border-left: 0; }
.fact__value { font-weight: 600; font-size: 24px; line-height: 30px; letter-spacing: -0.005em; }
.fact__label { color: var(--ink-70); font-size: 15px; line-height: 24px; margin: 0; }
@media (min-width: 1024px) {
  .facts { grid-template-columns: repeat(4, 1fr); }
  .fact { padding: 0 33px; }
  .fact:nth-child(odd) { padding-left: 33px; border-left: 1px solid var(--ink-10); }
  .fact:first-child { padding-left: 0; border-left: 0; }
  .fact__value { font-size: 30px; line-height: 38px; }
  .fact__label { font-size: 16px; line-height: 26px; }
}

/* Contact */
.contact__text { display: grid; gap: 18px; align-content: start; }
.contact__intro { color: var(--ink-80); }
.company { display: grid; gap: 10px; margin-top: 4px; }
.company__name { font-weight: 600; font-size: 19px; line-height: 28px; }
.company__line { font-size: 16px; line-height: 26px; }
.company__line a { text-decoration: none; }
.company__line a:hover { text-decoration: underline; }
.company__line--muted { color: var(--ink-80); }
.company__ids { color: var(--ink-70); font-size: 15px; line-height: 24px; }
.serves { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 4px; font-size: 16px; line-height: 26px; color: var(--ink-80); }
.serves__label { color: var(--ink-70); font-size: 15px; }
.chip { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-80); font-size: 15px; line-height: 24px; }
.flag { width: 24px; height: 18px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(45,49,60,0.08); object-fit: cover; }
.chip .flag { width: 20px; height: 15px; }
.formbox { background: var(--ink-05); border-radius: var(--radius); padding: 28px 20px; }
.sec--grey .formbox { background: var(--pure); }
@media (min-width: 768px) { .formbox { padding: 40px; } }

/* Fluent Forms inside .formbox */
.formbox .fluentform .ff-el-group { margin-bottom: 16px; }
.formbox .fluentform .ff-el-input--label label { font-family: inherit; font-weight: 400; font-size: 13px; line-height: 20px; color: var(--ink-70); }
.formbox .fluentform .ff-el-is-required.asterisk-right label::after { color: var(--ink-70); }
.formbox .fluentform .ff-el-form-control { font-family: inherit; font-size: 16px; min-height: 48px; border: 1px solid var(--ink-20); border-radius: var(--radius); background: var(--pure); color: var(--ink); box-shadow: none; }
.sec--grey .formbox .fluentform .ff-el-form-control { background: var(--ink-05); border-color: var(--ink-10); }
.formbox .fluentform .ff-el-form-control:focus { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 0; }
.formbox .fluentform textarea.ff-el-form-control { min-height: 120px; }
.formbox .fluentform .ff-el-tc label, .formbox .fluentform .ff_t_c, .formbox .fluentform .ff-el-form-check-label { font-size: 13px; line-height: 20px; color: var(--ink-70); }
.formbox .fluentform .ff_t_c a { color: var(--ink); }
.formbox .fluentform .ff-btn-submit, .formbox .fluentform button[type="submit"] { font-family: inherit; display: inline-flex; align-items: center; min-height: 54px; padding: 0 24px; border-radius: var(--radius); background: var(--magenta) !important; color: var(--pure) !important; border: 0; font-weight: 700; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.formbox .fluentform .ff-btn-submit:hover { background: var(--magenta-hover) !important; }
.formbox .fluentform .error, .formbox .fluentform .text-danger { font-size: 13px; color: #b3003f; }
.formbox .ff-message-success { border: 1px solid var(--ink-10); background: var(--pure); border-radius: var(--radius); padding: 20px; font-size: 16px; }

/* Split */
.split { display: grid; gap: 32px; align-items: center; }
.split__text { display: grid; gap: 20px; align-content: start; }
.split__lead { color: var(--ink-80); }
.split__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; background: var(--pure); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .split { grid-template-columns: 620fr 720fr; gap: 96px; }
  .split--img-left { grid-template-columns: 720fr 620fr; }
  .split--img-left .split__media { order: -1; }
}
.bullets { list-style: none; margin: 0; padding: 0; }
.bullets li { position: relative; padding: 14px 0 14px 24px; border-bottom: 1px solid var(--ink-10); }
.bullets li::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--ink-60); }
.bullets--compact li { padding: 4px 0 4px 18px; border-bottom: 0; font-size: 16px; line-height: 26px; }
.bullets--compact li::before { top: 14px; margin-top: 0; width: 6px; height: 6px; }
.items { display: grid; gap: 20px; }
.items__title { font-weight: 600; font-size: 16px; line-height: 26px; }
.items p { color: var(--ink-70); font-size: 16px; line-height: 26px; }
.items--rows { gap: 0; }
.items--rows li { padding: 20px 0; border-top: 1px solid var(--ink-10); display: grid; gap: 6px; }
.items--rows li:first-child { border-top: 0; padding-top: 0; }
.items--points li:first-child { border-top: 1px solid var(--ink-10); padding-top: 22px; }

/* CTA */
.cta { display: grid; gap: 28px; }
.cta__text { display: grid; gap: 16px; max-width: 820px; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.cta__phone { flex-basis: 100%; color: var(--ink-70); font-size: 16px; line-height: 26px; }
.cta__phone a { color: var(--ink); text-decoration: none; }
@media (min-width: 1024px) {
  .cta { grid-template-columns: 1fr 420px; gap: 96px; align-items: center; }
  .cta__actions { flex-direction: column; }
}

/* FAQ grid */
.faqgrid { display: grid; gap: 0 48px; }
.faqgrid__item { padding: 24px 0; border-top: 1px solid var(--ink-10); display: grid; gap: 8px; }
.faqgrid__q { font-weight: 600; font-size: 18px; line-height: 28px; }
.faqgrid__item p { color: var(--ink-70); font-size: 16px; line-height: 26px; }
@media (min-width: 1024px) { .faqgrid { grid-template-columns: 1fr 1fr; } .faqgrid__q { font-size: 20px; line-height: 30px; } }

/* Steps as cards */
.steps { display: grid; gap: 16px; counter-reset: none; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { background: var(--pure); border-radius: var(--radius); padding: 28px; display: grid; gap: 14px; align-content: start; }
.sec--white .step { background: var(--ink-05); }
.step__top { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
.step__num { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 1.5px solid var(--ink-60); display: grid; place-items: center; font-weight: 600; font-size: 20px; background: var(--pure); }
.step--goal .step__num { background: var(--magenta); border-color: var(--magenta); color: var(--pure); }
.step__line { flex: 1; height: 1.5px; background: var(--ink-20); }
.step p { color: var(--ink-80); font-size: 16px; line-height: 26px; }

/* Stairs (process) */
.stairs__list { display: grid; gap: 0; counter-reset: none; }
.stair { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 16px 0; }
.stair__num { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--ink-60); background: var(--pure); display: grid; place-items: center; font-weight: 600; font-size: 20px; position: relative; z-index: 1; }
.stair--goal .stair__num { background: var(--magenta); border-color: var(--magenta); color: var(--pure); }
.stair--optional .stair__num { border-style: dashed; color: var(--ink-70); }
.stair__arc { display: none; }
.stair__body { display: grid; gap: 4px; align-content: start; padding-top: 8px; }
.stair__body p { color: var(--ink-80); font-size: 15px; line-height: 24px; }
.stair--optional .stair__body .h5, .stair--optional .stair__body p { color: var(--ink-80); }
.stair:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 64px; bottom: -16px; width: 1.5px; background: var(--ink-20); }
@media (min-width: 1024px) {
  .stairs { position: relative; }
  .stairs__head { position: absolute; left: 0; top: 0; width: 50%; z-index: 2; }
  .stairs__list { --step: 62px; display: grid; grid-template-columns: repeat(var(--n), 1fr); align-items: end; min-height: calc(var(--n) * var(--step) + 330px); }
  .stair { display: block; padding: 0; height: calc(232px + var(--i) * var(--step)); background: color-mix(in srgb, var(--magenta) calc(5% + var(--i) * 2.5%), var(--pure)); border-top: 1.5px solid var(--ink-60); }
  .stair + .stair { border-left: 1.5px solid var(--ink-60); }
  .stair:not(:last-child)::before { display: none; }
  .stair__num { position: absolute; top: -28px; left: 24px; width: 56px; height: 56px; font-size: 22px; }
  .stair__body { padding: 52px 24px 24px; }
  .stair__arc { display: block; position: absolute; left: 70px; top: -100px; width: calc(100% - 22px); height: 88px; color: var(--ink-40); }
  .stair--optional { background: transparent; border-top: 1.5px dashed var(--ink-40); border-left: 0 !important; }
  .stair--optional .tag { margin-bottom: 4px; }
}

/* History (horizontal) */
.history { display: grid; gap: 20px; position: relative; padding-left: 24px; border-left: 1.5px solid var(--ink-20); }
.history__item { display: grid; gap: 4px; position: relative; }
.history__item::before { content: ""; position: absolute; left: -31px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--white); border: 1.5px solid var(--ink-60); }
.history__year { font-weight: 600; font-size: 24px; line-height: 32px; }
.history__item p { color: var(--ink-80); font-size: 15px; line-height: 24px; }
@media (min-width: 1024px) {
  .history { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; column-gap: 16px; row-gap: 0; padding: 0; border: 0; }
  .history::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--ink-40); }
  .history__item { grid-column: span 1; padding-left: 16px; border-left: 1.5px solid var(--ink-40); }
  .history__item::before { display: none; }
  .history__item--up { grid-row: 1; display: flex; flex-direction: column-reverse; justify-content: flex-start; padding-bottom: 20px; }
  .history__item--down { grid-row: 2; padding-top: 20px; }
  .history__item:nth-child(1) { grid-column: 1; } .history__item:nth-child(2) { grid-column: 2; }
  .history__item:nth-child(3) { grid-column: 3; } .history__item:nth-child(4) { grid-column: 4; }
  .history__item:nth-child(5) { grid-column: 5; } .history__item:nth-child(6) { grid-column: 6; }
  .history__year { font-size: 30px; line-height: 38px; }
  .history__item--up p { margin-bottom: 6px; }
  .history__item--down .history__year { margin-bottom: 6px; }
}

/* Infographic */
.ig { display: grid; gap: 32px; }
.ig__phases { display: grid; gap: 28px; }
.ig__phase { display: grid; gap: 16px; position: relative; align-content: start; }
.ig__label { font-weight: 600; font-size: 20px; line-height: 28px; }
.ig__dot { display: none; }
.ig__nodes { display: grid; gap: 20px; }
.ig-node { display: grid; grid-template-columns: 48px 1fr; gap: 20px; align-items: start; text-decoration: none; color: inherit; }
.ig-node__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--pure); border: 1px solid var(--ink-10); display: grid; place-items: center; }
.ig-node__icon svg { width: 24px; height: 24px; }
.ig-node__text { display: grid; gap: 2px; padding-top: 8px; }
.ig-node__kicker { font-size: 15px; line-height: 24px; color: var(--ink-80); }
.ig-node__title { font-weight: 600; font-size: 17px; line-height: 26px; display: inline-flex; align-items: center; gap: 10px; }
.ig-node__arrow { width: 14px; height: 10px; flex: none; transition: transform var(--ease); }
.ig-node--link:hover .ig-node__title { text-decoration: underline; text-underline-offset: 4px; }
.ig-node--link:hover .ig-node__arrow { transform: translateX(4px); }
.ig-node__desc { font-size: 15px; line-height: 24px; color: var(--ink-80); }
.ig__base { background: var(--pure); border-radius: var(--radius); padding: 24px 20px; display: grid; gap: 20px; }
.ig__base-head p { color: var(--ink-80); font-size: 15px; line-height: 24px; }
.ig__base-nodes { display: grid; gap: 20px; }
.ig__entry { border-top: 1px solid var(--ink-20); padding-top: 28px; }
.ig-node--entry .ig-node__icon { background: var(--magenta); border-color: var(--magenta); color: var(--pure); }
@media (min-width: 1024px) {
  .ig__phases { grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; padding-top: 0; }
  .ig__phases::before { content: ""; position: absolute; left: 24px; right: 0; top: 60px; height: 1.5px; background: var(--ink-20); }
  .ig__phase { gap: 0; }
  .ig__label { height: 48px; font-size: 22px; line-height: 30px; }
  .ig__dot { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--pure); border: 1.5px solid var(--ink-40); position: relative; z-index: 1; margin: 0 0 40px 12px; }
  .ig__nodes { gap: 32px; border-left: 1.5px solid var(--ink-20); margin-left: 23px; padding-left: 0; margin-top: -40px; padding-top: 40px; }
  .ig__nodes .ig-node { margin-left: -24px; }
  .ig-node__title { font-size: 18px; line-height: 30px; }
  .ig__base { padding: 32px; margin-inline: -32px; }
  .ig__base-nodes { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .ig__entry .ig-node { max-width: 712px; }
}

/* Course card */
.course { background: var(--ink-05); border-radius: var(--radius); padding: 28px 20px; display: grid; gap: 24px; align-items: center; }
.sec--grey .course { background: var(--pure); }
.course__text { display: grid; gap: 8px; }
.course__date { font-weight: 700; font-size: 28px; line-height: 34px; letter-spacing: -0.005em; }
.course__meta { color: var(--ink-70); font-size: 16px; line-height: 26px; }
@media (min-width: 1024px) { .course { grid-template-columns: 1fr auto; padding: 40px 48px; gap: 96px; } .course__date { font-size: 40px; line-height: 50px; } }

/* Branches */
.branches { display: grid; gap: 24px; }
.branches--home { margin-bottom: 24px; }
@media (min-width: 640px) { .branches { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .branches { grid-template-columns: repeat(4, 1fr); } .branches--home { grid-template-columns: minmax(0, 700px); } }
.branch { background: var(--ink-05); border-radius: var(--radius); padding: 24px; display: grid; gap: 8px; align-content: start; }
.sec--grey .branch { background: var(--pure); }
.branch__country { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-70); margin-bottom: 4px; }
.branch__note { font-size: 13px; line-height: 20px; color: var(--ink-70); }
.branch__addr { color: var(--ink-80); font-size: 15px; line-height: 24px; }
.branch__line { font-size: 15px; line-height: 24px; }
.branch__line a { text-decoration: none; }
.branch__line a:hover { text-decoration: underline; }
.branch__also-label { font-size: 13px; line-height: 20px; color: var(--ink-70); margin-top: 4px; }
.branch__also { display: flex; flex-wrap: wrap; gap: 6px 14px; }

/* Training detail */
.course-info { display: grid; gap: 32px; }
@media (min-width: 1024px) { .course-info { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.course-info .h5 { margin-bottom: 8px; }
.program { display: grid; gap: 16px; }
@media (min-width: 1024px) { .program { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
.program__item { background: var(--pure); border-radius: var(--radius); padding: 24px; display: grid; grid-template-columns: 48px 1fr; gap: 20px; }
.program__num { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--ink-60); display: grid; place-items: center; font-weight: 600; font-size: 20px; }
.program__item .h5 { margin-bottom: 6px; padding-top: 8px; }
.course-rules { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--ink-10); display: grid; gap: 10px; max-width: 900px; }
.course-rules p { color: var(--ink-80); font-size: 15px; line-height: 24px; }

/* Generic content (legal pages, support) */
.prose { max-width: 860px; font-size: 16px; line-height: 27px; color: var(--ink); }
.prose > * + * { margin-top: 16px; }
.prose h2 { font-size: 26px; line-height: 34px; font-weight: 700; margin-top: 40px; }
.prose h3 { font-size: 20px; line-height: 28px; font-weight: 600; margin-top: 28px; }
.prose a { color: var(--ink); text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ink-10); vertical-align: top; }
.prose details { border-top: 1px solid var(--ink-10); padding: 14px 0; }
.prose summary { cursor: pointer; font-weight: 600; }
.plain-list { display: grid; gap: 10px; }

/* Footer */
.site-foot { background: var(--ink); color: var(--white); padding: 64px 0 32px; font-size: 14px; line-height: 22px; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.site-foot .label { color: var(--grey); margin-bottom: 12px; }
.foot__top { display: grid; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid var(--dark-line); }
.foot__logo .logo__svg { width: 194px; }
.foot__company { font-size: 15px; line-height: 24px; margin-bottom: 8px; }
.foot__lines { color: var(--grey); font-size: 15px; line-height: 24px; }
.foot__lines a { color: var(--white); }
.foot__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 24px; padding: 40px 0; }
.foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot__langs { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 24px 0; border-top: 1px solid var(--dark-line); }
.foot__langlist { display: flex; align-items: center; gap: 20px; color: var(--grey); }
.foot__langlist a { color: var(--grey); }
.foot__langlist a.is-current { color: var(--white); }
.foot__social { display: flex; gap: 20px; }
.foot__legal { padding: 24px 0; border-top: 1px solid var(--dark-line); display: grid; gap: 10px; color: var(--grey); font-size: 13px; line-height: 20px; }
.foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 16px; color: var(--grey); font-size: 13px; line-height: 20px; }
.foot__bottom ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot__bottom a { color: var(--white); }
@media (min-width: 1024px) {
  .site-foot { padding: 96px 0 40px; }
  .foot__top { grid-template-columns: 420px 1fr; gap: 48px; }
  .foot__cols { grid-template-columns: repeat(5, 1fr); padding: 56px 0; }
}

/* Grid children must be allowed to shrink (long German compounds on mobile). */
.split > *, .cols > *, .cta > *, .cards > *, .steps > *, .branches > *, .faqgrid > *, .ig__phases > *, .foot__cols > * { min-width: 0; }
.formbox .fluentform .ff-el-form-control { width: 100%; display: block; padding: 10px 14px; }
.formbox .fluentform .ff-el-input--label { margin-bottom: 6px; }
.formbox .fluentform .ff-el-tc { display: flex; gap: 10px; align-items: flex-start; }
.formbox .fluentform .ff-el-tc input[type="checkbox"] { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--ink); flex: none; }
.foot__consent { background: none; border: 0; padding: 0; font: inherit; color: var(--white); cursor: pointer; }
.foot__consent:hover { text-decoration: underline; }

/* Training detail */
.note { color: var(--ink-70); font-size: 15px; line-height: 24px; }
.sched { display: grid; gap: 12px; }
.sched__row { background: var(--ink-05); border-radius: var(--radius); padding: 20px; display: grid; gap: 12px; }
.sec--grey .sched__row { background: var(--pure); }
.sched__label { font-weight: 600; font-size: 13px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-70); }
.sched__cells { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.sched__cells--one { grid-template-columns: 1fr; }
.sched__cell strong { display: block; font-weight: 500; font-size: 16px; line-height: 26px; }
.sched__cells--one .sched__cell strong { font-size: 17px; line-height: 27px; }
.sched__cell span { display: block; color: var(--ink-70); font-size: 15px; line-height: 24px; }
@media (min-width: 1024px) {
  .sched__row { grid-template-columns: 140px 1fr; align-items: center; padding: 24px; gap: 24px; }
}
.pricecards { display: grid; gap: 24px; }
@media (min-width: 768px) { .pricecards { grid-template-columns: 1fr 1fr; } }
.pricecard { background: var(--pure); border-radius: var(--radius); padding: 32px; display: grid; gap: 10px; align-content: start; }
.sec--white .pricecard { background: var(--ink-05); }
.pricecard__label { color: var(--ink-70); }
.pricecard__value { font-weight: 800; font-size: 40px; line-height: 48px; letter-spacing: -0.01em; }
@media (min-width: 1024px) { .pricecard__value { font-size: 56px; line-height: 60px; } }
.pricecard__sub { color: var(--ink-70); font-size: 15px; line-height: 24px; }
.pricecard .h5 { margin-top: 10px; }
.pricecard__text { color: var(--ink-80); font-size: 15px; line-height: 24px; }
.pointsrow { display: grid; gap: 0 48px; }
.pointsrow li { border-top: 1px solid var(--ink-10); padding: 22px 0; display: grid; gap: 6px; align-content: start; }
.pointsrow p { color: var(--ink-70); font-size: 16px; line-height: 26px; }
@media (min-width: 1024px) { .pointsrow { grid-template-columns: repeat(3, 1fr); } }
.typecards { display: grid; gap: 24px; }
@media (min-width: 640px) { .typecards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .typecards { grid-template-columns: repeat(4, 1fr); } }
.typecard { height: 100%; background: var(--ink-05); border-radius: var(--radius); padding: 28px; display: grid; gap: 12px; align-content: start; text-decoration: none; color: inherit; }
.sec--grey .typecard { background: var(--pure); }
.typecard p { color: var(--ink-80); font-size: 16px; line-height: 26px; }
.typecard .h5 { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.typecard__arrow { width: 14px; height: 10px; flex: none; transition: transform var(--ease); }
.typecard--link:hover .h5 { text-decoration: underline; text-underline-offset: 4px; }
.typecard--link:hover .typecard__arrow { transform: translateX(4px); }
.pricetable { background: var(--pure); border-radius: var(--radius); padding: 4px 20px; overflow-x: auto; }
.sec--white .pricetable { background: var(--ink-05); }
.pricetable table { width: 100%; border-collapse: collapse; min-width: 560px; }
.pricetable th, .pricetable td { text-align: left; padding: 16px 12px 16px 0; border-top: 1px solid var(--ink-10); font-size: 16px; line-height: 26px; vertical-align: top; }
.pricetable tr:first-child th, .pricetable tr:first-child td { border-top: 0; }
.pricetable tr.is-cont th, .pricetable tr.is-cont td { border-top-color: transparent; padding-top: 4px; }
.pricetable th { font-weight: 500; width: 50%; }
.pricetable td { color: var(--ink-70); }
.pricetable .pricetable__price { color: var(--ink); font-weight: 600; text-align: right; white-space: nowrap; padding-right: 0; }
@media (min-width: 1024px) { .pricetable { padding: 8px 32px; } .pricetable th, .pricetable td { font-size: 18px; line-height: 30px; } }

/* Course plan + full-screen schedule dialog */
.plan { display: grid; gap: 16px; justify-items: start; }
.plan__weeks { display: grid; gap: 12px; width: 100%; }
.plan__week { background: var(--ink-05); border-radius: var(--radius); padding: 20px; display: grid; gap: 12px; }
.sec--grey .plan__week { background: var(--pure); }
.plan__head { display: grid; gap: 2px; align-content: start; }
.plan__head p { color: var(--ink-70); font-size: 15px; line-height: 24px; }
@media (min-width: 1024px) { .plan__week { grid-template-columns: 200px 1fr; gap: 24px; padding: 24px; } }
.plan .btn { margin-top: 8px; cursor: pointer; font-family: inherit; }
.modal { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; }
.modal::backdrop { background: rgba(45, 49, 60, 0.72); }
.modal__panel { background: var(--pure); margin: 12px; min-height: calc(100vh - 24px); border-radius: var(--radius); padding: 24px 16px 40px; display: grid; gap: 24px; align-content: start; }
@media (min-width: 1024px) { .modal__panel { margin: 40px; min-height: calc(100vh - 80px); padding: 40px 56px 56px; } }
.modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.modal__head > div { display: grid; gap: 8px; }
.modal__close { cursor: pointer; font-family: inherit; flex: none; min-height: 46px; }
.legend { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 15px; line-height: 24px; color: var(--ink-80); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.sw { width: 18px; height: 18px; border-radius: 3px; display: inline-block; flex: none; }
.sw--lec { background: #fdebf3; }
.sw--ws { background: var(--ink-05); box-shadow: inset 0 0 0 1px var(--ink-10); }
.sw--con { background: var(--pure); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tt-wrap { overflow-x: auto; }
.tt { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 6px; table-layout: fixed; font-size: 15px; line-height: 22px; }
.tt caption { text-align: left; color: var(--ink-70); padding: 0 6px 4px; }
.tt th { text-align: left; font-weight: 600; padding: 4px 12px; color: var(--ink); }
.tt .tt__time { width: 130px; font-weight: 400; color: var(--ink-70); }
.tt td { padding: 12px; height: 52px; vertical-align: middle; border-radius: 3px; color: var(--ink-80); }
.tt td.tt--lec { background: #fdebf3; color: var(--ink); font-weight: 500; }
.tt td.tt--ws { background: var(--ink-05); }
.tt td.tt--con { background: var(--pure); box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); font-weight: 500; }
body.has-modal { overflow: hidden; }

/* Narrow screens: course module number above the title, so long German words in headings fit without breaking. */
.program > *, .program__item > div { min-width: 0; }
@media (max-width: 639px) {
  .program__item { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
  .program__item .h5 { padding-top: 0; }
}

/* Info cards (Technická podpora) */
.infocards { display: grid; gap: 16px; }
@media (min-width: 640px) { .infocards { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1024px) { .infocards { grid-template-columns: repeat(4, 1fr); } }
.infocard { background: var(--ink-05); border-radius: var(--radius); padding: 28px; display: grid; gap: 8px; align-content: start; }
.sec--grey .infocard { background: var(--pure); }
.infocard__label { color: var(--ink-70); }
.infocard__value { font-weight: 600; font-size: 20px; line-height: 28px; hyphens: none; overflow-wrap: normal; }
.infocard__value a { text-decoration: none; }
.infocard__value a:hover { text-decoration: underline; text-underline-offset: 4px; }
.infocard__note { color: var(--ink-70); font-size: 15px; line-height: 24px; }
@media (min-width: 1280px) { .infocard__value { font-size: 22px; line-height: 30px; } }

/* Split without image: text only, readable width */
.split:not(:has(.split__media)) { grid-template-columns: minmax(0, 820px); }

/* Capability explorer (Software) */
.feats { display: grid; gap: 16px; }
@media (min-width: 640px) { .feats { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1024px) { .feats { grid-template-columns: repeat(4, 1fr); } }
.feat { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--ink-05); min-height: 250px; display: grid; }
.feat > .feat__btn, .feat > .feat__detail { grid-area: 1 / 1; }
.sec--grey .feat { background: var(--pure); }
.feat__btn { all: unset; box-sizing: border-box; position: relative; display: grid; align-content: start; gap: 10px; width: 100%; padding: 28px 28px 64px; cursor: pointer; color: var(--ink); font-family: inherit; }
.feat__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.feat__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--pure); display: grid; place-items: center; margin-bottom: 6px; transition: transform var(--ease); }
.sec--grey .feat__icon { background: var(--ink-05); }
.feat__icon svg { width: 24px; height: 24px; }
.feat__title { font-weight: 600; font-size: 19px; line-height: 27px; hyphens: none; }
.feat__text { color: var(--ink-70); font-size: 15px; line-height: 24px; }
.feat__more { position: absolute; left: 28px; bottom: 24px; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--ink-40); display: grid; place-items: center; font-size: 18px; line-height: 1; color: var(--ink-70); transition: transform 250ms ease; }
.feat__detail { position: relative; background: var(--ink); color: var(--white); padding: 28px; transform: translateY(101%); transition: transform 280ms cubic-bezier(.2, .7, .2, 1); pointer-events: none; display: grid; align-content: start; gap: 12px; }
.feat__dtitle { font-weight: 600; font-size: 18px; line-height: 26px; }
.feat__detail ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.feat__detail li { position: relative; padding-left: 18px; font-size: 15px; line-height: 23px; color: #e6e6e7; }
.feat__detail li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-40); }
.feat:hover .feat__detail, .feat:focus-within .feat__detail, .feat.is-open .feat__detail { transform: translateY(0); }
.feat:hover .feat__icon { transform: scale(1.06); }
@media (hover: none) { .feat:focus-within:not(.is-open) .feat__detail { transform: translateY(101%); } }
.feats__source { margin-top: 20px; }
@media (min-width: 1024px) { .feat { min-height: 280px; } .feat__title { font-size: 20px; line-height: 28px; } }
/* Entrance: tiles rise in one after another when the section scrolls into view */
.feats.is-anim .feat { opacity: 0; transform: translateY(16px); transition: opacity 400ms ease, transform 400ms ease; transition-delay: calc(var(--d, 0) * 70ms); }
.feats.is-anim.is-in .feat { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .feat__detail { transition: none; } .feats.is-anim .feat { opacity: 1; transform: none; } }

/* Plans (Agile Teams / Enterprise) */
.plans { display: grid; gap: 24px; }
@media (min-width: 1024px) { .plans { grid-template-columns: 1fr 1fr; } }
.planc { background: var(--ink-05); border-radius: var(--radius); padding: 32px; display: grid; gap: 12px; align-content: start; }
.sec--grey .planc { background: var(--pure); }
.planc__text { color: var(--ink-80); font-size: 16px; line-height: 26px; }
.sec-link { margin-top: 28px; }

/* Footer per Figma component „Patička“ (MVP): grey contact lines, separators, no line above the language row */
.foot__lines a { color: var(--grey); }
.foot__lines a:hover { color: var(--white); }
.foot__langs { border-top: 0; padding: 8px 0 40px; }
.foot__langlist { gap: 0; }
.foot__langlist .util__icon { margin-right: 20px; }
.foot__langlist a, .foot__social a, .foot__bottom li { padding: 0 20px; border-left: 1px solid var(--dark-line); line-height: 14px; }
.foot__langlist a:first-of-type, .foot__social a:first-child, .foot__bottom li:first-child { border-left: 0; padding-left: 0; }
.foot__social a:last-child, .foot__bottom li:last-child { padding-right: 0; }
.foot__social { gap: 0; }
.foot__bottom ul { gap: 8px 0; }
.foot__legal { padding: 32px 0 24px; }
.foot__bottom { padding-top: 24px; }

/* Visual check vs Figma 12. 10. 2026 */
@media (min-width: 1024px) {
  /* infographic: axis/branches 2px #abacaf, phase dots ink stroke (Figma „Infografika · životní cyklus“) */
  .ig__phases::before { height: 2px; background: var(--ink-40); }
  .ig__dot { border: 2px solid var(--ink); }
  .ig__nodes { border-left: 2px solid var(--ink-40); }
  /* footer rhythm: padding 96/48, rows 56 apart, language row 100 high (Figma component „Patička“) */
  .site-foot { padding: 96px 0 48px; }
  .foot__top { padding-bottom: 56px; }
  .foot__cols { padding: 40px 0 0; }
  .foot__langs { padding: 96px 0; }
  .foot__legal { padding: 32px 0 0; }
  .foot__bottom { padding-top: 56px; }
}
/* stairs: the arrow into the optional step is dashed */
.stair:has(+ .stair--optional) .stair__arc path:first-child { stroke-dasharray: 5 5; }
/* history timeline per Figma „Osa historie“: 7 slots, items span 2, 16px ticks to a 2px axis, no long verticals */
@media (min-width: 1024px) {
  .history { grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; column-gap: 0; row-gap: 48px; }
  .history::before { top: calc(50% - 1px); height: 2px; }
  .history__item { padding: 0 24px 0 0; border-left: 0; gap: 8px; }
  .history__item:nth-child(n) { grid-column: var(--col) / span 2; }
  .history__item:nth-child(1) { --col: 1; } .history__item:nth-child(2) { --col: 2; } .history__item:nth-child(3) { --col: 3; }
  .history__item:nth-child(4) { --col: 4; } .history__item:nth-child(5) { --col: 5; } .history__item:nth-child(6) { --col: 6; }
  .history__item::before { display: block; content: ""; position: absolute; left: 0; width: 0; height: 16px; border: 0; border-left: 2px solid var(--ink-40); border-radius: 0; background: none; }
  .history__item--up { padding-bottom: 0; }
  .history__item--up::before { top: calc(100% + 8px); }
  .history__item--down { padding-top: 0; }
  .history__item--down::before { top: -24px; }
  .history__item--up p, .history__item--down .history__year { margin-bottom: 0; }
  .history__item p { font-size: 16px; line-height: 26px; }
}
/* form submit carries the same arrow as .btn (Figma „Tlačítko“ Primární) */
.formbox .fluentform .ff-btn-submit { gap: 12px; }
.formbox .fluentform .ff-btn-submit::after { content: ""; width: 16px; height: 11px; flex: none; background: currentColor; -webkit-mask: url(../icons/arrow.svg) no-repeat center / contain; mask: url(../icons/arrow.svg) no-repeat center / contain; transition: transform var(--ease); }
.formbox .fluentform .ff-btn-submit:hover::after { transform: translateX(4px); }
/* stairs: only the riser between two levels is drawn (Figma „Schodiště“), not a full-height divider */
@media (min-width: 1024px) {
  .stair + .stair:not(.stair--optional) { border-left: 0; }
  .stair + .stair:not(.stair--optional)::after { content: ""; position: absolute; left: -1.5px; top: -1.5px; width: 1.5px; height: calc(var(--step) + 1.5px); background: var(--ink-60); }
}
/* contact block per Figma „Hlavní kontakt a formulář“: text 560, gap 96, form 700; company lines 18/30, 18 apart */
@media (min-width: 1024px) {
  .cols--contact { grid-template-columns: 560px 700px; }
  .company { gap: 18px; }
  .company__name { font-size: 22px; line-height: 30px; }
  .company__line { font-size: 18px; line-height: 30px; }
  .company__ids { font-size: 16px; line-height: 26px; }
}
.formbox .fluentform input[type="checkbox"] { margin-right: 10px; }
/* Software overview: heading beside the Altium Designer picture */
.feats-top { display: grid; gap: 24px; margin-bottom: 32px; }
.feats-top .sec-head { margin-bottom: 0; }
.feats-top__img { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--ink); }
.feats-top__pic { display: block; width: 100%; height: auto; aspect-ratio: 1.92; object-fit: cover; object-position: left center; }
@media (min-width: 1024px) {
  .feats-top { grid-template-columns: 620fr 720fr; gap: 96px; align-items: center; margin-bottom: 48px; } /* same rhythm as .split */
}
/* Agile plan cards: product logo above the heading (Figma comment 12. 10. 2026) */
.planc__logo { margin: 0 0 8px; line-height: 0; }
.planc__logo-img { display: block; height: 24px; width: auto; max-width: 100%; }
@media (min-width: 1024px) { .planc__logo-img { height: 28px; } }
/* feature detail keeps the area icon (Figma comment „chybí ikona“) */
.feat__dtitle { display: flex; align-items: center; gap: 10px; }
.feat__dicon { flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: grid; place-items: center; }
.feat__dicon svg { width: 18px; height: 18px; }

/* Site search (Figma: utility bar „Hledat“) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.searchform { display: flex; align-items: center; gap: 12px; position: relative; }
.searchform__icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); line-height: 0; color: var(--ink-60); pointer-events: none; }
.searchform__icon svg { width: 20px; height: 20px; }
.searchform__input { flex: 1; min-width: 0; height: 54px; padding: 0 16px 0 48px; border: 1px solid var(--ink-20); border-radius: var(--radius); background: var(--pure); color: var(--ink); font: inherit; font-size: 16px; }
.searchform__input:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.searchform__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.searchform__btn { flex: none; }
.searchbar { border-top: 1px solid var(--ink-10); background: var(--white); box-shadow: 0 12px 24px rgba(45, 49, 60, .08); }
.searchbar[hidden] { display: none; }
.searchbar__inner { display: flex; align-items: center; gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.searchbar__inner .searchform { flex: 1; }
.searchbar__close { flex: none; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); font-size: 30px; line-height: 1; cursor: pointer; border-radius: 50%; }
.searchbar__close:hover { background: var(--ink-05); }
.drawer .searchform { margin: 16px 0 8px; }
.drawer .searchform__btn { display: none; }
.sec--search .searchform { max-width: 820px; margin-bottom: 40px; }
.sresults { list-style: none; margin: 0; padding: 0; max-width: 820px; border-top: 1px solid var(--ink-10); }
.sresult { padding: 24px 0; border-bottom: 1px solid var(--ink-10); display: grid; gap: 6px; }
.sresult__type { font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-70); }
.sresult__title a { text-decoration: none; color: var(--ink); }
.sresult__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sresult__text { color: var(--ink-80); font-size: 16px; line-height: 26px; }
.sresult__text mark { background: #fdebf3; color: inherit; padding: 0 2px; border-radius: 2px; }
.sresults__none { font-size: 18px; line-height: 30px; margin-bottom: 24px; max-width: 820px; }
.foot__mail { display: inline-block; padding-left: 52px; } /* Figma: e-mail indented under its phone */
/* section heading beside a picture (branches: group map) – same rhythm as .split */
.head-media { display: grid; gap: 24px; margin-bottom: 32px; }
.head-media .sec-head { margin-bottom: 0; }
.head-media__img { margin: 0; border-radius: var(--radius); overflow: hidden; }
.head-media__pic { display: block; width: 100%; height: auto; }
@media (min-width: 1024px) { .head-media { grid-template-columns: 620fr 720fr; gap: 96px; align-items: center; margin-bottom: 48px; } }
.foot__ids { color: var(--grey); font-size: 15px; line-height: 24px; margin: 0; } /* IČO and DIČ: first grey line of the contact block (Figma) */