@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root { color-scheme:light dark; --ink:#252b28; --orange:#f37021; --orange-dark:#d9570d; --paper:#fbfbfa; --warm:#f1f3f2; --muted:#69716d; --line:rgba(37,43,40,.13); --radius-card:20px; --radius-control:14px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Manrope","Segoe UI",Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.wrap { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:"Manrope","Segoe UI",Arial,sans-serif; }
h1 { margin-bottom:24px; font-size:clamp(44px,5.3vw,70px); line-height:1.03; letter-spacing:-4px; }
h1 em,h2 em,.statement em { color:var(--orange); font-style:normal; }

.logo { display:inline-flex; align-items:center; gap:10px; }
.logo-icon { position:relative; width:49px; height:45px; border:4px solid var(--orange); border-radius:13px 15px 15px 13px; }
.logo-icon::after { content:""; position:absolute; right:3px; bottom:-10px; left:3px; height:5px; border-bottom:3px solid var(--orange); border-radius:50%; }
.logo-icon i { position:absolute; right:7px; bottom:7px; width:7px; height:7px; border-radius:50%; background:var(--orange); }
.logo > span:last-child { display:flex; flex-direction:column; }
.logo b { font-size:24px; line-height:.88; letter-spacing:1px; }
.logo small { margin-top:6px; color:var(--orange); font-size:8px; font-weight:700; letter-spacing:3.3px; }

.button { display:inline-flex; min-height:44px; align-items:center; justify-content:space-between; gap:20px; width:max-content; padding:11px 17px; border-radius:var(--radius-control); background:var(--orange); color:#fff; font-size:13px; font-weight:700; }
.button:hover { background:var(--orange-dark); }
.button span { font-size:18px; }
.hero { min-height:560px; display:grid; grid-template-columns:1.05fr .85fr; align-items:center; gap:56px; padding:54px 0 64px; }
.eyebrow,.label { font-size:10px; font-weight:800; letter-spacing:2.4px; text-transform:uppercase; }
.eyebrow { display:flex; align-items:center; gap:12px; margin:0 0 20px; }
.eyebrow span { width:27px; height:3px; background:var(--orange); }
.lead { max-width:600px; margin-bottom:28px; color:var(--muted); font-size:17px; line-height:1.6; }
.actions { display:flex; align-items:center; gap:30px; }
.text-link { font-size:14px; font-weight:700; }
.hero-art { position:relative; height:410px; display:grid; place-items:center; overflow:hidden; border-radius:42% 12% 42% 12%; background:var(--warm); }
.hero-art::before { content:""; position:absolute; top:-80px; right:-95px; width:255px; height:255px; border-radius:50%; background:var(--orange); }
.grid { position:absolute; inset:0; opacity:.35; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:44px 44px; }
.note { position:absolute; z-index:3; padding:12px 18px; border-radius:var(--radius-control); background:#fff; box-shadow:0 10px 25px rgba(32,39,45,.08); font-size:12px; font-weight:700; }
.note::before { content:""; display:inline-block; width:7px; height:7px; margin-right:9px; border-radius:50%; background:var(--orange); }
.n1 { top:clamp(34px,14%,70px); left:clamp(28px,6%,44px); }
.n2 { right:clamp(28px,5%,42px); bottom:clamp(48px,16%,82px); }
.domain { position:absolute; bottom:19px; left:24px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:2px; }

.statement { background:var(--ink); color:#fff; }
.statement-inner { display:grid; grid-template-columns:1fr 3fr; gap:36px; padding:64px 0; }
.statement .label { padding-top:12px; color:var(--orange); }
.statement p:last-child { max-width:850px; margin:0; font-size:clamp(30px,4vw,50px); font-weight:600; line-height:1.25; letter-spacing:-2px; }
.services,.values { padding:84px 0; }
.section-head { display:flex; align-items:end; justify-content:space-between; margin-bottom:38px; }
.section-head h2,.values h2,.contact h2 { margin:12px 0 0; font-size:42px; line-height:1.1; letter-spacing:-2px; }
.section-head > p { max-width:350px; color:var(--muted); line-height:1.65; }
.overline { margin-bottom:10px; font-size:9px; font-weight:800; letter-spacing:2px; text-transform:uppercase; }
.browser { position:relative; width:180px; height:135px; border:18px solid #fff; border-radius:24px; }
.browser::before { content:""; position:absolute; top:21px; right:-2px; left:-2px; border-top:8px solid #fff; }
.browser i { position:absolute; top:4px; width:6px; height:6px; border-radius:50%; background:#fff; }
.browser i:nth-child(1) { left:4px; } .browser i:nth-child(2) { left:17px; } .browser i:nth-child(3) { left:30px; }
.projects { padding:84px 0; background:var(--ink); color:#fff; }
.light > p { color:#aeb4b7; }
.light .label { color:var(--orange); }
.project-icon { display:flex; align-items:center; justify-content:flex-start; width:68px; height:68px; }
.project-icon img { display:block; width:100%; height:100%; }
.values { display:grid; grid-template-columns:1fr 1.15fr; gap:80px; }
.values-lead { max-width:500px; margin:22px 0 0; color:var(--muted); font-size:17px; line-height:1.65; }
.values-ai { max-width:520px; margin:18px 0 0; color:var(--muted); line-height:1.65; }
.values-ai a { color:inherit; text-decoration-color:var(--orange); text-underline-offset:3px; }
.values-ai a:hover, .values-ai a:focus-visible { color:var(--text); }
.values ol { margin:0; padding:0; list-style:none; }
.values li { display:grid; grid-template-columns:48px 1fr; padding:20px 0; border-top:1px solid var(--line); }
.values li:last-child { border-bottom:1px solid var(--line); }
.values li > span { color:var(--orange); font-size:10px; font-weight:800; }
.values h3 { margin-bottom:7px; font-size:21px; }
.values li p { margin:0; color:var(--muted); }
.contact { background:var(--orange); color:#fff; }
.contact-inner { min-height:280px; display:flex; align-items:center; justify-content:space-between; gap:40px; }
.contact .label,.contact h2 em { color:var(--ink); }
.white { background:#fff; color:var(--ink); }

/* Produktseiten */
.product-hero { min-height:560px; display:grid; grid-template-columns:1.08fr .82fr; gap:60px; align-items:center; padding:58px 0 68px; }
.product-back { display:inline-block; margin-bottom:34px; color:var(--muted); font-size:12px; font-weight:700; }
.product-back:hover { color:var(--orange); }
.product-hero h1 { margin-bottom:28px; font-size:clamp(48px,5.8vw,76px); }
.product-status-line { display:flex; align-items:center; gap:10px; margin-top:30px; color:var(--muted); font-size:11px; letter-spacing:1.1px; text-transform:uppercase; }
.product-status-line > span { width:8px; height:8px; border-radius:50%; background:var(--orange); }
.product-status-line strong { color:var(--ink); }
.product-visual { position:relative; height:400px; display:grid; place-items:center; border-radius:42% 12% 42% 12%; background:var(--warm); }
.product-visual::before { content:""; position:absolute; top:-75px; right:-90px; width:230px; height:230px; border-radius:50%; background:var(--orange); }
.product-visual::after { content:""; position:absolute; inset:0; opacity:.3; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:44px 44px; }
.finance-card { position:relative; z-index:2; width:250px; min-height:285px; padding:32px; border-radius:22px; background:#fff; box-shadow:0 20px 50px rgba(32,39,45,.12); }
.finance-card small { display:block; color:var(--muted); font-size:10px; letter-spacing:1.6px; text-transform:uppercase; }
.finance-card > strong { display:block; margin:7px 0 34px; font-size:28px; }
.finance-line { display:grid; grid-template-columns:15px 1fr; gap:10px; align-items:center; margin:15px 0; }
.finance-line i { width:10px; height:10px; border-radius:50%; background:var(--orange); }
.finance-line span { height:8px; border-radius:10px; background:var(--warm); }
.finance-line.short span { width:70%; }
.finance-total { position:absolute; right:24px; bottom:22px; width:62px; height:62px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:#fff; font-size:28px; font-weight:700; }
.time-face { position:relative; z-index:2; width:230px; height:230px; border:24px solid var(--orange); border-radius:50%; background:var(--paper); }
.time-face b { position:absolute; top:50%; left:50%; width:16px; height:16px; border-radius:50%; background:var(--ink); transform:translate(-50%,-50%); }
.time-face i { position:absolute; top:50%; left:50%; height:5px; border-radius:4px; background:var(--ink); transform-origin:0 50%; }
.time-face .hand-one { width:63px; transform:rotate(-92deg); } .time-face .hand-two { width:82px; transform:rotate(28deg); }
.time-pill { position:absolute; z-index:3; padding:12px 18px; border-radius:50px; background:#fff; box-shadow:0 10px 25px rgba(32,39,45,.1); font-size:11px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase; }
.time-pill::before { content:""; display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--orange); }
.product-question { background:var(--ink); color:#fff; }
.product-question-inner { display:grid; grid-template-columns:1fr 3fr; gap:38px; padding:62px 0; }
.product-question .label { padding-top:10px; color:var(--orange); }
.product-question p:last-child { max-width:900px; margin:0; font-size:clamp(29px,3.8vw,48px); font-weight:600; line-height:1.25; letter-spacing:-1.8px; }
.product-question em { color:var(--orange); font-style:normal; }
.product-content { padding:84px 0; }
.product-intro { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:end; }
.product-intro > * { min-width:0; }
.product-intro h2 { overflow-wrap:anywhere; }
.product-intro h2,.product-basic h2,.product-development h2 { margin:13px 0 0; font-size:46px; line-height:1.08; letter-spacing:-2.3px; }
.product-intro h2 em { color:var(--orange); font-style:normal; }
.product-intro > p { margin:0; color:var(--muted); font-size:17px; line-height:1.75; }
.product-principles { display:grid; grid-template-columns:repeat(3,1fr); margin-top:56px; border-block:1px solid var(--line); }
.product-principles article { min-height:205px; padding:24px 28px 26px 0; border-right:1px solid var(--line); }
.product-principles article + article { padding-left:32px; }
.product-principles article:last-child { border-right:0; }
.product-principles span { color:var(--orange); font-size:10px; font-weight:800; }
.product-principles h3 { margin:24px 0 10px; font-size:21px; }
.product-principles p { margin:0; color:var(--muted); line-height:1.65; }
.product-basic { padding:72px 0; background:var(--warm); }
.product-basic-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; }
.product-basic-grid > * { min-width:0; }
.product-basic h2 { overflow-wrap:anywhere; }
.product-basic-grid > div:last-child { padding-top:30px; }
.product-basic-grid > div:last-child p { color:var(--muted); line-height:1.75; }
.product-development { display:flex; align-items:center; justify-content:space-between; gap:60px; padding:76px 0; }
.product-webapp { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:start; padding:76px 0 0; }
.product-webapp h2 { margin:13px 0 0; font-size:42px; line-height:1.1; letter-spacing:-2px; }
.product-webapp p { color:var(--muted); line-height:1.7; }
.product-webapp .label { color:var(--ink); }
.product-development > div { max-width:720px; }
.product-development h2 { margin-bottom:19px; }
.product-development p:last-child { max-width:640px; color:var(--muted); line-height:1.7; }

@media(max-width:900px) {
  .hero,.product-hero { grid-template-columns:1fr; gap:48px; padding:60px 0 74px; }
  .statement-inner,.values,.product-question-inner,.product-intro,.product-basic-grid,.product-webapp { grid-template-columns:1fr; gap:35px; }
  .section-head { display:block; }
  .section-head > p { margin-top:20px; }
  .services,.projects,.values { padding:64px 0; }
  .contact-inner { display:block; padding:56px 0; }
  .contact .button { margin-top:35px; }
  .product-visual { width:min(100%,620px); height:420px; justify-self:center; }
  .product-principles { grid-template-columns:1fr; }
  .product-principles article,.product-principles article + article { min-height:0; padding:28px 0; border-right:0; border-bottom:1px solid var(--line); }
  .product-principles article:last-child { border-bottom:0; }
  .product-development { align-items:flex-start; flex-direction:column; }
}
@media(max-width:520px) {
  .actions { align-items:flex-start; flex-direction:column; }
  .hero-art { height:350px; }
  .n1 { top:32px; left:22px; } .n2 { right:22px; bottom:52px; }
  .project-icon { width:52px; height:52px; }
  .product-hero h1 { letter-spacing:-3px; }
  .product-visual { height:340px; }
  .finance-card { width:215px; min-height:250px; padding:26px; }
  .time-face { width:190px; height:190px; border-width:20px; }
  .time-face .hand-one { width:50px; } .time-face .hand-two { width:67px; }
  .product-question-inner { padding:64px 0; }
  .product-content { padding:78px 0; }
  .product-intro h2,.product-basic h2,.product-development h2 { font-size:38px; }
  .product-basic { padding:74px 0; }
  .product-development { padding:75px 0; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }


/* Solange noch nicht feststeht, ob eine Startanimation vorhanden ist,
   darf die eigentliche Webseite nicht kurz vorab sichtbar werden. */
html.mle-startup-pending body {
  background:#20272d;
}
html.mle-startup-pending body > :not(.mle-startup-animation) {
  visibility:hidden;
}

/* Zentrale MLE-Digital-Startanimation (Auswahl aus der MDP) */
.mle-startup-animation {
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#20272d;
  opacity:1;
  visibility:visible;
  transition:opacity .28s ease,visibility .28s ease;
}
.mle-startup-animation[hidden] { display:none; }
.mle-startup-animation.is-leaving { opacity:0; visibility:hidden; pointer-events:none; }
.mle-startup-animation__stage {
  width:min(92vw, 1100px);
  height:min(86vh, 720px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.mle-startup-animation__stage img,
.mle-startup-animation__stage video,
.mle-startup-animation__stage svg {
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
@media(prefers-reduced-motion:reduce) {
  .mle-startup-animation { transition:none; }
}

/* Samsung Internet: eigene Dark-Variante bewusst deklarieren, ohne Markenfarben umzudeuten. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme:dark;
    --ink:#252b28;
    --orange:#f37021;
    --orange-dark:#d9570d;
    --paper:#fbfbfa;
    --warm:#f1f3f2;
    --muted:#69716d;
    --line:rgba(37,43,40,.13);
  }
  html.mle-startup-pending body,
  .mle-startup-animation { background:#20272d; }
}