/* iSM Solutions – Systemhaus-Entwurf. Quelle; build.py haengt den gemeinsamen
   Waerme- und Motion-Layer aus apps/_shared/ an (dort pflegen, nie hier kopieren). */
html { font-size: 108%; }
:root {
  --bg: #f5f8fd; --bg-2: #eaf0f9; --surface: #ffffff; --surface-2: #f1f5fb;
  --line: #dce4f0; --line-soft: #e8edf6; --ink: #0e1a2f; --muted: #52627e;
  --brand: #0284c7; --brand-deep: #0ea5e9; --indigo: #6366f1; --cyan: #0891b2; --ok: #059669;
  --card: var(--surface);
  --shadow: 0 22px 55px -30px rgba(20,40,80,.24);
  --header-bg: rgba(255,255,255,.86);
  --radius: 20px;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
:root[data-theme="dark"] {
  --bg: #0a0f1c; --bg-2: #0c1322; --surface: #111a2e; --surface-2: #16203a;
  --line: #223049; --line-soft: #1a2740; --ink: #e9eefb; --muted: #94a2c0;
  --brand: #38bdf8; --brand-deep: #0ea5e9; --cyan: #22d3ee; --ok: #34d399;
  --shadow: 0 24px 60px -34px rgba(0,0,0,.85);
  --header-bg: rgba(10,15,28,.86);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 6.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-deep); }
img, svg { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .4em; letter-spacing: -.02em; overflow-wrap: break-word; hyphens: auto; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }
.wrap { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.wrap.narrow { width: min(820px, calc(100% - 32px)); }
.muted { color: var(--muted); }
.center { text-align: center; }
.eyebrow { display: inline-block; color: var(--brand); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .85rem; margin-bottom: .4rem; }
.tagline-pill { display: inline-block; font-size: .72rem; font-weight: 700; color: var(--brand); background: rgba(2,132,199,.10); padding: .28rem .7rem; border-radius: 999px; margin-bottom: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.grad { background: linear-gradient(105deg, var(--brand), var(--cyan) 45%, var(--indigo)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.skip { position: absolute; left: -999px; top: 0; background: var(--brand); color: #fff; padding: .6rem 1rem; border-radius: 0 0 10px 0; z-index: 200; }
.skip:focus { left: 0; color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

/* Platzhalter: bewusst auffaellig, damit nichts unbemerkt live geht. */
.ph { background: #fff3c4; color: #7a4b00; border: 1px dashed #d99a00; border-radius: 6px; padding: 0 .3em; font-weight: 600; font-size: .92em; -webkit-text-fill-color: #7a4b00; }
:root[data-theme="dark"] .ph { background: #3a2c00; color: #ffd66b; border-color: #a77a00; -webkit-text-fill-color: #ffd66b; }
.preview-bar { background: #1e293b; color: #e2e8f0; font-size: .8rem; text-align: center; padding: .35rem 16px; }
.preview-bar .ph { font-size: .95em; }

/* ---------- Topbar ---------- */
.topbar { background: var(--surface-2); border-bottom: 1px solid var(--line-soft); font-size: .82rem; }
.topbar .wrap { display: flex; gap: 1.4rem; align-items: center; padding: .38rem 0; flex-wrap: wrap; }
.tb-item { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-weight: 600; }
a.tb-item:hover { color: var(--brand); }
.tb-item .ic { width: 15px; height: 15px; }
.tb-shop { margin-left: auto; }
@media (max-width: 760px) { .topbar .tb-item:first-child, .topbar .tb-shop { display: none; } .topbar .wrap { gap: .9rem; justify-content: center; } }
@media (max-width: 420px) { .topbar .tb-item:nth-child(4) { display: none; } }

/* ---------- Header ---------- */
header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: saturate(1.2) blur(12px); -webkit-backdrop-filter: saturate(1.2) blur(12px); border-bottom: 1px solid var(--line-soft); }
header.scrolled { box-shadow: 0 8px 24px -16px rgba(2,40,80,.45); }
.nav { display: flex; align-items: center; gap: 1rem; padding: .65rem 0; }
.brand { display: flex; align-items: center; border-radius: 12px; }
.brand img { height: 48px; width: auto; }
:root[data-theme="dark"] .brand { background: #fff; padding: 5px 11px; }
@media (max-width: 480px) { .brand img { height: 38px; } }
.quicknav { display: flex; gap: .2rem; margin-left: auto; align-items: center; }
.quicknav > a, .has-drop > a { font-weight: 600; font-size: .93rem; color: var(--ink); padding: .45rem .7rem; border-radius: 9px; display: inline-block; }
.quicknav a:hover, .quicknav a[aria-current="page"] { background: rgba(2,132,199,.10); color: var(--brand); }
.has-drop { position: relative; }
.has-drop > a::after { content: ""; display: inline-block; width: .38em; height: .38em; margin-left: .45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.2em) rotate(45deg); opacity: .6; }
.drop { position: absolute; top: calc(100% + 6px); left: -1rem; width: 330px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: .5rem; display: none; }
.drop::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.has-drop:hover .drop, .has-drop:focus-within .drop { display: block; }
.drop a { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 10px; color: var(--ink); font-weight: 600; font-size: .92rem; }
.drop a:hover { background: var(--surface-2); color: var(--brand); }
.drop a .ic { width: 20px; height: 20px; color: var(--brand); flex: none; }
.drop .drop-all { border-top: 1px solid var(--line-soft); margin-top: .3rem; color: var(--brand); justify-content: flex-start; }
.theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 13px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); cursor: pointer; font-size: 1.05rem; line-height: 1; }
.theme-toggle:hover { border-color: var(--brand); }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
.burger { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); cursor: pointer; }
.burger svg { width: 22px; height: 22px; margin: 0 auto; }
@media (max-width: 1020px) {
  .quicknav, .nav .nav-cta { display: none; }
  .burger { display: grid; place-items: center; }
  .theme-toggle { margin-left: auto; }
}
.mobile-nav { display: none; border-top: 1px solid var(--line-soft); }
.mobile-nav.open { display: block; padding: .4rem 0 1rem; max-height: calc(100vh - 120px); overflow-y: auto; }
.mobile-nav a { display: block; padding: .65rem .2rem; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line-soft); }
.mobile-nav a.sub { padding-left: 1.1rem; font-weight: 500; color: var(--muted); font-size: .95rem; }
.mobile-nav .btn { margin-top: .9rem; width: 100%; color: #fff; border: 0; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: .5rem; font: inherit; font-weight: 700; cursor: pointer; border: 0; padding: .72rem 1.4rem; border-radius: 999px; transition: filter .15s ease, background .15s ease; }
.btn-lg { padding: .85rem 1.6rem; font-size: 1.02rem; }
.btn-block { width: 100%; }
.btn-primary { background: linear-gradient(135deg, var(--brand-deep), var(--indigo)); color: #fff; box-shadow: 0 14px 30px -16px rgba(56,189,248,.9); }
.btn-primary:hover { filter: brightness(1.08); color: #fff; }
.btn-ghost { background: rgba(2,132,199,.10); color: var(--brand); border: 1px solid rgba(2,132,199,.28); }
.btn-ghost:hover { background: rgba(2,132,199,.18); }
.btn-light { background: #fff; color: #0b3a66; }
.btn-light:hover { color: #0b3a66; filter: brightness(.96); }
.btn-outline-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); }
.btn-outline-light:hover { color: #fff; background: rgba(255,255,255,.12); }
.cta { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.4rem; }

/* ---------- Hero ---------- */
.hero, .page-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line-soft);
  background: radial-gradient(90% 120% at 85% -20%, rgba(99,102,241,.26) 0%, transparent 55%), radial-gradient(80% 120% at -10% 10%, rgba(56,189,248,.20) 0%, transparent 50%), var(--bg); }
.hero::before, .page-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(56,189,248,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(56,189,248,.06) 1px, transparent 1px);
  background-size: 46px 46px; -webkit-mask-image: radial-gradient(70% 70% at 60% 30%, #000 0%, transparent 75%); mask-image: radial-gradient(70% 70% at 60% 30%, #000 0%, transparent 75%); }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.4rem; align-items: center; padding: 3.4rem 0 3.6rem; }
.hero h1 { font-size: clamp(2.3rem, 6vw, 3.9rem); letter-spacing: -.03em; line-height: 1.04; margin: .3rem 0 .4rem; }
.hero .lead, .page-hero .lead { font-size: 1.14rem; color: var(--muted); max-width: 46ch; }
.hero-video { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: #0b1220; line-height: 0; }
.hero-video video { width: 100%; height: auto; display: block; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; padding: 2.2rem 0 2.4rem; } }
.trust { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.6rem; }
.trust span { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--muted); font-size: .93rem; }
.trust .ic { color: var(--ok); width: 18px; height: 18px; }
.page-hero .wrap { position: relative; padding: 2.6rem 0 2.8rem; }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.03em; line-height: 1.06; margin: .2rem 0 .5rem; max-width: 22ch; }
.page-hero.warm { background: radial-gradient(90% 120% at 85% -20%, rgba(234,140,63,.24) 0%, transparent 55%), radial-gradient(80% 120% at -10% 10%, rgba(56,189,248,.16) 0%, transparent 50%), var(--bg); }
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: .9rem; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--brand); }

/* ---------- Sektionen ---------- */
section { padding: 4.2rem 0; }
section.alt { background: var(--bg-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
section.soft { background: linear-gradient(180deg, var(--bg), var(--bg-2)); }
.hero, .page-hero { padding: 0; }
@media (max-width: 700px) { section { padding: 3rem 0; } }
.sec-head { max-width: 760px; margin: 0 auto 2.2rem; text-align: center; }
.sec-head p { color: var(--muted); font-size: 1.05rem; }
.lead-sm { color: var(--muted); font-size: 1.06rem; }
.grid { display: grid; gap: 1.2rem; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.4rem; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 1.6rem; } }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); color: var(--ink); display: flex; flex-direction: column; }
a.card { color: var(--ink); transition: border-color .15s ease; }
a.card:hover { border-color: var(--brand); color: var(--ink); }
.card p { color: var(--muted); }
.card h3 { margin-top: .2rem; }
.ic-badge { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: .9rem; color: var(--brand); background: rgba(2,132,199,.10); flex: none; }
.ic-badge.indigo { color: var(--indigo); background: rgba(99,102,241,.12); }
.ic-badge.warm { color: var(--warm, #ea8c3f); background: rgba(234,140,63,.14); }
.ic-badge .ic { width: 26px; height: 26px; }
.svc-card .claim { color: var(--ink); font-weight: 600; margin-bottom: .5rem; }
.more { margin-top: auto; padding-top: .6rem; display: inline-flex; align-items: center; gap: .4rem; color: var(--brand); font-weight: 700; font-size: .92rem; }
.ic-arrow { width: 16px; height: 16px; }
.tag-lbl { display: inline-block; font-size: .74rem; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .4rem; }
.checks { list-style: none; padding: 0; margin: .3rem 0 0; display: grid; gap: .45rem; }
.checks li { display: flex; gap: .55rem; align-items: flex-start; color: var(--ink); font-size: .95rem; }
.checks .ck { width: 18px; height: 18px; color: var(--ok); flex: none; margin-top: .2rem; }
.card.mini { flex-direction: row; gap: .9rem; align-items: flex-start; padding: 1.2rem; }
.card.mini .ic-badge { margin: 0; width: 42px; height: 42px; }
.card.mini h3 { font-size: 1.02rem; margin: 0 0 .2rem; }
.card.mini p { margin: 0; font-size: .92rem; }
.mini-prod h3 { font-size: 1rem; margin-bottom: .3rem; }
.mini-prod p { font-size: .9rem; margin: 0; }
.highlight { max-width: 860px; margin: 0 auto; text-align: center; align-items: center; }
.highlight p { max-width: 64ch; }

/* Schnellzugriff unter dem Hero */
.quick { padding: 0; margin-top: -1.6rem; position: relative; z-index: 2; }
.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.1rem; box-shadow: var(--shadow); display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: center; color: var(--ink); }
.tile:hover { border-color: var(--brand); color: var(--ink); }
.tile .ic { grid-row: span 2; width: 30px; height: 30px; color: var(--brand); }
.tile b { font-size: .98rem; }
.tile small { color: var(--muted); font-size: .82rem; }
@media (max-width: 900px) { .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .quick-grid { grid-template-columns: 1fr; } }
.quick + section { padding-top: 4.4rem; }

/* Kennzahlen */
.stat-card .big { font-size: clamp(2.6rem, 6vw, 3.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-bottom: .6rem; }
.stat-card .big, .numbers b { background: linear-gradient(105deg, var(--brand), var(--indigo)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-list { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .6rem; }
.stat-list li { display: flex; gap: .8rem; align-items: baseline; border-top: 1px solid var(--line-soft); padding-top: .6rem; }
.stat-list b { min-width: 2.4rem; font-size: 1.2rem; color: var(--brand); }
.stat-list span { color: var(--muted); }
.numbers-sec { padding: 2.6rem 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; text-align: center; }
.numbers > div { display: flex; flex-direction: column; gap: .3rem; align-items: center; }
.numbers b { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.numbers span { color: var(--muted); font-size: .92rem; }
.numbers .ph { font-size: 1rem; }
.numbers.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.numbers.compact > div { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.2rem; }
@media (max-width: 700px) { .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Referenzen & Partner */
.logo-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1.4rem; }
.logo-slot { height: 78px; border: 1px dashed var(--line); border-radius: 14px; display: grid; place-items: center; text-align: center; padding: .4rem; background: var(--surface); font-size: .8rem; }
@media (max-width: 900px) { .logo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quote blockquote { margin: 0 0 1rem; font-size: 1.02rem; line-height: 1.55; }
.quote figcaption { margin-top: auto; display: flex; flex-direction: column; gap: .2rem; font-size: .9rem; }
.quote figcaption span { color: var(--muted); }
.quote { margin: 0; }

/* Ablauf */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; counter-reset: s; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.step .num { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--brand-deep), var(--indigo)); color: #fff; font-weight: 800; margin-bottom: .8rem; }
.step p { color: var(--muted); margin: 0; font-size: .95rem; }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* CTA-Band */
.cta-band-wrap { padding: 3.6rem 0; }
.band { border-radius: 26px; padding: 2.4rem 2.6rem; color: #fff; display: grid; grid-template-columns: 1.3fr auto; gap: 1.6rem; align-items: center;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.18) 0%, transparent 50%), linear-gradient(130deg, #0369a1, #4f46e5); box-shadow: 0 30px 60px -30px rgba(30,60,140,.6); }
.band h2 { color: #fff; margin-bottom: .3rem; }
.band p { color: rgba(255,255,255,.88); margin: 0; }
.band-cta { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 860px) { .band { grid-template-columns: 1fr; padding: 1.8rem 1.4rem; } .band-cta { justify-content: flex-start; } }

/* Support, Karriere, Team, Kontakt */
.support-card p b { color: var(--ink); }
.howto { padding-left: 1.2rem; color: var(--muted); }
.howto li { margin-bottom: .4rem; }
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: .7rem; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1.2rem; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq details p { color: var(--muted); margin: .7rem 0 0; }
.job-card h3 { font-size: 1.3rem; }
.card.job { padding: 2rem; }
.job-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1.2rem; }
.job-head h2 { margin: 0; }
.job .grid { margin-bottom: 1rem; }
.person { align-items: flex-start; }
.avatar { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); margin-bottom: .8rem; }
.avatar .ic { width: 32px; height: 32px; }
.person h3 { font-size: 1.02rem; margin-bottom: .1rem; }
.person p { margin: 0; font-size: .9rem; }
.map-card { min-height: 240px; justify-content: center; }
.map-ph { text-align: center; color: var(--muted); display: grid; justify-items: center; gap: .6rem; }
.big-ic { width: 44px; height: 44px; color: var(--brand); }
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 2rem; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-lines { display: grid; gap: .3rem; }
.contact-line { display: flex; gap: .9rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--line-soft); }
.contact-line .ci { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: rgba(2,132,199,.10); color: var(--brand); flex: none; }
.contact-line .ci .ic { width: 22px; height: 22px; }
.contact-line b, .contact-line a { font-weight: 700; display: block; }
.contact-line small { color: var(--muted); display: block; }
.note { margin-top: 1.2rem; font-size: .92rem; }
.form-card { gap: .2rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .8rem; }
.field label { font-weight: 600; font-size: .9rem; }
.field input, .field textarea { font: inherit; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .85rem; width: 100%; }
.field textarea { min-height: 140px; resize: vertical; }
.field.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .85rem; color: var(--muted); margin: .8rem 0 0; }
.form-note.err { color: #c0392b; }

/* Rechtsseiten */
.legal-page { padding: 3rem 0 4rem; }
.legal-page h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.legal-page h2 { font-size: 1.25rem; margin-top: 1.8rem; }

/* ---------- Footer ---------- */
footer.site { background: var(--surface); border-top: 1px solid var(--line); padding: 3rem 0 1.4rem; }
footer.site .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.foot-brand img { height: 44px; width: auto; margin-bottom: .9rem; }
:root[data-theme="dark"] .foot-brand img { background: #fff; padding: 5px 10px; border-radius: 10px; }
.foot-brand p { color: var(--muted); font-size: .92rem; max-width: 36ch; }
footer h4 { margin: 0 0 .7rem; font-size: .95rem; }
.flinks { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .9rem; color: var(--muted); }
.flinks a { color: var(--muted); }
.flinks a:hover { color: var(--brand); }
.legal { grid-column: 1 / -1; border-top: 1px solid var(--line-soft); padding-top: 1.1rem; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between; color: var(--muted); font-size: .84rem; }
.legal a { color: var(--muted); }
@media (max-width: 900px) { footer.site .wrap { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { footer.site .wrap { grid-template-columns: 1fr; } }

/* Lange deutsche Komposita ("Wiederherstellungstests", "IT-Systemadministrator")
   sprengen bei 320px sonst Karte und Ueberschrift: das Grid-Item waechst auf
   seine min-content-Breite. Bricht nur, wenn es wirklich nicht passt. */
.card, .step, .tile { min-width: 0; }
h1, h2, h3, .checks li, .ph, .card p { overflow-wrap: anywhere; }
@media (max-width: 420px) { .job-head h2 { font-size: 1.35rem; } }
.legal-page p, .legal-page li { overflow-wrap: anywhere; }

/* ======================================================================
   Illustrationen (Karten + Seitenkopf). Strich wie auf website-main/sw.
   Startzustand nur hinter no-preference: bei reduced-motion oder ohne
   Skript sind alle Bilder sofort fertig gezeichnet.
   ====================================================================== */
.illo svg { display: block; width: 100%; height: auto; overflow: visible; }
.illo .cl { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.illo .ct { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.illo .cn { fill: var(--brand); }
.illo.indigo .cl, .illo.indigo .ping { stroke: var(--indigo); }
.illo.indigo .cn, .illo.indigo .pkt { fill: var(--indigo); }
.illo.warm .cl { stroke: var(--warm, #ea8c3f); }
.illo.warm .cn { fill: var(--warm, #ea8c3f); }
.illo .cf { transform-box: fill-box; transform-origin: center; }
/* Dauer-Elemente: ohne Bewegung unsichtbar, ausser den Tipp-Punkten. */
.illo .rack-scan { fill: none; stroke: var(--brand); stroke-width: 12; opacity: 0; }
.illo .caret { fill: none; stroke: var(--indigo); stroke-width: 2.6; stroke-linecap: round; opacity: 0; }
.illo .ping { fill: none; stroke: var(--brand); stroke-width: 2; opacity: 0; }
.illo .pkt { fill: var(--brand); opacity: 0; }

.card-illo { margin: -.2rem -.2rem 1.1rem; padding: .9rem 1.2rem .6rem; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-soft); }
.card-illo svg { max-height: 118px; }
.hero-illo { width: 100%; max-width: 440px; justify-self: end; padding: 1.4rem; border-radius: 24px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow); }
.page-hero.has-illo .wrap { display: grid; grid-template-columns: 1.25fr .75fr; gap: 2.4rem; align-items: center; }
@media (max-width: 900px) { .page-hero.has-illo .wrap { grid-template-columns: 1fr; } .hero-illo { justify-self: start; max-width: 360px; padding: 1rem; } }
@media (max-width: 560px) { .hero-illo { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* Auftritt: Karten beim Einscrollen (.rv -> .rv-in vom Motion-Layer), Kopfbild beim Laden. */
  .card.rv .illo .dw { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .card.rv .illo .cf { opacity: 0; transform: scale(.6); }
  .card.rv-in .illo .dw { animation: illoDraw .7s ease forwards; }
  .card.rv-in .illo .cf { animation: illoFade .4s ease forwards; }
  .card .illo :is(.d2 .dw, .dw.d2, .d2 .cf, .cf.d2) { animation-delay: .5s; }
  .card .illo :is(.d3 .dw, .dw.d3, .d3 .cf, .cf.d3) { animation-delay: .9s; }
  .hero-illo .dw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: illoDraw .9s ease .25s forwards; }
  .hero-illo .cf { opacity: 0; transform: scale(.6); animation: illoFade .45s ease .25s forwards; }
  .hero-illo :is(.d2 .dw, .dw.d2, .d2 .cf, .cf.d2) { animation-delay: .8s; }
  .hero-illo :is(.d3 .dw, .dw.d3, .d3 .cf, .cf.d3) { animation-delay: 1.3s; }

  /* Dauerbewegung: erst wenn das Bild sichtbar ist (.rv-in, oder nie versteckt),
     Start nach der letzten Zeichenstufe. Jede auf einem eigenen Element. */
  :is(.card:not(.rv), .card.rv-in, .page-hero) .illo .arm-shoulder { transform-origin: 65px 95px; animation: armShoulder 3.2s ease-in-out 1.8s infinite; }
  :is(.card:not(.rv), .card.rv-in, .page-hero) .illo .arm-elbow { transform-origin: 140px 70px; animation: armElbow 3.2s ease-in-out 1.8s infinite; }
  :is(.card:not(.rv), .card.rv-in, .page-hero) .illo .rack-scan { animation: rackScan 3.2s ease-in-out 1.8s infinite; }
  :is(.card:not(.rv), .card.rv-in, .page-hero) .illo .led:nth-child(1) { animation: blink 2.4s ease-in-out 1.8s infinite; }
  :is(.card:not(.rv), .card.rv-in, .page-hero) .illo .led:nth-child(2) { animation: blink 2.4s ease-in-out 2.2s infinite; }
  :is(.card:not(.rv), .card.rv-in, .page-hero) .illo .led:nth-child(3) { animation: blink 2.4s ease-in-out 2.6s infinite; }
  :is(.card:not(.rv), .card.rv-in, .page-hero) .illo .caret { animation: cursorBlink 1.1s steps(1) 1.8s infinite; }
  :is(.card:not(.rv), .card.rv-in, .page-hero) .illo .code-breathe { transform-origin: 150px 58px; animation: codeBreathe 3.2s ease-in-out 1.8s infinite; }
  :is(.card:not(.rv), .card.rv-in, .page-hero) .illo .ping { transform-origin: 150px 82px; animation: shieldPing 2.8s ease-out 1.8s infinite; }
  :is(.card:not(.rv), .card.rv-in, .page-hero) .illo .pkt.up { animation: pktUp 1.8s ease-in-out 1.8s infinite; }
  :is(.card:not(.rv), .card.rv-in, .page-hero) .illo .pkt.down { animation: pktDown 1.8s ease-in-out 2.7s infinite; }
  :is(.card:not(.rv), .card.rv-in, .page-hero) .illo .dot:nth-child(1) { animation: typing 1.4s ease-in-out 1.8s infinite; }
  :is(.card:not(.rv), .card.rv-in, .page-hero) .illo .dot:nth-child(2) { animation: typing 1.4s ease-in-out 2.0s infinite; }
  :is(.card:not(.rv), .card.rv-in, .page-hero) .illo .dot:nth-child(3) { animation: typing 1.4s ease-in-out 2.2s infinite; }
  .card.rv .illo .dots { opacity: 0; }
  .card.rv-in .illo .dots { animation: illoFade .4s ease .9s forwards; }
}
@keyframes illoDraw { to { stroke-dashoffset: 0; } }
@keyframes illoFade { to { opacity: 1; transform: none; } }
@keyframes armShoulder { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(10deg); } }
@keyframes armElbow { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-16deg); } }
@keyframes rackScan { 0% { transform: translateY(40px); opacity: 0; } 15%, 85% { opacity: .3; } 100% { transform: translateY(130px); opacity: 0; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes cursorBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes codeBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes shieldPing { 0% { transform: scale(.6); opacity: .55; } 75% { opacity: 0; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes pktUp { 0% { transform: translateY(0); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translateY(-22px); opacity: 0; } }
@keyframes pktDown { 0% { transform: translateY(0); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translateY(22px); opacity: 0; } }
@keyframes typing { 0%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-4px); opacity: 1; } }
.illo .dot { transform-box: fill-box; transform-origin: center; }

/* Produkte (Karten 1:1 von sw.ism-solutions.com) */
.prod-card .card-illo svg { max-height: 96px; }
.prod-card h3 { font-size: 1.05rem; }
.card .p-type { font-weight: 600; color: var(--muted); font-size: .82rem; letter-spacing: -.01em; }
.prod-teaser { padding-top: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; max-width: 900px; margin: 0 auto 1.6rem; }
.chip { padding: .45rem .95rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; font-size: .9rem; }
.chip:hover { border-color: var(--brand); color: var(--brand); }

/* Kopf: Dropdown mit Untertitel, Theme-Schalter als SVG */
.drop { width: 360px; }
.drop a > span { display: flex; flex-direction: column; line-height: 1.25; }
.drop a small { color: var(--muted); font-weight: 500; font-size: .8rem; }
.theme-toggle svg { width: 20px; height: 20px; }

/* Hero: Statusmarke ueber dem Video */
.hero-media { position: relative; }
.hero-badge { position: absolute; z-index: 2; left: -1.2rem; bottom: -1.1rem; display: grid; grid-template-columns: auto 1fr; column-gap: .65rem; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: .7rem 1rem; box-shadow: var(--shadow); }
.hero-badge b { font-size: .9rem; }
.hero-badge small { grid-column: 2; color: var(--muted); font-size: .78rem; }
.pulse { grid-row: span 2; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); position: relative; }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ok); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .pulse::after { animation: pulse 2s ease-out infinite; } }
@keyframes pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.8); opacity: 0; } }
/* Mobil: die Marke schwebte ueber dem Videorand und ragte in den Text darunter
   (Schnellzugriff-Kacheln ziehen sich mit -1.6rem hoch). Dort im Fluss unter das Video. */
@media (max-width: 900px) {
  .hero-media { display: flex; flex-direction: column; }
  .hero-badge { position: static; order: 2; margin-top: .8rem; align-self: flex-start; }
  .hero .wrap { padding-bottom: 3.2rem; }
}

/* Haekchen im Hero zeichnen sich ein */
@media (prefers-reduced-motion: no-preference) {
  .trust .ic path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: checkDraw .6s ease-out forwards; }
  .trust span:nth-child(1) .ic path { animation-delay: .5s; }
  .trust span:nth-child(2) .ic path { animation-delay: .68s; }
  .trust span:nth-child(3) .ic path { animation-delay: .86s; }
}
@keyframes checkDraw { to { stroke-dashoffset: 0; } }

/* Ablauf: Verbindungslinie zwischen den Schritten */
.steps { position: relative; }
@media (min-width: 1001px) {
  .steps::before { content: ""; position: absolute; top: 2.55rem; left: 3rem; right: 3rem; height: 2px; background: linear-gradient(90deg, var(--brand), var(--indigo)); opacity: .35; transform-origin: 0 50%; }
  .step { position: relative; }
}

/* Karten: sanfter Hover ohne transform (das gehoert dem Reveal) */
a.card { transition: border-color .15s ease, box-shadow .2s ease; }
a.card:hover { box-shadow: 0 0 0 1px rgba(2,132,199,.28), 0 26px 50px -26px rgba(2,132,199,.45); }
a.card:hover .more .ic-arrow { transform: translateX(3px); }
.more .ic-arrow { transition: transform .15s ease; }
.duo { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: auto; padding-top: .6rem; }
.duo .btn { padding: .6rem 1.1rem; font-size: .92rem; }
.contact-line small a.inl { display: inline; font-weight: 600; }

/* Sec-IT-X: vier Spalten + SLA-Band */
.secitx-grid .card p:empty { display: none; }
.secitx-grid .card h3 { font-size: 1.05rem; }
.sla-band { margin-top: 1.4rem; display: grid; grid-template-columns: auto 1fr auto; gap: 1.6rem; align-items: center; }
.sla-band .big { font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; background: linear-gradient(105deg, var(--brand), var(--indigo)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sla-band p { margin: 0; }
@media (max-width: 800px) { .sla-band { grid-template-columns: 1fr; gap: .8rem; } }
.card p:empty { display: none; }

/* Karten, die beim Laden schon im Bild sind, bekommen vom Motion-Layer nie
   .rv (er versteckt nichts Sichtbares) und haben sich deshalb nie gezeichnet –
   die Bewegung begann erst beim Scrollen. Rein per CSS: ohne .rv zeichnet sich
   das Bild beim Laden. Faellt die Karte unter den Falz, setzt das Skript .rv
   und diese Regel greift nicht mehr; dann uebernimmt .rv -> .rv-in.
   `backwards` haelt den Startzustand waehrend der Verzoegerung, danach bleibt
   der Strich ohne fill-mode bei 0 (= fertig) – ohne Bewegung also nie leer. */
@media (prefers-reduced-motion: no-preference) {
  .card:not(.rv) .illo .dw { stroke-dasharray: 1; animation: illoDrawIn .7s ease .3s backwards; }
  .card:not(.rv) .illo .cf { animation: illoFadeIn .4s ease .3s backwards; }
  .card:not(.rv) .illo :is(.d2 .dw, .dw.d2, .d2 .cf, .cf.d2) { animation-delay: .7s; }
  .card:not(.rv) .illo :is(.d3 .dw, .dw.d3, .d3 .cf, .cf.d3) { animation-delay: 1.1s; }
  .card:not(.rv) .illo .dots { animation: illoFadeIn .4s ease 1.1s backwards; }
}
@keyframes illoDrawIn { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes illoFadeIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.team-grid { max-width: 760px; margin: 0 auto; }

/* === iSM Waerme-Layer: erzeugt von _shared/warm_layer.py — nicht von Hand aendern === */
/* iSM/SecITX Waerme-Layer — gemeinsame Aufwaermung aller eigenen Seiten.
   EINZIGE Quelle; eingespielt von _shared/warm_layer.py (Handseiten) bzw.
   gelesen von den build.py der generierten Seiten. Nicht pro Seite kopieren.

   Grundregel: es werden TOKENS neu gesetzt, keine Regel umgeschrieben. Damit
   kann keine Seite an einer Regel brechen, die es bei ihr gar nicht gibt, und
   die Seiten behalten ihre eigene Gestaltung — sie wird nur waermer.

   Drei Namensfamilien existieren im Bestand und werden alle bedient:
     A  --bg-2 / --surface-2 / --line-soft / --radius   (ism-solutions.com & Co.)
     B  --surface2 / --grad                             (secitx-Shop-Linie)
     C  --card / --border / --fg / --icon-bg            (products, portal)
   Ein Name, den eine Seite nicht kennt, kostet nichts. */

:root {
  --bg:#fbf8f4;
  --bg-2:#f4efe8;
  --surface-2:#f6f2ec;
  --surface2:#f4efe8;
  --line:#e6ddd1;
  --line-soft:#efe8dd;
  --border:#e6ddd1;
  --card-hover:#f6f2ec;
  --icon-bg:#f6efe6;
  --chip-bg:#f6efe6;
  --muted:#5b6274;
  --warm:#ea8c3f;
  --radius:20px;
  --shadow:0 18px 44px -28px rgba(90,64,38,.28);
}
:root[data-theme="dark"] {
  --bg:#10131b;
  --bg-2:#151822;
  --surface:#191d28;
  --surface-2:#1c212d;
  --surface2:#151822;
  --line:#2a3040;
  --line-soft:#232836;
  --border:rgba(255,255,255,.10);
  --card-hover:rgba(255,255,255,.07);
  --icon-bg:rgba(255,255,255,.05);
  --chip-bg:rgba(255,255,255,.06);
  --warm:#f7b267;
  --shadow:0 24px 60px -34px rgba(0,0,0,.72);
}

/* Rundere Kanten — die geerbten 10/12/14px lesen sich als Datenblatt. */
.card, .step, .tier, .band, .form, .panel { border-radius:20px; }
.btn, .tagline-pill, .chip, .badge, .tabbtn { border-radius:999px; }
.ic-badge { border-radius:16px; }

/* Ueberschriften: 800 bei -.02em Laufweite ist Broschuerensatz. Etwas leichter
   und offener ist der groesste Einzelunterschied zwischen streng und nahbar. */
h1, h2 { font-weight:700; }
h1, h2, h3 { letter-spacing:-.005em; }
.sec-head h2, .group-head h3 { font-weight:700; letter-spacing:-.005em; }
.hero h1 { letter-spacing:-.012em; }

.ic-badge { transition:transform .2s ease; }
.card:hover .ic-badge { transform:scale(1.08) rotate(-4deg); }

/* Warmes Feld im Hero. Bewusst ueber background-position animiert und NICHT
   ueber transform: ein verschobenes inset:0-Rechteck braucht overflow:hidden
   am Hero, und das haben nicht alle Seiten — auf einer davon wuerde es eine
   absichtlich ueberstehende Grafik abschneiden. */
.hero { position:relative; }
.hero::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(38% 46% at 70% 12%, rgba(234,140,63,.18) 0%, transparent 62%),
    radial-gradient(30% 40% at 12% 84%, rgba(56,189,248,.12) 0%, transparent 60%);
  background-size:160% 160%;
  background-position:50% 50%;
}
.hero > * { position:relative; z-index:1; }

@media (prefers-reduced-motion: no-preference) {
  .hero::after { animation:ismWarmDrift 32s ease-in-out infinite alternate; }
}
@keyframes ismWarmDrift {
  from { background-position:42% 44%; }
  to   { background-position:58% 56%; }
}
/* === Ende iSM Waerme-Layer === */
/* === iSM Motion-Layer: erzeugt von _shared/warm_layer.py — nicht von Hand aendern === */
/* iSM/SecITX Motion-Layer — gemeinsame Bewegung aller eigenen Seiten.
   EINZIGE Quelle; eingespielt von _shared/warm_layer.py. Nicht pro Seite kopieren.

   Alles hier bewegt ausschliesslich `transform` und `opacity` — die beiden
   Eigenschaften, die der Compositor ohne Neu-Layout animieren kann. Jede
   Bewegung steht entweder hinter `prefers-reduced-motion: no-preference`
   oder wird vom Skript gar nicht erst eingeschaltet. */

/* --- Fortschrittsbalken ------------------------------------------------- */
/* Wird vom Skript angelegt; ohne Skript existiert das Element nicht. */
.ism-progress {
  position:fixed; top:0; left:0; right:0; height:3px; z-index:2000;
  pointer-events:none; transform:scaleX(0); transform-origin:0 50%;
  will-change:transform;
  background:linear-gradient(90deg, var(--brand,#0284c7), var(--indigo,#6366f1) 55%, var(--warm,#ea8c3f));
}

/* --- Header verdichtet sich beim Scrollen ------------------------------- */
/* Nur Schatten, keine Hoehe: eine schrumpfende Kopfzeile verschiebt jeden
   sticky-Offset und jedes scroll-margin-top darunter. */
header { transition:box-shadow .28s ease; }
header.ism-stuck { box-shadow:0 14px 34px -22px rgba(20,40,80,.45); }
:root[data-theme="dark"] header.ism-stuck { box-shadow:0 14px 34px -22px rgba(0,0,0,.8); }

/* --- Scroll-Reveal ------------------------------------------------------ */
/* Den Startzustand setzt das Skript NUR auf Elemente, die beim Laden unterhalb
   des Fensters liegen. Was schon sichtbar ist, wird nie versteckt — deshalb
   braucht es kein Kopfskript, es gibt kein Aufblitzen, und ein fehlgeschlagenes
   Skript hinterlaesst eine vollstaendig lesbare Seite statt einer leeren. */
.rv { opacity:0; transform:translateY(18px); }
.rv, .rv-in { transition:opacity .6s cubic-bezier(.22,.8,.3,1),
                         transform .6s cubic-bezier(.22,.8,.3,1); }
.rv-in { opacity:1; transform:none; }

.grid > .rv:nth-child(2), .steps > .rv:nth-child(2), .cards > .rv:nth-child(2) { transition-delay:.07s; }
.grid > .rv:nth-child(3), .steps > .rv:nth-child(3), .cards > .rv:nth-child(3) { transition-delay:.14s; }
.grid > .rv:nth-child(4), .steps > .rv:nth-child(4), .cards > .rv:nth-child(4) { transition-delay:.21s; }
.grid > .rv:nth-child(5), .cards > .rv:nth-child(5) { transition-delay:.28s; }
.grid > .rv:nth-child(6), .cards > .rv:nth-child(6) { transition-delay:.35s; }

@media (prefers-reduced-motion: no-preference) {

  /* --- Akzentwoerter schimmern ------------------------------------------ */
  /* .grad ist auf allen Seiten der Verlauf im Ueberschriften-Akzent
     (background-clip:text). background-size macht ihn breiter als die Schrift,
     erst dadurch hat background-position ueberhaupt Weg. */
  .grad { background-size:220% 100%; animation:ismGradShift 9s ease-in-out infinite alternate; }

  /* --- Glanz ueber dem Hauptknopf --------------------------------------- */
  .btn-primary { position:relative; overflow:hidden; }
  .btn-primary::after {
    content:""; position:absolute; top:0; bottom:0; left:-60%; width:38%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
    transform:skewX(-18deg); opacity:0; pointer-events:none;
  }
  .btn-primary:hover::after { opacity:1; animation:ismShine .75s ease; }

  /* --- Hero faehrt beim Laden gestaffelt ein ---------------------------- */
  /* Absichtlich nur die DIREKTEN Kinder von .wrap: die Seiten haben dort
     unterschiedliche Baeume (mal ein Textblock plus Video, mal die Absaetze
     einzeln), und ein Selektor ueber beide Ebenen wuerde die Bewegung
     verschachteln und doppelt so weit laufen lassen. */
  .hero .wrap > *, .hello .wrap > * { animation:ismRise .7s cubic-bezier(.22,.8,.3,1) both; }
  .hero .wrap > *:nth-child(2), .hello .wrap > *:nth-child(2) { animation-delay:.09s; }
  .hero .wrap > *:nth-child(3), .hello .wrap > *:nth-child(3) { animation-delay:.18s; }
  .hero .wrap > *:nth-child(4), .hello .wrap > *:nth-child(4) { animation-delay:.27s; }
  .hero .wrap > *:nth-child(5) { animation-delay:.36s; }
  .hero .wrap > *:nth-child(6) { animation-delay:.45s; }
}

@keyframes ismGradShift { from { background-position:0% 50%; } to { background-position:100% 50%; } }
@keyframes ismShine     { from { left:-60%; } to { left:120%; } }
@keyframes ismRise      { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
/* === Ende iSM Motion-Layer === */
/* Toni — der Assistent, als wiederverwendbare Huelle.
   EINZIGE Quelle; das Markup baut toni.js, die Antworten kommen pro Seite aus
   window.TONI_CONFIG. Nichts hier kennt eine einzelne Seite.

   Die vier iSM-Bereichsseiten tragen noch ihre aeltere, eingebaute Fassung
   (eigenes Markup, onclick-Attribute im Antworttext). Die kann auf diese Huelle
   umziehen, ist aber bewusst nicht mitgewandert worden — vier funktionierende
   Chatbots anzufassen war nicht Teil der Aufgabe. */

.toni-fab {
  position:fixed; right:20px; bottom:20px; z-index:1200;
  width:58px; height:58px; border-radius:18px; border:0; cursor:pointer;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(140deg, var(--brand,#0284c7), var(--indigo,#6366f1));
  box-shadow:0 16px 34px -12px rgba(2,132,199,.7);
  transition:transform .12s ease, box-shadow .12s ease;
}
.toni-fab:hover { transform:translateY(-2px); box-shadow:0 20px 40px -12px rgba(2,132,199,.8); }
.toni-fab svg { width:30px; height:30px; }
.toni-fab .toni-x { display:none; font-size:1.5rem; line-height:1; }
.toni-fab[aria-expanded="true"] svg { display:none; }
.toni-fab[aria-expanded="true"] .toni-x { display:block; }

.toni-panel {
  position:fixed; right:20px; bottom:88px; z-index:1201;
  width:min(372px, calc(100vw - 40px));
  height:min(540px, calc(100vh - 130px));
  background:var(--surface,#fff); color:var(--ink,#0e1a2f);
  border:1px solid var(--line,#e6ddd1); border-radius:20px;
  box-shadow:0 34px 76px -24px rgba(40,30,20,.5);
  display:flex; flex-direction:column; overflow:hidden;
}
.toni-panel[hidden] { display:none; }

.toni-head {
  display:flex; align-items:center; gap:.65rem; padding:.8rem 1rem; color:#fff;
  background:linear-gradient(120deg, var(--brand,#0284c7), var(--indigo,#6366f1));
}
.toni-head .toni-ava { width:38px; height:38px; flex:none; border-radius:12px;
  background:rgba(255,255,255,.18); display:grid; place-items:center; }
.toni-head b { display:block; font-size:.95rem; line-height:1.2; }
.toni-head small { display:block; font-size:.76rem; opacity:.85; }
.toni-head .toni-close { margin-left:auto; width:30px; height:30px; flex:none;
  border:0; border-radius:10px; background:rgba(255,255,255,.16); color:#fff;
  font-size:1.2rem; line-height:1; cursor:pointer; }
.toni-head .toni-close:hover { background:rgba(255,255,255,.28); }

.toni-log { flex:1; overflow-y:auto; padding:.9rem 1rem; display:flex;
  flex-direction:column; gap:.6rem; background:var(--surface2, var(--surface-2,#f6f2ec)); }
.toni-msg { max-width:88%; padding:.6rem .8rem; border-radius:16px; font-size:.92rem; line-height:1.45; }
.toni-msg.bot { background:var(--surface,#fff); border:1px solid var(--line,#e6ddd1);
  border-bottom-left-radius:6px; align-self:flex-start; }
.toni-msg.user { background:linear-gradient(140deg, var(--brand,#0284c7), var(--indigo,#6366f1));
  color:#fff; border-bottom-right-radius:6px; align-self:flex-end; }
.toni-msg a { color:var(--brand,#0284c7); font-weight:700; text-decoration:underline; }
.toni-msg.user a { color:#fff; }
.toni-msg .toni-act { display:inline-block; margin-top:.45rem; padding:.35rem .8rem;
  border:1px solid var(--line,#e6ddd1); border-radius:999px; background:var(--surface,#fff);
  color:var(--brand,#0284c7); font:inherit; font-size:.86rem; font-weight:700; cursor:pointer; }
.toni-msg .toni-act:hover { border-color:var(--brand,#0284c7); }

.toni-quick { display:flex; flex-wrap:wrap; gap:.4rem; padding:.6rem 1rem 0; }
.toni-quick button { border:1px solid var(--line,#e6ddd1); background:var(--surface,#fff);
  color:var(--muted,#5b6274); font:inherit; font-size:.84rem; font-weight:700;
  padding:.34rem .75rem; border-radius:999px; cursor:pointer; }
.toni-quick button:hover { border-color:var(--brand,#0284c7); color:var(--ink,#0e1a2f); }

.toni-input { display:flex; gap:.5rem; padding:.75rem 1rem 1rem; }
.toni-input input { flex:1; min-width:0; font:inherit; font-size:.92rem;
  color:var(--ink,#0e1a2f); background:var(--surface2, var(--surface-2,#f6f2ec));
  border:1px solid var(--line,#e6ddd1); border-radius:999px; padding:.55rem .9rem; }
.toni-input input:focus { outline:2px solid var(--brand,#0284c7); outline-offset:1px; }
.toni-input button { flex:none; border:0; border-radius:999px; cursor:pointer;
  padding:.55rem 1rem; font:inherit; font-weight:700; color:#fff;
  background:linear-gradient(140deg, var(--brand,#0284c7), var(--indigo,#6366f1)); }

@media (max-width:480px) {
  .toni-panel { right:12px; left:12px; width:auto; bottom:84px; height:min(70vh, calc(100vh - 120px)); }
  .toni-fab { right:14px; bottom:14px; }
}