/* SC Interim Website — production stylesheet. */
@font-face{font-family:'Comfortaa';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/comfortaa-latin.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;src:url('/assets/fonts/jost-latin.woff2') format('woff2');}
@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/lato-300-latin.woff2') format('woff2');}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/lato-400-latin.woff2') format('woff2');}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/lato-700-latin.woff2') format('woff2');}

:root {
  --sc-ink: #0D1418; --sc-ink-2: #1A272E; --sc-charcoal: #333333;
  --sc-teal-900: #015E6C; --sc-teal-700: #017A8C; --sc-teal-500: #019FB6; --sc-teal-300: #7ACCD6; --sc-cyan: #00E9E6;
  --sc-mist: #E8F1F2; --sc-mist-2: #F3F6F7; --sc-mist-3: #F5F8F9; --sc-teal-tint: #E9F5F6;
  --sc-text-on-dark: #E8F1F2; --sc-text-on-dark-2: #C9D4D7; --sc-text-on-dark-3: #A9B6BA;
  --sc-text-on-light-2: #4A5A60; --sc-text-on-light-3: #3F4F55; --sc-text-on-light-4: #5B6B71; --sc-text-muted: #5B6B71;
  --sc-line-light: #C9D4D7; --sc-line-light-2: #E3EAEC;
  --sc-error: #B4462F; --sc-error-ink: #7A2E1E; --sc-error-body: #5B3A32; --sc-error-bg: #FBF1EE; --sc-error-line: rgba(180,70,47,0.35);
  --sc-font-display: 'Comfortaa', 'Nunito', 'Trebuchet MS', sans-serif;
  --sc-font-ui: 'Jost', 'Futura', 'Century Gothic', 'Segoe UI', sans-serif;
  --sc-font-body: 'Lato', 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  --sc-max: 1280px; --sc-gutter: clamp(20px, 5vw, 72px);
  --sc-radius-s: 10px; --sc-radius-m: 12px; --sc-radius-l: 14px; --sc-radius-xl: 16px; --sc-radius-panel: 28px; --sc-radius-pill: 999px;
  --sc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
html, body { margin: 0; padding: 0; background: var(--sc-ink); }
*, *::before, *::after { box-sizing: border-box; }
::selection { background: rgba(1,159,182,0.35); }
body { font-family: var(--sc-font-body); color: var(--sc-text-on-dark); -webkit-font-smoothing: antialiased; }
a { color: var(--sc-teal-300); } a:hover { color: var(--sc-cyan); }
img { display: block; }
picture { display: contents; } /* WebP <source> wrappers must not add a layout box */
button { font: inherit; }
:focus-visible { outline: 3px solid var(--sc-cyan); outline-offset: 3px; border-radius: 4px; }
.on-light :focus-visible, .on-light:focus-visible { outline-color: var(--sc-teal-700); }

.focus-demo { outline: 3px solid var(--sc-cyan) !important; outline-offset: 3px !important; } /* review-only: mimics :focus-visible for screenshots */
.on-light .focus-demo { outline-color: var(--sc-teal-700) !important; }
#main:focus, #why:focus, #solutions:focus, #contact:focus { outline: none; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 18px; background: var(--sc-cyan); color: var(--sc-ink); font-family: var(--sc-font-ui); font-weight: 500; border-radius: var(--sc-radius-s); text-decoration: none; }
.skip-link:focus { top: 16px; }

.page { min-height: 100vh; display: flex; flex-direction: column; background: var(--sc-ink); }
.wrap { max-width: var(--sc-max); width: 100%; margin: 0 auto; padding-left: var(--sc-gutter); padding-right: var(--sc-gutter); }

/* ---------- header ---------- */
.hdr { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 28px; }
.hdr__logo { height: clamp(64px, 6.6vw, 88px); width: auto; }
.hdr__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; font-family: var(--sc-font-ui); font-weight: 500; font-size: 15px; letter-spacing: 0.04em; border-radius: var(--sc-radius-s); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.btn--ghost { color: #FFFFFF; border: 1.5px solid rgba(255,255,255,0.55); background: transparent; }
.btn--ghost:hover { border-color: var(--sc-cyan); color: var(--sc-cyan); }
.btn--primary { padding: 0 20px; background: var(--sc-teal-700); color: #FFFFFF; border: none; }
.btn--primary:hover { background: var(--sc-teal-900); color: #FFFFFF; }
.lang { display: inline-flex; align-items: stretch; min-height: 44px; border: 1.5px solid rgba(255,255,255,0.35); border-radius: var(--sc-radius-s); overflow: hidden; }
.lang__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-family: var(--sc-font-ui); font-weight: 500; font-size: 13px; letter-spacing: 0.08em; border: none; background: transparent; color: #FFFFFF; text-decoration: none; cursor: pointer; }
.lang__btn:hover { color: #FFFFFF; }
.lang__btn[aria-current="page"] { background: rgba(255,255,255,0.92); color: var(--sc-ink); }
.lang__btn:focus-visible { outline-offset: -3px; }

/* TeamViewer split button: outlined like .btn--ghost; the dark menu keeps extensions in their own aligned column.
   The frame is an inset outline, not a border, so both halves keep the full 44px as their click target. */
.hdr { position: relative; z-index: 20; }
.tv-support { position: relative; }
.tv-support__split { display: flex; align-items: stretch; min-height: 44px; outline: 1.5px solid rgba(255,255,255,0.55); outline-offset: -1.5px; border-radius: var(--sc-radius-s); }
.tv-support__primary { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px 0 16px; font-family: var(--sc-font-ui); font-weight: 500; font-size: 15px; letter-spacing: 0.04em; color: #FFFFFF; text-decoration: none; white-space: nowrap; transition: color .2s; }
.tv-support__toggle { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; background: transparent; border: none; border-left: 1.5px solid rgba(255,255,255,0.55); border-radius: 0 var(--sc-radius-s) var(--sc-radius-s) 0; color: #FFFFFF; cursor: pointer; transition: color .2s, background .2s; }
.tv-support__toggle svg { transition: transform .2s; }
.tv-support__toggle[aria-expanded="true"] { background: rgba(255,255,255,0.08); }
.tv-support__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.tv-support__primary:hover, .tv-support__toggle:hover { color: var(--sc-cyan); }
html:not(.js) .tv-support__toggle { display: none; }
.tv-support__panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: max-content; min-width: min(300px, calc(100vw - 2 * var(--sc-gutter))); max-width: calc(100vw - 2 * var(--sc-gutter)); padding: 10px; background: var(--sc-ink); border: 1px solid rgba(196,211,216,0.28); border-radius: var(--sc-radius-m); box-shadow: 0 18px 48px rgba(0,0,0,0.5); }
.tv-support__panel--start { left: 0; right: auto; }
.tv-support__title { margin: 0; padding: 6px 12px 8px; font-family: var(--sc-font-ui); font-weight: 500; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-teal-300); }
.tv-support__menu { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; row-gap: 2px; }
.tv-support__item { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; min-height: 44px; padding: 6px 12px; border-radius: 8px; font-family: var(--sc-font-body); font-size: 15px; line-height: 1.35; color: var(--sc-text-on-dark); text-decoration: none; }
.tv-support__item:hover { background: rgba(1,159,182,0.18); color: #FFFFFF; }
.tv-support__item:focus-visible { outline-offset: -3px; }
.tv-support__ext { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 11px; letter-spacing: 0.02em; color: var(--sc-text-on-dark-3); white-space: nowrap; }
.tv-support__detected { margin-left: 0.5em; color: var(--sc-teal-300); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero__glow { position: absolute; inset: 0; background: radial-gradient(900px 480px at 62% 56%, rgba(1,159,182,0.22) 0%, rgba(1,159,182,0) 70%); pointer-events: none; }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-top: clamp(40px, 7vw, 96px); }
/* Connection card: in the text column directly under the intro; the mesh spans both rows and keeps its bottom on the grid's
   bottom edge, so the caption stays right below it. Without the card (no JS, no IP) the hero is the original single row. */
.hero__grid { grid-template-areas: "copy mesh" "card mesh"; row-gap: 28px; }
.hero__copy { grid-area: copy; align-self: end; }
.conn-card { grid-area: card; align-self: start; justify-self: start; }
.mesh { grid-area: mesh; align-self: end; }
.hero__grid:has(> .conn-card[hidden]), html:not(.js) .hero__grid { grid-template-areas: "copy mesh"; }
.hero__grid:has(> .conn-card[hidden]) > *, html:not(.js) .hero__grid > * { align-self: center; }
.hero__copy { display: flex; flex-direction: column; gap: 24px; max-width: 620px; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sc-font-ui); font-weight: 500; font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--sc-teal-300); }
.kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .9; }
.hero__title { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.14; letter-spacing: 0.01em; color: #FFFFFF; margin: 0; text-wrap: balance; }
.hero__lead { font-weight: 300; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; color: var(--sc-text-on-dark-2); margin: 0; max-width: 540px; }
.mesh { position: relative; height: clamp(300px, 36vw, 460px); margin: -30px calc(-1 * var(--sc-gutter)) 0 -40px; }
.mesh canvas { position: absolute; inset: 0; display: block; }
.hero__caption { display: flex; justify-content: flex-end; padding-bottom: clamp(48px, 6vw, 80px); }
.hero__caption-inner { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; text-align: right; max-width: 460px; margin-top: 4px; }
.hero__caption-text { margin: 0; font-weight: 300; font-size: 18px; line-height: 1.5; color: var(--sc-text-on-dark-2); text-wrap: balance; }
.link-kicker { display: inline-flex; min-height: 24px; align-items: center; gap: 8px; font-family: var(--sc-font-ui); font-weight: 500; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--sc-teal-300); text-decoration: none; }
.link-kicker::after { content: ""; width: 22px; height: 1px; background: currentColor; }
.link-kicker:hover { color: var(--sc-cyan); }

/* ---------- why ---------- */
.why { position: relative; background: #FFFFFF; color: var(--sc-charcoal); overflow: hidden; }
.why__mark { position: absolute; right: -120px; top: -40px; width: 520px; height: auto; opacity: 0.06; pointer-events: none; }
.why__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); align-items: start; padding-top: clamp(64px, 8vw, 128px); padding-bottom: clamp(64px, 8vw, 128px); }
.why .kicker { color: var(--sc-teal-700); margin-bottom: 18px; }
.why__title { font-family: var(--sc-font-ui); font-weight: 400; font-size: clamp(28px, 2.8vw, 36px); line-height: 1.25; letter-spacing: 0.02em; color: var(--sc-charcoal); margin: 0 0 24px 0; text-wrap: balance; }
.why__body { font-weight: 300; font-size: 19px; line-height: 1.65; color: var(--sc-text-on-light-2); max-width: 540px; margin: 0; }
.pillars { display: flex; flex-direction: column; gap: 32px; padding-top: 12px; margin: 0; list-style: none; padding-left: 0; }
.pillar { display: flex; gap: 20px; align-items: flex-start; }
.pillar__mark { flex: 0 0 auto; height: 38px; width: auto; }
.pillar__title { font-family: var(--sc-font-ui); font-weight: 500; font-size: 20px; letter-spacing: 0.02em; color: var(--sc-charcoal); margin: 0 0 6px 0; }
.pillar__body { font-size: 15.5px; line-height: 1.65; color: var(--sc-text-on-light-4); margin: 0; }

/* ---------- solutions ---------- */
/* Services bloom (owner reference CONFIG). assets/bloom.js overrides these from
   the validated runtime config; strength <= 0.40 and card opacity >= 0.60 keep
   card text contrast safe for the default blue only. */
.solutions {
  --bloom-enabled: 1; --bloom-color: #019FB6; --bloom-strength: 0.26; --bloom-width: 820px;
  --bloom-height: 500px; --bloom-x: 50%; --bloom-y: 57%; --card-opacity: 0.78;
  position: relative; isolation: isolate; background: #0D1418; padding-top: 80px; padding-bottom: 86px;
}
/* The glow sits under the content, so switching it off never touches the section background. */
.solutions::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse var(--bloom-width) var(--bloom-height) at var(--bloom-x) var(--bloom-y), var(--bloom-color), transparent); opacity: calc(var(--bloom-enabled) * var(--bloom-strength)); }
.solutions__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin-bottom: 30px; }
.solutions__title { font-family: var(--sc-font-display); font-weight: 400; font-size: 30px; line-height: 36px; color: #E8EEF0; margin: 0; text-wrap: balance; }
.solutions__kicker { margin-right: -0.3em; font-family: var(--sc-font-ui); font-weight: 500; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--sc-teal-300); }
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.svc { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 27px 23px 28px; background: rgba(36,54,64,var(--card-opacity)); border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; transition: border-color .25s; }
.svc__bar { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--sc-cyan); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.svc:hover { border-color: rgba(0,233,230,0.45); } .svc:hover .svc__bar { transform: scaleX(1); }
.svc__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 10px; background: rgba(1,159,182,0.14); color: var(--sc-teal-300); }
.svc__icon svg { width: 16px; height: 16px; }
.svc__title { font-family: var(--sc-font-display); font-weight: 400; font-size: 20px; line-height: 26px; color: #E8EEF0; margin: 10px 0 0; }
.svc__body { font-weight: 400; font-size: 15px; line-height: 1.6; color: var(--sc-text-on-dark-2); margin: 12px 0 0; text-wrap: pretty; }

/* ---------- zug panorama ---------- */
/* The media fills the band; only its text remains inside the centered frame. */
.zug { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; min-height: clamp(340px, 22vw, 480px); background: var(--sc-ink); }
.zug__image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 44% 80%; }
.zug__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(13,20,24,0.70) 0%, rgba(13,20,24,0.62) 45%, rgba(13,20,24,0.16) 100%); }
.zug__content { padding-top: 56px; padding-bottom: 56px; }
.zug__copy { max-width: 640px; }
.zug .kicker { margin: 0 0 14px 0; color: var(--sc-cyan); }
.zug__title { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.25; color: #FFFFFF; margin: 0 0 12px 0; text-wrap: balance; }
.zug__sub { margin: 0; font-weight: 300; font-size: 17px; line-height: 1.6; color: var(--sc-text-on-dark); }


/* ---------- contact ---------- */
.contact { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; background: var(--sc-ink); overflow: hidden; }
.rail { position: relative; overflow: hidden; color: var(--sc-text-on-dark); padding: clamp(56px, 7vw, 104px) var(--sc-gutter); }
.rail__glow { position: absolute; inset: 0; background: radial-gradient(760px 620px at 62% 42%, rgba(1,159,182,0.28) 0%, rgba(1,159,182,0) 70%); pointer-events: none; }
.rail__inner { position: relative; display: flex; flex-direction: column; gap: 22px; max-width: 560px; margin-left: auto; }
.rail__title { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.16; color: #FFFFFF; margin: 0; text-wrap: balance; }
.rail__lead { font-weight: 300; font-size: 18px; line-height: 1.6; color: var(--sc-text-on-dark-2); margin: 0 0 20px 0; max-width: 480px; }
.rail__signature { display: grid; gap: 20px; margin-top: 16px; max-width: 480px; }
.rail__signature img { height: 56px; width: auto; max-width: 100%; }
.rail__signature p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--sc-text-on-dark-2); }
.channels { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.channel { display: flex; align-items: center; gap: 18px; min-height: 84px; padding: 16px 0; border-top: 1px solid rgba(196,211,216,0.16); text-decoration: none; color: inherit; transition: padding-left .2s var(--sc-ease); }
.channels li:last-child .channel { border-bottom: 1px solid rgba(196,211,216,0.16); }
.channel:hover { padding-left: 6px; }
.channel__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 48px; width: 48px; height: 48px; border: 1px solid rgba(196,211,216,0.3); border-radius: var(--sc-radius-m); color: var(--sc-teal-300); }
.channel__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.channel__label { font-family: var(--sc-font-ui); font-weight: 500; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-teal-300); white-space: nowrap; }
.channel__value { font-size: 18px; color: #FFFFFF; overflow-wrap: anywhere; }
.channel__arrow { margin-left: auto; flex: 0 0 auto; color: var(--sc-text-on-light-4); }

.panel { position: relative; z-index: 1; background: #FFFFFF; color: var(--sc-charcoal); padding: clamp(56px, 7vw, 104px) var(--sc-gutter); border-radius: 0; box-shadow: -24px 0 64px rgba(0,0,0,0.35); }
.form { display: flex; flex-direction: column; gap: 24px; max-width: 640px; }
.form__title { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(26px, 2.6vw, 34px); color: var(--sc-charcoal); margin: 0; }
.form__required { font-size: 14px; color: var(--sc-text-muted); margin: -10px 0 0; }
.req { color: var(--sc-error); }
.opt { font-weight: 400; color: var(--sc-text-muted); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.label { font-family: var(--sc-font-ui); font-weight: 500; font-size: 15px; letter-spacing: 0.03em; color: var(--sc-charcoal); }
.input, .textarea { width: 100%; font-family: var(--sc-font-body); font-size: 16px; color: var(--sc-charcoal); border: 1px solid #8A989E; border-radius: var(--sc-radius-s); background: #FFFFFF; outline: none; transition: border-color .2s, box-shadow .2s; }
.input { min-height: 56px; padding: 0 18px; }
.textarea { padding: 14px 18px; line-height: 1.6; resize: vertical; min-height: 172px; }
.input:focus, .textarea:focus { border-color: var(--sc-teal-500); box-shadow: 0 0 0 3px rgba(1,159,182,0.18); outline: none; }
.input:focus-visible, .textarea:focus-visible { outline: 3px solid var(--sc-teal-700); outline-offset: 2px; box-shadow: none; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--sc-error); }
.input:disabled, .textarea:disabled { background: var(--sc-mist-2); color: var(--sc-text-muted); }
.field-error { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--sc-error); }
.field-error:empty { display: none; }
.fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.legend { padding: 0; margin: 0 0 12px 0; }
.topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.topic { position: relative; display: flex; }
.topic input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.topic span { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 0 16px; border-radius: var(--sc-radius-pill); font-size: 15px; background: #FFFFFF; border: 1px solid var(--sc-line-light); color: var(--sc-charcoal); cursor: pointer; text-align: center; transition: border-color .2s, background .2s, color .2s; }
.topic span:hover { border-color: var(--sc-teal-500); }
.topic input:checked + span { background: var(--sc-teal-700); border-color: var(--sc-teal-700); color: #FFFFFF; }
.topic input:focus-visible + span { outline: 3px solid var(--sc-teal-700); outline-offset: 3px; }
.notice { margin: 0; font-size: 15px; line-height: 1.6; color: var(--sc-text-on-light-3); background: var(--sc-mist-2); border-radius: var(--sc-radius-s); padding: 16px 20px; }
.consent { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; }
.consent input { width: 22px; height: 22px; margin: 2px 0 0 0; accent-color: var(--sc-teal-700); flex: 0 0 auto; }
.consent__text { font-size: 15px; line-height: 1.6; color: var(--sc-text-on-light-3); }
.consent__text a { color: var(--sc-teal-700); text-decoration: underline; text-underline-offset: 2px; } .consent__text a:hover { color: var(--sc-teal-900); }
.consent.is-invalid .consent__text { color: var(--sc-error); }
.consent + .field-error { margin-top: -12px; }
.alert { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--sc-error-line); border-radius: var(--sc-radius-m); background: var(--sc-error-bg); }
.alert svg { flex: 0 0 auto; color: var(--sc-error); margin-top: 1px; }
.alert__title { font-family: var(--sc-font-ui); font-weight: 500; font-size: 15.5px; color: var(--sc-error-ink); display: block; }
.alert__body { font-size: 14.5px; line-height: 1.6; color: var(--sc-error-body); display: block; margin-top: 4px; }
.alert__body a { color: var(--sc-error); text-decoration: underline; text-underline-offset: 2px; }
.alert__list { margin: 8px 0 0 0; padding-left: 18px; font-size: 14.5px; line-height: 1.6; color: var(--sc-error-body); }
.alert__list a { color: var(--sc-error-ink); }
.alert--info { border-color: rgba(1,122,140,0.3); background: var(--sc-teal-tint); }
.alert--info svg { color: var(--sc-teal-700); } .alert--info .alert__title { color: var(--sc-teal-900); } .alert--info .alert__body { color: var(--sc-text-on-light-3); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.js noscript { display: none; }
.submit-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 4px; }
.turnstile { width: 300px; height: 65px; flex: 0 0 auto; border: 1px dashed var(--sc-line-light); border-radius: 6px; background: repeating-linear-gradient(-45deg, var(--sc-mist-3) 0 8px, #FFFFFF 8px 18px); display: flex; align-items: center; justify-content: center; gap: 8px; font-family: ui-monospace, monospace; font-size: 11px; color: var(--sc-text-muted); }
.turnstile[data-state="verified"] { border-style: solid; border-color: transparent; background: transparent; color: var(--sc-teal-900); }
.turnstile[data-state="error"], .turnstile[data-state="expired"] { border-style: solid; border-color: var(--sc-error); background: var(--sc-error-bg); color: var(--sc-error-ink); }
.submit { flex: 1 1 auto; min-height: 56px; padding: 0 36px; font-size: 17px; gap: 12px; }
.submit:hover { background: var(--sc-teal-900); }
.submit:disabled { opacity: 0.7; cursor: progress; }
.submit__spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #FFFFFF; border-radius: 50%; animation: sc-spin .8s linear infinite; }
@keyframes sc-spin { to { transform: rotate(360deg); } }
.success { display: flex; flex-direction: column; gap: 22px; max-width: 640px; min-height: 480px; justify-content: center; }
.success__mark { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--sc-teal-tint); color: var(--sc-teal-700); }
.success__title { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; color: var(--sc-charcoal); margin: 0; text-wrap: balance; }
.success__body { font-size: 17px; line-height: 1.65; color: var(--sc-text-on-light-2); margin: 0; max-width: 520px; }
.success__body strong { font-weight: 700; color: var(--sc-charcoal); }
.success__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.btn--outline-light { min-height: 48px; padding: 0 22px; background: #FFFFFF; color: var(--sc-charcoal); border: 1px solid var(--sc-line-light); }
.btn--outline-light:hover { border-color: var(--sc-teal-700); color: var(--sc-teal-700); }
.btn--text { min-height: 48px; padding: 0 22px; color: var(--sc-teal-700); background: transparent; border: none; } .btn--text:hover { color: var(--sc-teal-900); }

/* ---------- footer ---------- */
/* Guest terminal over the Zuger Altstadt linework, legal bar last (corporate shell.css 5a pattern). */
.site-ftr { position: relative; padding-top: clamp(40px, 5vw, 64px); background: var(--sc-charcoal); border-top: 1px solid rgba(201,212,215,0.15); }
html:not(.js) .term, html:not(.js) .ftr-art__layer, html:not(.js) .ftr-art__canvas { display: none; }
.term { position: relative; z-index: 1; width: auto; max-width: 1296px; margin: 0 clamp(20px, 16.667vw, 240px); background: var(--sc-ink); border: 1px solid rgba(0,233,230,0.18); border-radius: var(--sc-radius-l); overflow: hidden; box-shadow: 0 18px 56px rgba(13,20,24,0.55); color: #C9D4D7; font-family: monospace; }
.term__bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,0.07); color: #8FA0A6; font-size: 13px; line-height: 18px; }
.term__dots { color: rgba(196,211,216,0.25); letter-spacing: 4px; } .term__dots b { color: rgba(0,233,230,0.5); }
.term__title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term__out { height: 280px; overflow-y: auto; scrollbar-width: none; padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 20px; white-space: pre-wrap; }
.term__out::-webkit-scrollbar { display: none; }
.term__out > div { overflow-wrap: anywhere; }
.term__out > div:empty::before { content: "\200B"; } /* blank transcript lines keep one line of height */
.term__out:focus-visible { outline-offset: -3px; }
.term__brand { margin: 0 0 6px 0; max-width: 100%; overflow: hidden; white-space: pre; font: 700 7px/1.05 ui-monospace, monospace; color: #00C2C6; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .term__brand { background: linear-gradient(60deg, #017A8C 0%, #00C2C6 50%, #00E9E6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
}
/* Corporate line colours; #5B6B71 "dim" is lifted to #738489 for AA contrast on the ink surface. */
.term__line--text { color: #C9D4D7; } .term__line--cmd { color: var(--sc-teal-300); } .term__line--muted { color: #8FA0A6; } .term__line--dim { color: #738489; }
.term__line--accent { color: var(--sc-cyan); } .term__line--warn { color: #B4998A; } .term__line--danger { color: #FF5C6C; } .term__line--gold { color: #F4C15D; }
.term__prompt { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 12px 18px; border-top: 1px solid rgba(255,255,255,0.07); cursor: text; }
/* Focus stays local to the prompt: the corporate block cursor and subtle PS1 glow, without a full-width ring or underline. */
.term__ps1 { flex: none; color: var(--sc-cyan); font-size: 13px; line-height: 18px; white-space: nowrap; }
.term__prompt:focus-within .term__ps1 { text-shadow: 0 0 8px rgba(0,233,230,0.6); }
/* Command entry: ghost demo text and a resting block cursor sit over the input at the measured caret position. */
.term__entry { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.term__input { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 18px; padding: 0 9px 0 0; background: transparent; border: 0; color: #E8F1F2; font: 14.5px/18px monospace; caret-color: transparent; }
.term__input:focus, .term__input:focus-visible { outline: none; }
.term__ghost { position: absolute; top: 0; bottom: 0; left: 0; display: flex; align-items: center; color: #E8F1F2; font: 14.5px/18px monospace; white-space: pre; pointer-events: none; }
.term__cursor { position: absolute; top: 50%; left: 0; width: 9px; height: 18px; margin-top: -9px; overflow: hidden; background: var(--sc-cyan); color: var(--sc-ink); font: normal 14.5px/18px monospace; text-align: center; pointer-events: none; animation: term-blink 1.06s steps(1) infinite; }
/* The block cursor stays visible at the measured selection point while focused, as on corporate. */
.term__entry:focus-within .term__cursor { box-shadow: 0 0 8px rgba(0,233,230,.55); }
@media (forced-colors: active) { .term__entry:focus-within .term__cursor { outline: 2px solid Highlight; outline-offset: -2px; } }
@keyframes term-blink { 50% { opacity: 0; } }
.term__measure { position: fixed; top: 0; left: 0; visibility: hidden; white-space: pre; pointer-events: none; }
.term__chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 20px 16px; }
.term__chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.term__chip-list button { min-height: 36px; padding: 6px 14px; color: var(--sc-teal-300); background: transparent; border: 1px solid rgba(0,233,230,0.3); border-radius: var(--sc-radius-pill); cursor: pointer; font: 13px/18px monospace; transition: color .2s, border-color .2s; }
.term__chip-list button:hover { color: var(--sc-cyan); border-color: var(--sc-cyan); }
.term__hint { margin-left: 6px; color: #8FA0A6; font-size: 12.5px; line-height: 18px; }
.ftr-art { position: relative; z-index: 2; margin-top: clamp(24px, 4vw, 48px); }
.ftr-art__img { width: 100%; height: auto; opacity: 0.85; }
/* Constellation canvas (altstadt.js): dots sampled from the artwork's alpha light up around the pointer or keyboard-focused landmark. */
.ftr-art__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.ftr-art__layer { position: absolute; inset: 0; }
/* Hit areas stay invisible at rest and on hover; only keyboard focus draws a ring. */
.ftr-art__spot, .ftr-art__spot:hover { position: absolute; margin: 0; padding: 0; appearance: none; border: 0; border-radius: 2px; background: transparent; color: transparent; cursor: pointer; }
.ftr-art__spot:not(:focus-visible) { outline: 0; box-shadow: none; }
.ftr-art__spot:focus-visible { outline: 2px solid var(--sc-cyan); outline-offset: -2px; }
.ftr-art__card { position: absolute; z-index: 4; width: 300px; padding: 18px 20px 15px; border: 1px solid rgba(0,233,230,0.28); border-radius: var(--sc-radius-m); background: rgba(13,20,24,0.94); backdrop-filter: blur(8px); opacity: 0; transform: translateY(14px) scale(0.96); transition: opacity .5s ease, transform .6s cubic-bezier(0.22, 1, 0.36, 1); }
.ftr-art__card[data-state="visible"] { opacity: 1; transform: none; }
.ftr-art__kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 8px 0; color: var(--sc-cyan); font-family: var(--sc-font-ui); font-size: 11.5px; font-weight: 500; letter-spacing: 0.26em; line-height: 1.25; text-transform: uppercase; }
.ftr-art__kicker span:first-child { flex: 0 0 22px; width: 22px; height: 1px; background: var(--sc-cyan); }
.ftr-art__title { margin: 0 0 8px 0; color: #FFFFFF; font-family: var(--sc-font-display); font-size: 18px; font-weight: 700; line-height: 1.25; }
.ftr-art__text { margin: 0; color: #C9D4D7; font-size: 13.5px; line-height: 1.55; }
.ftr { border-top: 1px solid rgba(201,212,215,0.15); padding-top: 20px; padding-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; }
.ftr__copy { color: var(--sc-text-on-dark-3); }
.ftr__links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ftr__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sc-text-on-dark-2); text-decoration: none; } .ftr__links a:hover { color: #FFFFFF; }
.ftr__links a[aria-current="page"] { color: #FFFFFF; }

/* ---------- privacy (/de/datenschutz/, /en/privacy/), terms (/de/agb/, /en/gtc/) and imprint pages ---------- */
.legal { flex: 1 0 auto; background: var(--sc-mist-3); color: var(--sc-text-on-light-3); }
.legal__wrap { max-width: 1024px; background: #FFFFFF; padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(56px, 8vw, 96px); display: flex; flex-direction: column; gap: 20px; }
/* One-word German titles ("Datenschutzerklärung") are wider than a 320px screen at the approved size: hyphenate where the browser can, otherwise break inside the content box. */
.legal__title { margin: 0; font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.25; color: var(--sc-ink); overflow-wrap: anywhere; hyphens: auto; }
.legal__status { margin: 0; font-size: 15px; line-height: 1.6; color: var(--sc-text-muted); }
.legal__doc { font-size: 16px; line-height: 1.65; color: var(--sc-text-on-light-3); }
.legal__doc a { color: var(--sc-teal-700); } .legal__doc a:hover { color: var(--sc-teal-900); }
.site-ftr--legal { padding-top: 0; }
/* Terms: the owner's document on the same white reading surface, at a readable measure. */
.terms { max-width: 76ch; font-size: 16px; line-height: 1.65; color: var(--sc-text-on-light-3); overflow-wrap: break-word; hyphens: auto; }
.terms .legal__title { margin-bottom: 12px; }
.terms__intro { margin: 0 0 6px 0; font-size: 15px; color: var(--sc-text-muted); }
.terms__section { margin-top: clamp(28px, 4vw, 40px); }
.terms__heading { margin: 0 0 12px 0; font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(19px, 2.2vw, 22px); line-height: 1.35; color: var(--sc-ink); scroll-margin-top: 24px; }
.terms__clause { margin: 0 0 12px 0; scroll-margin-top: 24px; }
.terms__num { font-weight: 700; color: var(--sc-teal-700); font-variant-numeric: tabular-nums; }
.terms__rule { margin: clamp(32px, 5vw, 48px) 0 16px 0; border: 0; border-top: 1px solid var(--sc-line-light); }
.terms__outro { margin: 0; font-size: 14px; color: var(--sc-text-muted); }
/* Imprint (/de/impressum/, /en/imprint/): title, date line, then the owner's fact blocks. */
.imprint { max-width: 60ch; font-size: 16px; line-height: 1.65; color: var(--sc-text-on-light-3); overflow-wrap: break-word; }
.imprint .legal__title { margin-bottom: 12px; }
.imprint__updated { margin: 0; font-size: 15px; color: var(--sc-text-muted); }
.imprint__block { margin: clamp(20px, 3vw, 28px) 0 0 0; }
.imprint a { color: var(--sc-teal-700); text-decoration: underline; text-underline-offset: 2px; } .imprint a:hover { color: var(--sc-teal-900); }
/* The e-mail link stays inline in its line but is a 44px touch target (same pattern as the footer links). */
.imprint a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
@media print {
  .hdr, .site-ftr, .skip-link { display: none; }
  .legal, .legal__wrap { background: #FFFFFF; padding: 0; }
  .terms, .imprint { max-width: none; font-size: 11pt; color: #000000; }
  .terms__heading { break-after: avoid; }
  .terms__clause { break-inside: avoid; }
}

/* ---------- responsive (container queries; production = @media, see RESPONSIVE-SPEC) ---------- */
@media (min-width: 1600px) { .term { margin-left: auto; margin-right: auto; } }
@media (max-width: 1023px) { .term { margin-left: 20px; margin-right: 20px; } }
@media (max-width: 1024px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  /* Header: logo and DE/EN share the first row; remote support and contact split the second row 50/50. */
  .hdr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 16px; }
  .hdr > a:first-child { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
  .hdr__logo { height: clamp(48px, 15vw, 64px); }
  .hdr__actions { display: contents; }
  .hdr__actions .lang { grid-column: 2; grid-row: 1; justify-self: end; }
  .hdr__actions .tv-support { grid-column: 1; grid-row: 2; min-width: 0; }
  .hdr__actions .btn { grid-column: 2; grid-row: 2; width: 100%; min-width: 0; padding: 0 10px; }
  .hdr__actions .btn, .tv-support__primary { font-size: clamp(13px, 3.6vw, 15px); line-height: 1.15; text-align: center; white-space: normal; overflow-wrap: anywhere; }
  .tv-support__primary { min-width: 0; padding: 0 10px; gap: 6px; }
  .tv-support__primary svg { flex: 0 0 auto; }
  .tv-support__menu { column-gap: 12px; }
  .hero__grid, .why__grid, .contact { grid-template-columns: minmax(0, 1fr); }
  .hero__grid { gap: 8px; }
  /* Narrow phones: the heading steps down just enough that its longest word ("Ansprechpartner.") fits the column whole. */
  .hero__title { font-size: min(34px, calc((100vw - 2 * var(--sc-gutter)) / 10)); }
  /* Hero: intro → mesh → connection card → caption. */
  .hero__grid { grid-template-areas: "copy" "mesh" "card"; }
  .hero__grid:has(> .conn-card[hidden]), html:not(.js) .hero__grid { grid-template-areas: "copy" "mesh"; }
  .conn-card { justify-self: stretch; margin: 8px 0 20px; }
  .mesh { margin: 0 calc(-1 * var(--sc-gutter)); height: clamp(240px, 60vw, 360px); }
  .hero__caption { justify-content: flex-start; } .hero__caption-inner { align-items: flex-start; text-align: left; }
  .rail__inner { margin-left: 0; }
  .panel { box-shadow: none; }
}
@media (max-width: 640px) {
  .zug { min-height: 300px; }
  .zug__scrim { background: linear-gradient(180deg, rgba(13,20,24,0.66) 0%, rgba(13,20,24,0.84) 100%); }
  .zug__content { padding-top: 44px; padding-bottom: 44px; }
  .zug__title { font-size: 22px; line-height: 1.3; }
  .zug__sub { font-size: 16px; }
  .term { margin-left: 12px; margin-right: 12px; }
  .term__hint { width: 100%; margin-left: 0; }
  .term__chip-list button { min-height: 44px; }
  .ftr-art { margin-bottom: var(--fact-card-space, 0px); }
  .hero__grid { padding-top: 32px; }
  .mesh { height: 240px; }
  .why__grid { gap: 36px; }
  .solutions { padding-top: 64px; padding-bottom: 72px; }
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .topics { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .submit-row { flex-direction: column; align-items: stretch; } .turnstile { width: 100%; }
}
@media (max-width: 560px) { .fields { grid-template-columns: minmax(0, 1fr); } }
/* Narrow phones keep the 50/50 action row: the remote-support icon gives way so "Fernwartung" fits beside the 44px toggle. */
@media (max-width: 420px) {
  .hdr__actions .btn, .tv-support__primary { letter-spacing: 0.02em; }
  .tv-support__primary { padding: 0 8px; }
  .tv-support__primary svg { display: none; }
}
@media (max-width: 360px) {
  .hdr__actions .btn, .tv-support__primary { padding: 0 6px; font-size: 12.5px; letter-spacing: 0; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; } .term__cursor { animation: none; } }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
.reduce-motion .term__cursor { animation: none; }
html { scroll-behavior: smooth; }