/* ==========================================================================
   Kessersoft — Leitidee: die Werkstatt-Diagnose, nicht die Vertriebsfolie.
   Jedes Produktfragment ([data-ui]) sieht aus wie ein Messgerät: stumpfes
   Papierweiß außen, ein Steuertafel-Blau nur innerhalb der Produktflächen.
   Inter für Fließtext und Überschriften, IBM Plex Mono für Gerätedaten,
   Protokoll-Codes und alles, was ein Techniker im Saal abliest.
   ========================================================================== */

:root {
  --ink: #11181c;
  --bg: #ffffff;
  --surface: #f1f4f3;
  --surface-2: #e4e9e7;
  --line: #d7dedb;
  --muted: #5c6b67;
  --faint: #8d9894;
  --accent: #0d6e8f;
  --accent-dk: #0a5570;
  --accent-ink: #ffffff;
  --accent-wash: #e8f2f5;
  --ok: #1f7a4d;
  --ok-wash: #e1f0e6;
  --warn: #a8631c;
  --warn-wash: #f5e9d9;
  --bad: #b23b2e;
  --bad-wash: #f8e4e1;
  --dark: #0c1316;
  --dark-2: #182125;

  --font: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --step-small: 0.8125rem;
  --step-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(1.875rem, 1.3rem + 2.6vw, 3.5rem);
  --step-display: clamp(2.125rem, 1.3rem + 2.4vw, 3rem);

  --margin: clamp(18px, 2.4vw, 40px);
  --gutter: clamp(12px, 1.6vw, 24px);
  --section: clamp(88px, 10vw, 148px);
  --radius: 6px;
  --radius-sm: 3px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t: 160ms ease;
  --cols: 12;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.ks-locked { overflow: hidden; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--font);
  font-size: var(--step-body); line-height: 1.55; letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}
h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; }
p { max-width: 62ch; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
ul, ol { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: #fff; }
[hidden] { display: none !important; }
.ks-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ks-skip { position: absolute; left: 0; top: -60px; z-index: 5000; padding: 10px 18px; color: #fff; background: var(--ink); border-radius: 0 0 6px 0; }
.ks-skip:focus { top: 0; }
.ks-wrap { max-width: 1240px; margin-inline: auto; padding-left: var(--margin); padding-right: var(--margin); }
.ks-mono { font-family: var(--mono); }

/* ---------- Schaltflächen ---------- */
.ks-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 20px; border: 0; border-radius: var(--radius-sm);
  background: var(--ink); color: #fff; font-weight: 600; font-size: 15px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--t), transform var(--t), color var(--t), border-color var(--t);
}
.ks-btn svg { transition: transform var(--t); }
.ks-btn:hover svg { transform: translateX(3px); }
.ks-btn:active { transform: translateY(1px); }
.ks-btn--accent { background: var(--accent); }
.ks-btn--accent:hover { background: var(--accent-dk); }
.ks-btn--line { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.ks-btn--line:hover { border-color: var(--ink); }
.ks-btn--sm { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
.ks-btn--block { width: 100%; }
.ks-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.ks-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; transition: color var(--t), border-color var(--t); }
.ks-link:hover { color: var(--accent-dk); border-color: var(--accent-dk); }

/* ---------- Cookie-Hinweis ---------- */
.ks-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2500; background: var(--dark); color: #cfd6d4; padding-bottom: env(safe-area-inset-bottom, 0px); }
.ks-consent__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 18px var(--margin); }
.ks-consent__txt { flex: 1 1 420px; font-size: var(--step-small); max-width: 62ch; }
.ks-consent__txt a { color: #fff; }
.ks-consent__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.ks-consent__ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1.5px solid #3a4549; border-radius: var(--radius-sm); background: transparent; color: #fff; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: border-color var(--t); }
.ks-consent__ghost:hover { border-color: #6a7a7e; }
@media (max-width: 640px) { .ks-consent__in { flex-direction: column; align-items: stretch; } .ks-consent__btns > * { flex: 1; } }

/* ---------- Kopfleiste ---------- */
.ks-bar { position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--t); }
.ks-bar.is-scrolled { border-bottom-color: var(--line); }
.ks-bar__in { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.ks-word { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 19px; letter-spacing: -0.02em; text-decoration: none; color: var(--ink); }
.ks-word__mark { width: 26px; height: 26px; flex-shrink: 0; }
.ks-bar__links { display: flex; gap: 26px; margin-left: auto; }
.ks-bar__links a { font-size: 15px; text-decoration: none; padding: 6px 0; transition: color var(--t); }
.ks-bar__links a:hover { color: var(--accent-dk); }
.ks-bar .ks-btn { min-height: 40px; }
@media (max-width: 880px) { .ks-bar__links { display: none; } }

/* ---------- Produktfragmente: die Steuertafel ---------- */
[data-ui] {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 14px; line-height: 1.4; letter-spacing: 0; overflow: hidden; min-width: 0;
  box-shadow: 0 1px 0 rgba(17,24,28,.02); /* taste-skill-ignore: flat product panel edge, not a floating card */
}
.ks-ui-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.ks-ui-head b { font-weight: 600; }
.ks-ui-head span { color: var(--muted); font-size: 12.5px; }
.ks-ui-body { padding: 14px 16px; }
.ks-ui-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 16px; background: var(--surface); border-top: 1px solid var(--line); }
.ks-ui-foot > * { min-width: 0; }
.ks-ui-foot .ks-pill { flex: none; }
.ks-check__txt { flex: 1 1 180px; color: var(--muted); line-height: 1.4; }
.ks-rows { width: 100%; border-collapse: collapse; }
.ks-rows td { padding: 6px 0; border-bottom: 1px solid var(--surface-2); font-family: var(--mono); font-size: 13px; }
.ks-rows td:first-child { font-family: var(--font); color: var(--muted); font-size: 13.5px; }
.ks-rows td:last-child { text-align: right; }
.ks-rows tr.ks-sum td { border-bottom: 0; font-weight: 600; padding-top: 10px; }
.ks-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--surface-2); }
.ks-pill.is-ok { background: var(--ok-wash); color: var(--ok); }
.ks-pill.is-warn { background: var(--warn-wash); color: var(--warn); }
.ks-pill.is-bad { background: var(--bad-wash); color: var(--bad); }
.ks-diff { font-family: var(--mono); font-weight: 600; }
.ks-diff.is-ok { color: var(--ok); }
.ks-diff.is-bad { color: var(--bad); }
.ks-code { font-family: var(--mono); font-size: 13px; letter-spacing: 0.01em; }
.ks-field-row { display: grid; grid-template-columns: 1fr; gap: 5px; margin-bottom: 12px; }
.ks-field-row:last-child { margin-bottom: 0; }
.ks-field-row label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ks-field-row select, .ks-field-row input {
  height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; /* taste-skill-ignore: real select/input inside product panel */
  font-size: 14.5px; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2311181c' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.ks-field-row select:focus, .ks-field-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.ks-ui-btn { padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; cursor: pointer; font-weight: 600; font-size: 13.5px; transition: background-color var(--t), transform var(--t); }
.ks-ui-btn:hover { background: var(--surface-2); }
.ks-ui-btn:active { transform: scale(0.97); }
.ks-ui-btn.is-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.ks-ui-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.ks-ui-status { font-size: 13px; margin-left: auto; }
.ks-ui-status.is-ok { color: var(--ok); }
.ks-count-input { width: 9.5em; text-align: right; font-family: var(--mono); padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; } /* taste-skill-ignore: inline editable amount */
.ks-count-input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }

/* ---------- Abschnitte / Raster ---------- */
section[id] { scroll-margin-top: 84px; }
.ks-sec { padding-block: var(--section); }
.ks-sec--tint { background: var(--surface); }
.ks-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0,1fr)); column-gap: var(--gutter); }
.ks-head { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--cols), minmax(0,1fr)); column-gap: var(--gutter); align-items: end; margin-bottom: 48px; }
.ks-head h2 { grid-column: span 7; font-size: var(--step-head); }
.ks-head p { grid-column: span 5; color: var(--muted); font-size: var(--step-body); padding-bottom: 4px; }
.ks-eyebrow { display: block; font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--accent-dk); margin-bottom: 14px; }
.ks-reveal { transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.ks-reveal.is-in { opacity: 1; transform: none; }
.ks-reveal--1 { transition-delay: .07s; }
.ks-reveal--2 { transition-delay: .14s; }
.ks-reveal--3 { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) { .ks-reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---------- Hero ---------- */
.ks-hero { padding-block: clamp(56px, 8vw, 96px) var(--section); }
.ks-hero__grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0,1fr)); column-gap: var(--gutter); align-items: start; }
.ks-hero__col { grid-column: 1 / span 6; }
.ks-hero h1 { font-size: var(--step-display); }
.ks-hero h1 em { display: block; font-style: normal; color: var(--accent-dk); }
.ks-hero__lead { margin-top: 24px; font-size: var(--step-lead); color: var(--muted); max-width: 42ch; }
.ks-hero__cta { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 32px; }
.ks-hero__facts { display: flex; flex-direction: column; gap: 12px; margin-top: 44px; max-width: 46ch; }
.ks-hero__facts li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; }
.ks-hero__facts li::before { content: ''; flex: none; width: 7px; height: 7px; margin-top: 2px; border-radius: 50%; background: var(--accent); }
.ks-hero__widget { grid-column: 8 / span 5; }
.ks-hero__widget .ks-ui-foot { min-height: 54px; }
@media (max-width: 1080px) {
  .ks-hero__col { grid-column: 1 / -1; }
  .ks-hero__widget { grid-column: 1 / -1; margin-top: 48px; max-width: 480px; }
}
@media (max-width: 640px) {
  .ks-hero { padding-block: 40px 64px; }
}

/* ---------- Standorte: Reiterkarten ---------- */
.ks-sites-wrap { grid-column: 1 / -1; max-width: 760px; }
.ks-site-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.ks-site-tabs button { padding: 8px 14px; border: 1px solid var(--line); border-radius: 99px; background: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background-color var(--t), color var(--t), border-color var(--t); } /* taste-skill-ignore: real tab control */
.ks-site-tabs button:hover { border-color: var(--accent); }
.ks-site-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.ks-site-stat { display: flex; flex-direction: column; gap: 2px; }
.ks-site-stat strong { font-family: var(--mono); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.ks-site-stat span { font-size: 12.5px; color: var(--muted); }
.ks-site-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 16px; }
.ks-site-mix { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 560px) { .ks-site-stats { grid-template-columns: repeat(2, 1fr); row-gap: 16px; } }

/* ---------- Funktionen: Modulraster ---------- */
.ks-modules { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ks-module { background: #fff; padding: 28px 28px 30px; display: flex; flex-direction: column; gap: 10px; }
.ks-module__tag { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em; color: var(--accent-dk); }
.ks-module h3 { font-size: 20px; letter-spacing: -0.01em; }
.ks-module p { color: var(--muted); font-size: 14.5px; }
.ks-module:nth-last-child(1):nth-child(odd) { grid-column: 1 / -1; }
.ks-module:nth-last-child(1):nth-child(odd) p { max-width: 62ch; }
@media (max-width: 760px) {
  .ks-modules { grid-template-columns: 1fr; }
  .ks-module:nth-last-child(1):nth-child(odd) { grid-column: auto; }
}

/* ---------- Ablauf: Übernahme in vier Wochen ---------- */
.ks-flow { margin-top: 0; }
.ks-flow__wrap { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ks-flow__col { background: #fff; padding: 26px 24px 30px; display: flex; flex-direction: column; gap: 18px; }
.ks-flow__col:nth-child(4) { background: var(--dark); color: #cfd6d4; }
.ks-flow__col:nth-child(4) [data-ui] { background: var(--dark-2); border-color: #2a3539; }
.ks-flow__col:nth-child(4) .ks-ui-head, .ks-flow__col:nth-child(4) .ks-ui-foot { background: #121a1d; border-color: #2a3539; }
.ks-flow__col:nth-child(4) .ks-rows td:first-child { color: #9fb0ad; }
.ks-flow__week { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--accent-dk); }
.ks-flow__col:nth-child(4) .ks-flow__week { color: #6fb7cd; }
.ks-flow__clause { font-size: 17px; line-height: 1.35; max-width: 22ch; }
@media (max-width: 920px) {
  .ks-flow__wrap { grid-template-columns: 1fr; }
}

/* ---------- Tagesabschluss / Konzern-Rollup ---------- */
.ks-rollup-wrap { grid-column: 1 / -1; max-width: 760px; }
.ks-rollup .ks-ui-body { padding: 0; overflow-x: auto; }
.ks-rollup table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ks-rollup th, .ks-rollup td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--surface-2); } /* taste-skill-ignore: real data table */
.ks-rollup thead th { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--surface); border-bottom: 1px solid var(--line); }
.ks-rollup td:not(:first-child), .ks-rollup th:not(:first-child) { text-align: right; font-family: var(--mono); }
.ks-rollup tfoot td { font-weight: 700; border-bottom: 0; padding-top: 14px; }
.ks-rollup tr.is-active td { background: var(--accent-wash); }
.ks-rollup__reason { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; width: 100%; }
.ks-rollup__reason select { flex: 1 1 220px; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; font-size: 13.5px; } /* taste-skill-ignore: reason dropdown */

/* ---------- Protokoll ---------- */
.ks-log-wrap { grid-column: 1 / -1; }
.ks-log { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ks-log th { text-align: left; font-weight: 500; color: var(--muted); font-size: var(--step-small); padding: 0 16px 12px; font-family: var(--mono); }
.ks-log td { padding: 14px 16px; vertical-align: top; border-bottom: 1px solid var(--surface-2); }
.ks-log td:first-child { white-space: nowrap; font-family: var(--mono); font-size: 13px; color: var(--muted); width: 12%; }
.ks-log td:nth-child(3) { color: var(--muted); width: 18%; }
.ks-log td:last-child { color: var(--muted); width: 26%; }
.ks-log tr.ks-log__gap td { border-bottom: 0; padding: 4px 0; }
@media (max-width: 760px) {
  .ks-log thead { display: none; }
  .ks-log, .ks-log tbody, .ks-log tr, .ks-log td { display: block; width: auto !important; }
  .ks-log tr:not(.ks-log__gap) { padding: 14px 0; border-bottom: 1px solid var(--surface-2); }
  .ks-log td { padding: 2px 0; border-bottom: 0 !important; }
  .ks-log td:first-child { font-size: 13px; }
  .ks-log td:nth-child(2) { font-size: 15px; margin: 2px 0; color: var(--ink); }
}

/* ---------- Häufige Fragen ---------- */
.ks-faq { grid-column: 1 / -1; max-width: 880px; display: flex; flex-direction: column; }
.ks-faq__item { border-bottom: 1px solid var(--line); }
.ks-faq__item:first-child { border-top: 1px solid var(--line); }
.ks-faq__q { width: 100%; display: flex; gap: 20px; align-items: baseline; justify-content: space-between; padding: 22px 2px; text-align: left; border: 0; background: none; cursor: pointer; font-size: 17px; font-weight: 500; }
.ks-faq__q:hover { color: var(--accent-dk); }
.ks-faq__mark { position: relative; flex: none; width: 15px; height: 15px; margin-top: 4px; }
.ks-faq__mark::before, .ks-faq__mark::after { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: currentColor; transition: transform var(--t); }
.ks-faq__mark::after { transform: rotate(90deg); }
.ks-faq__item[data-open="true"] .ks-faq__mark::after { transform: rotate(0deg); }
.ks-faq__a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.ks-faq__a p { padding: 0 2px 24px; color: var(--muted); max-width: 68ch; }

/* ---------- Kontakt / Demo-Anfrage ---------- */
.ks-contact { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--cols), minmax(0,1fr)); column-gap: var(--gutter); }
.ks-contact__info { grid-column: span 4; }
.ks-contact__info h2 { font-size: var(--step-head); margin-bottom: 26px; }
.ks-contact__rows { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.ks-contact__rows dt { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.ks-contact__rows dd a { text-decoration: underline; text-underline-offset: 3px; }
.ks-contact__rows dd a:hover { color: var(--accent-dk); }
.ks-contact__form { grid-column: 6 / span 7; }
.ks-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px var(--gutter); }
.ks-f { display: flex; flex-direction: column; gap: 6px; }
.ks-f--full { grid-column: 1 / -1; }
.ks-f label { font-size: 13px; font-weight: 600; color: var(--muted); }
.ks-req { color: var(--accent-dk); }
.ks-in {
  width: 100%; min-height: 48px; padding: 10px 14px; background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); font-size: 15.5px; transition: border-color var(--t), box-shadow var(--t);
}
.ks-in::placeholder { color: var(--faint); }
.ks-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
textarea.ks-in { resize: vertical; min-height: 110px; }
select.ks-in { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2311181c' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.ks-in[aria-invalid="true"] { border-color: var(--bad); background-color: var(--bad-wash); }
.ks-errtxt { font-size: 12.5px; color: var(--bad); min-height: 1.2em; }
.ks-check { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.ks-check input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.ks-check a { text-decoration: underline; text-underline-offset: 3px; }
.ks-formerr { grid-column: 1 / -1; display: none; padding: 13px 16px; background: var(--bad-wash); border: 1px solid var(--bad); border-radius: var(--radius-sm); font-size: 14px; }
.ks-formerr.is-shown { display: block; }
.ks-formerr a { text-decoration: underline; }
.ks-form .ks-btn { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
.ks-success { display: none; flex-direction: column; align-items: flex-start; gap: 14px; }
.ks-success.is-shown { display: flex; }
.ks-success__mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ok-wash); color: var(--ok); }
.ks-success h3 { font-size: 24px; }
.ks-success__ref { padding: 10px 14px; background: var(--surface); border-radius: var(--radius-sm); font-family: var(--mono); font-size: 13.5px; }
@media (max-width: 920px) {
  .ks-contact__info, .ks-contact__form { grid-column: 1 / -1; }
  .ks-contact__info { margin-bottom: 44px; }
}
@media (max-width: 560px) { .ks-form { grid-template-columns: 1fr; } }

/* ---------- Fußzeile ---------- */
.ks-foot { padding: 6px; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 6px; }
.ks-tile { background: var(--surface); border-radius: var(--radius); padding: 26px; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-width: 0; }
.ks-tile--statement { grid-column: 1 / span 4; }
.ks-tile--statement p:first-child { font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; }
.ks-tile--statement p:last-child { font-size: var(--step-small); color: var(--muted); }
.ks-tile--nav { grid-column: 5 / span 3; }
.ks-tile--nav ul { display: flex; flex-direction: column; gap: 7px; }
.ks-tile--nav a { color: var(--ink); text-decoration: none; font-size: 15.5px; }
.ks-tile--nav a:hover { color: var(--accent-dk); }
.ks-tile--stat { grid-column: 8 / span 2; }
.ks-tile--stat div { display: flex; flex-direction: column; gap: 3px; }
.ks-tile--stat strong { font-family: var(--mono); font-size: 30px; font-weight: 600; letter-spacing: -0.01em; }
.ks-tile--stat span { font-size: 12.5px; color: var(--muted); }
.ks-tile--mail { grid-column: 10 / span 3; justify-content: flex-end; }
.ks-tile--mail a { font-size: 18px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.ks-tile--mail a:hover { color: var(--accent-dk); }
.ks-tile--word { grid-column: 1 / span 8; min-height: 280px; background: var(--dark); color: #fff; display: grid; place-items: center; }
.ks-tile--word span { font-size: 8vw; font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.ks-tile--cta { grid-column: 9 / span 4; min-height: 280px; background: var(--accent); color: #fff; text-decoration: none; font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; transition: background-color var(--t); }
.ks-tile--cta:hover { background: var(--accent-dk); }
.ks-tile--cta svg { align-self: flex-end; transition: transform var(--t); }
.ks-tile--cta:hover svg { transform: translate(3px, -3px); }
@media (max-width: 860px) {
  .ks-foot { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ks-tile { padding: 20px; min-height: 150px; }
  .ks-tile--word { grid-column: 1 / -1; order: -2; min-height: 150px; }
  .ks-tile--word span { font-size: 16vw; }
  .ks-tile--cta { grid-column: 1 / -1; order: -1; min-height: 150px; }
  .ks-tile--statement, .ks-tile--nav, .ks-tile--stat, .ks-tile--mail { grid-column: span 1; }
}
@media (max-width: 420px) {
  .ks-tile--statement, .ks-tile--nav, .ks-tile--stat, .ks-tile--mail { grid-column: 1 / -1; }
}

/* ---------- Seitenkopf (Impressum / Datenschutz) ---------- */
.ks-phead { padding: 44px 0 56px; background: var(--surface); }
.ks-phead h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.75rem); }
.ks-crumbs { display: flex; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.ks-crumbs a:hover { color: var(--accent-dk); }
.ks-notice {
  margin-top: 26px; padding: 16px 18px; background: #fff7e6; border: 1px solid #e8c468;
  border-radius: var(--radius-sm); font-size: 14.5px; color: #6b4e0a; max-width: 64ch;
}
.ks-notice strong { display: block; margin-bottom: 4px; color: #4d3800; }
.ks-legal { grid-column: 2 / span 9; padding-block: var(--section); }
.ks-legal h2 { font-size: 22px; letter-spacing: -0.01em; margin: 40px 0 12px; scroll-margin-top: 100px; }
.ks-legal h2:first-child { margin-top: 0; }
.ks-legal p { margin-bottom: 14px; color: var(--muted); max-width: 70ch; }
.ks-legal ul { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; max-width: 70ch; }
.ks-legal li { color: var(--muted); padding-left: 18px; position: relative; }
.ks-legal li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ks-legal a { text-decoration: underline; text-underline-offset: 3px; }
.ks-legal a:hover { color: var(--accent-dk); }
.ks-legal code { font-family: var(--mono); font-size: 13px; padding: 2px 6px; background: var(--surface); border-radius: 3px; }
.ks-placeholder { color: var(--muted); font-style: italic; }
@media (max-width: 760px) { .ks-legal { grid-column: 1 / -1; } }

/* Supporting photography; keep the original product illustrations visible. */

.ks-operations-photo { grid-column: 1 / -1; margin: 0 0 12px; }
.ks-operations-photo img { display: block; width: 100%; height: auto; max-height: 430px; object-fit: cover; border-radius: 10px; }


/* Supporting scenes and a personal introduction beside the demo form. */
.detail-photo { margin:24px 0 36px; min-width:0; grid-column:1 / -1; }
.detail-photo img { display:block; width:100%; height:auto; max-height:360px; object-fit:cover; border-radius:12px; }
.detail-photo figcaption { margin-top:10px; font-size:13px; opacity:.75; }
.demo-person { display:flex; gap:16px; align-items:center; margin:24px 0; padding:18px; border:1px solid #8883; border-radius:12px; }
.demo-person .demo-person__portrait { width:72px; height:72px; border-radius:50%; object-fit:cover; flex:0 0 72px; }
.demo-person strong { display:block; font-size:15px; line-height:1.4; }
.demo-person p { margin:4px 0 0; font-size:13px; line-height:1.5; }
.adapter-cutout { display:block; width:200px; max-width:100%; height:auto; margin:12px 0; }
@media(max-width:600px) { .detail-photo img { max-height:260px; } .demo-person { padding:12px; gap:12px; } }

/* Give section introductions enough room for long German words on phones. */
@media(max-width:760px) {
  .ks-head { grid-template-columns:minmax(0,1fr); row-gap:18px; }
  .ks-head h2, .ks-head p { grid-column:1; min-width:0; overflow-wrap:anywhere; }
}