/* Services page (/leistungen/, /en/services/). Generated markup from tools/build-leistungen.py.
   Uses the site tokens from site.css; adds one soft colour per area. */
:root {
  --ox-start: #B44820;      --ox-start-soft: #FBE9E2;
  --ox-agents: #5546B8;     --ox-agents-soft: #EEEBFA;
  --ox-security: #1D6F62;   --ox-security-soft: #E2F0EC;
  --ox-governance: #996012; --ox-governance-soft: #F8EEDC;
  --ox-managed: #3B3833;    --ox-managed-soft: #ECE8E0;
  --ox-hdr: 67px;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ox-anchor { position: absolute; left: 0; top: calc(-1 * var(--ox-hdr) - 20px); width: 1px; height: 1px; visibility: hidden; }

/* ── Layout: rail + main ─────────────────── */
.ox-layout { max-width: var(--max); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 44px; }
.ox-rail { position: sticky; top: calc(var(--ox-hdr) + 24px); align-self: start; padding-top: 40px; }
.ox-rlist { display: grid; gap: 4px; }
.ox-rl { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; color: var(--ink-2); }
.ox-rl:hover { background: var(--bg-alt); }
.ox-rl b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.ox-rl small { display: block; font-size: 12.5px; color: var(--ink-3); line-height: 1.3; }
.ox-ri { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--c-soft); color: var(--c); }
.ox-ri svg, .ox-hico svg { width: 18px; height: 18px; }
.ox-rl.active { background: var(--card); border-color: var(--border); box-shadow: inset 3px 0 0 var(--c); }
.ox-start { --c: var(--ox-start); --c-soft: var(--ox-start-soft); }
.ox-agents, .ox-area-agents { --c: var(--ox-agents); --c-soft: var(--ox-agents-soft); }
.ox-security, .ox-area-security { --c: var(--ox-security); --c-soft: var(--ox-security-soft); }
.ox-governance, .ox-area-governance { --c: var(--ox-governance); --c-soft: var(--ox-governance-soft); }
.ox-managed, .ox-how, .ox-contact { --c: var(--ox-managed); --c-soft: var(--ox-managed-soft); }
.ox-quick { --c: var(--ox-start); --c-soft: var(--ox-start-soft); }
.ox-box { display: grid; gap: 4px; margin-top: 18px; padding: 16px; border-radius: 14px; background: var(--coral-soft); border: 1px solid #F2C9B9; font-size: 13.5px; color: var(--ink-2); }
.ox-box b { color: var(--ink); font-size: 14px; }
.ox-box em { font-style: normal; color: var(--coral-ink); font-weight: 600; margin-top: 4px; }
.ox-box:hover { border-color: var(--coral); }
.ox-box-inline { display: none; }
.only-mobile { display: none; }

/* ── Hero ─────────────────────────────────── */
.ox-hero { padding: 48px 0 8px; }
.ox-hero h1 { font-size: clamp(30px, 4.2vw, 46px); max-width: 22ch; }
.ox-hero .lead { max-width: 60ch; }
.ox-hero-icons { margin-top: 22px; gap: 12px 18px; }
.ox-hero-icons img { width: 36px; height: 36px; }
.ox-scope { margin: 14px 0 0; }

/* ── Sections ─────────────────────────────── */
.ox-sec { position: relative; padding: 52px 0 8px; scroll-margin-top: calc(var(--ox-hdr) + 12px); }
.ox-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; }
.ox-head h2 { margin-top: 2px; }
.ox-head .sub { margin: 4px 0 0; }
.ox-hico { width: 46px; height: 46px; border-radius: 14px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--c-soft); color: var(--c); }
.ox-hico svg { width: 22px; height: 22px; }
.ox-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* Situation cards: picture strip + text */
.ox-sit { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.ox-sit:hover, .ox-card:hover, .ox-q:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(31, 29, 26, .08); border-color: var(--border-strong); }
.ox-img { height: 92px; display: flex; align-items: center; justify-content: center; gap: 14px; background: linear-gradient(135deg, #F3F0E8, #FBE9E2); }
.ox-img img { width: 40px; height: 40px; object-fit: contain; }
.ox-sit:nth-child(3n+2) .ox-img { background: linear-gradient(135deg, #F3F0E8, #EEEBFA); }
.ox-sit:nth-child(3n) .ox-img { background: linear-gradient(135deg, #F3F0E8, #E2F0EC); }
.ox-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.ox-situ { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--coral-ink); font-weight: 600; }
.ox-sit h3, .ox-card h3 { font-size: 18px; margin: 6px 0 6px; line-height: 1.25; }
.ox-sit p, .ox-card p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.ox-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.ox-chip { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--border); color: var(--ink-2); }

/* Area cards */
.ox-card { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.ox-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.ox-ico { width: 32px; height: 32px; object-fit: contain; }
.ox-badge { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: var(--c-soft); color: var(--c); }
.ox-res { margin-top: 10px !important; font-size: 14px !important; }
.ox-res b { color: var(--c); }
.ox-open { margin-top: auto; align-self: flex-start; background: none; border: 0; padding: 12px 0 0; color: var(--c, var(--coral-ink)); font-weight: 600; font-size: 14px; cursor: pointer; }
.ox-sit .ox-open { color: var(--coral-ink); }
.ox-open:hover { text-decoration: underline; }
.ox-card.compact h3 { font-size: 16.5px; }
.ox-card.compact p { font-size: 14px; }

.ox-more { margin-top: 16px; }
.ox-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: var(--c); padding: 8px 0; }
.ox-more summary::-webkit-details-marker { display: none; }
.ox-more summary::before { content: "+"; width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-soft); font-weight: 700; }
.ox-more[open] summary::before { content: "–"; }
.ox-more > .ox-grid { margin-top: 10px; }

/* Quick wins */
.ox-qgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ox-q { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.ox-qa { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--c); font-weight: 700; }
.ox-q h3 { font-size: 15.5px; margin: 4px 0 4px; line-height: 1.3; }
.ox-q p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.ox-q .ox-open { position: absolute; inset: 0; padding: 0; margin: 0; width: 100%; height: 100%; }

/* Managed tiers */
.ox-tier { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; }
.ox-tier.hl { border: 2px solid var(--ink); box-shadow: 0 10px 28px rgba(31, 29, 26, .08); }
.ox-tl { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.ox-tier h3 { margin: 6px 0 4px; font-size: 19px; }
.ox-tier ul.clean li { font-size: 14px; padding: 5px 0 5px 18px; }
.ox-tier ul.clean li::before { top: 12px; width: 7px; height: 7px; }
.ox-note { font-size: 13.5px; color: var(--ink-3); margin: 10px 0 16px; }
.ox-tier .btn { margin-top: auto; align-self: flex-start; }

/* Steps */
.ox-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: none; }
.ox-steps li { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; position: relative; }
.ox-n { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--coral); color: #fff; font-weight: 700; font-size: 13.5px; }
.ox-steps h3 { font-size: 15.5px; margin: 10px 0 4px; line-height: 1.3; }
.ox-steps p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.ox-way { margin: 14px 0 0; }

/* Contact */
.ox-contact-sec { padding-bottom: 64px; }
.ox-form { padding: 28px; }
.ox-form h2 { margin-bottom: 4px; }
.ox-send { align-items: center; margin-top: 4px; gap: 14px; }

/* ── Detail panel ─────────────────────────── */
.ox-panel { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(540px, 100%); height: 100%; max-height: 100%; max-width: 100%; border: 0; padding: 0; background: var(--card); color: var(--ink); box-shadow: -18px 0 40px rgba(31, 29, 26, .18); overflow-y: auto; }
.ox-panel[open] { display: flex; flex-direction: column; animation: ox-in .2s ease-out; }
.ox-panel::backdrop { background: rgba(31, 29, 26, .42); }
@keyframes ox-in { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ox-panel[open] { animation: none; } .ox-sit, .ox-card, .ox-q { transition: none; } }
.ox-pbar { display: flex; justify-content: flex-end; padding: 14px 18px 0; position: sticky; top: 0; background: var(--card); }
.ox-close { background: none; border: 1px solid var(--border-strong); border-radius: 999px; padding: 6px 14px; cursor: pointer; font-size: 13.5px; color: var(--ink-2); }
.ox-close:hover { background: var(--bg-alt); }
.ox-pbody { padding: 4px 28px 0; border-top: 4px solid transparent; }
.ox-ptag { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--c, var(--coral-ink)); }
.ox-pbody h2 { margin: 6px 0 8px; font-size: 26px; }
.ox-psum { font-size: 16px; color: var(--ink-2); margin: 0 0 14px; }
.ox-pres { background: var(--c-soft, var(--coral-soft)); border-radius: 12px; padding: 12px 14px; font-size: 15px; }
.ox-pres b { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--c, var(--coral-ink)); margin-bottom: 2px; }
.ox-pbody h3 { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 20px 0 6px; font-weight: 700; }
.ox-pbody ul { margin: 0; padding-left: 18px; }
.ox-pbody li { margin: 4px 0; font-size: 15px; color: var(--ink-2); }
.ox-pbody p { font-size: 15px; color: var(--ink-2); margin: 0; }
.ox-pfit { margin-top: 18px; padding: 12px 14px; border-left: 3px solid var(--c, var(--coral)); background: var(--bg); font-size: 15px; color: var(--ink-2); }
.ox-pfit b { color: var(--ink); }
.ox-pbtns { display: flex; flex-wrap: wrap; gap: 10px; padding: 22px 28px 0; }
.ox-pfoot { font-size: 13px; color: var(--ink-3); padding: 14px 28px 28px; margin: 0; }
html.ox-lock { overflow: hidden; }

/* ── Responsive ───────────────────────────── */
@media (max-width: 1080px) {
  .ox-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ox-qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .ox-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ox-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ox-rail { top: var(--ox-hdr); z-index: 40; margin: 0 -24px; padding: 8px 16px; background: rgba(250, 250, 248, .96); border-bottom: 1px solid var(--border); }
  .ox-rlist { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .ox-rlist::-webkit-scrollbar { display: none; }
  .ox-rl { flex: none; padding: 6px 12px 6px 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); gap: 8px; }
  .ox-rl small { display: none; }
  .ox-rl b { font-size: 14px; }
  .ox-ri { width: 26px; height: 26px; border-radius: 50%; }
  .ox-ri svg { width: 15px; height: 15px; }
  .ox-rl.active { box-shadow: none; border-color: var(--c); background: var(--c-soft); }
  .ox-rail > .ox-box { display: none; }
  .ox-box-inline { display: grid; margin-top: 18px; }
  .only-mobile { display: flex; }
  .ox-hero { padding-top: 28px; }
  .ox-sec { padding-top: 40px; scroll-margin-top: calc(var(--ox-hdr) + 64px); }
  .ox-anchor { top: calc(-1 * var(--ox-hdr) - 72px); }
}
@media (max-width: 640px) {
  .ox-grid, .ox-qgrid { grid-template-columns: minmax(0, 1fr); }
  .ox-steps { grid-template-columns: minmax(0, 1fr); }
  .ox-head { gap: 12px; }
  .ox-hico { width: 40px; height: 40px; }
  .ox-form { padding: 20px; }
  .ox-pbody { padding: 4px 20px 0; }
  .ox-pbtns { padding: 20px 20px 0; }
  .ox-pfoot { padding: 14px 20px 24px; }
  .ox-pbody h2 { font-size: 23px; }
}
@media print {
  .ox-layout { display: block; }
  .ox-rail, .ox-panel, .ox-contact-sec { display: none !important; }
  .ox-more > .ox-grid { display: grid; }
}

/* Form fields shrink with the card on small phones. */
.ox-form form.lead { grid-template-columns: minmax(0, 1fr); }
.ox-form form.lead .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ox-form form.lead label { min-width: 0; }
.ox-form form.lead input, .ox-form form.lead select, .ox-form form.lead textarea { width: 100%; min-width: 0; }
@media (max-width: 600px) { .ox-form form.lead .row { grid-template-columns: minmax(0, 1fr); } }

/* Free call without choosing a package */
.ox-free-line { margin: 14px 0 0; font-size: 15px; color: var(--ink-2); }
.ox-free-line a { font-size: inherit; }
.ox-sit.ox-free { border: 1.5px dashed var(--border-strong); background: transparent; cursor: default; }
.ox-sit.ox-free:hover { transform: none; box-shadow: none; border-color: var(--coral); }
.ox-free-img { background: none !important; height: 64px; justify-content: flex-start; padding: 18px 18px 0; color: var(--coral-ink); }
.ox-free-img svg { width: 30px; height: 30px; }
.ox-free-li { margin: 10px 0 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); }
.ox-free-li li { margin: 2px 0; }
.ox-free-btn { margin-top: auto; align-self: flex-start; }
.ox-sit.ox-free .ox-body > p { margin-bottom: 0; }
.ox-sit.ox-free .ox-free-btn { margin-top: 16px; }
.ox-rail-free { display: block; margin: 12px 4px 0; font-size: 13.5px; }

/* Area tags: filter row and small tags on cards */
.ox-tagrow { margin-top: 12px; }
.ox-tagl { font-size: 12px; color: var(--ink-3); margin-bottom: 6px; }
.ox-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ox-tag { font: inherit; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--card); color: var(--ink-2); cursor: pointer; }
.ox-tag:hover { border-color: var(--c, var(--coral)); color: var(--ink); }
.ox-tag[aria-pressed="true"] { background: var(--c, var(--coral)); border-color: var(--c, var(--coral)); color: #fff; }
.ox-sec#start .ox-tag[aria-pressed="true"] { background: var(--coral); border-color: var(--coral); }
.ox-mtags, .ox-ptags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.ox-mtags span, .ox-ptags span { font-size: 11.5px; padding: 1px 8px; border-radius: 6px; background: var(--c-soft, var(--bg-alt)); color: var(--c, var(--ink-2)); }
.ox-sit .ox-mtags span { background: var(--bg-alt); color: var(--ink-2); }
.ox-ptags { margin-top: 18px; }
.ox-ptags span { font-size: 12.5px; padding: 3px 10px; }
.ox-off { display: none !important; }
.ox-nomatch { font-size: 14px; color: var(--ink-3); margin: 6px 0 0; }
.ox-head-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (max-width: 640px) { .ox-head-grid { grid-template-columns: minmax(0, 1fr); } }
.ox-head-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .ox-head-grid.four { grid-template-columns: minmax(0, 1fr); } }
/* The free-call tile spans the full row so it never sits alone in a column. */
.ox-sit.ox-free { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
.ox-sit.ox-free .ox-free-img { height: auto; padding: 22px 0 0 22px; align-items: flex-start; }
.ox-sit.ox-free .ox-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; align-items: center; }
.ox-sit.ox-free .ox-body > * { grid-column: 1; }
.ox-sit.ox-free .ox-free-btn { grid-column: 2; grid-row: 1 / span 4; margin: 0; align-self: center; }
.ox-free-li { display: flex; flex-wrap: wrap; gap: 4px 22px; list-style: none; padding-left: 0; }
.ox-free-li li::before { content: "✓ "; color: var(--coral-ink); font-weight: 700; }
@media (max-width: 640px) {
  .ox-sit.ox-free { flex-direction: column; }
  .ox-sit.ox-free .ox-body { display: flex; }
  .ox-sit.ox-free .ox-free-btn { margin-top: 16px; align-self: flex-start; }
  .ox-free-li { display: block; }
}