/*
 * MILEO SYSTEMS Landing Pages: gemeinsame Basis.
 * Markenfarben von mileosystems.com (Koralle #E94C39, Indigo #100C3D),
 * Buttons im Pill-Stil, Wortmarke. Seitenspezifisches CSS liegt in sites/<name>/site.css.
 */
/* Schriften lokal ausgeliefert (DSGVO: keine Anfragen an Google). Lizenzen in fonts/. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/inter-latin-var.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-latin-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-latin-500.woff2") format("woff2")}

:root{
  color-scheme:light;
  --paper:#FFFFFF;
  --mist:#F6F7F9;
  --line:#E6E9EE;
  --ink:#0E1220;
  --steel:#5A6272;
  --coral:#E94C39;
  --coral-strong:#CF3A28;
  --indigo:#100C3D;
  --sans:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;hyphens:auto;-webkit-hyphens:auto}
h1,h2,h3{margin:0;text-wrap:balance;hyphens:manual}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:4px}
.wrap{max-width:1080px;margin-inline:auto;padding-inline:24px}

.label{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.label b{color:var(--coral);font-weight:500}
.h2{font-size:clamp(28px,3.6vw,40px);line-height:1.12;letter-spacing:-.03em;font-weight:800;max-width:22ch}
.muted{color:var(--steel)}

.btn{display:inline-flex;align-items:center;gap:10px;font:600 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:16px 24px;border-radius:100px;border:1px solid transparent;transition:background .2s,border-color .2s}
.btn-primary{background:var(--coral);color:#fff}
.btn-primary:hover{background:var(--coral-strong)}
.btn-link{padding-inline:4px;color:var(--ink);border-radius:0;border-bottom:1px solid var(--ink);padding-block:6px}
.btn-link:hover{color:var(--coral);border-color:var(--coral)}
.arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(3px)}
/* Wortmarke als Text: MILEO (Koralle) SYSTEMS (Indigo), darunter CLOUD ENGINEERING. Kein Bild-Logo noetig. */
.wm{display:inline-grid;line-height:1}
.wm-top{display:flex;align-items:center;font-weight:800;font-size:20px;letter-spacing:-.01em}
.wm-top .m{color:var(--coral)}
.wm-top .s{color:var(--indigo);margin-left:6px}
/* CLOUD ENGINEERING exakt so breit wie MILEO SYSTEMS: jeder Buchstabe ein Element, gleichmaessig verteilt. */
.wm-sub{display:flex;justify-content:space-between;font-size:7.8px;font-weight:600;line-height:1;color:var(--indigo);padding-top:5px}
.wm-sub .sp{width:.5em}

/* Hilfsklassen statt Inline-Styles (die CSP erlaubt keine style-Attribute) */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.mt-16{margin-top:16px}
.mt-14{margin-top:14px}
.measure{max-width:56ch}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot-coral{background:var(--coral)}
.dot-ring{border:1.5px solid var(--ink)}