:root {
  color-scheme: light;
  --ink: #0b1836;
  --muted: #667085;
  --blue: #386bdc;
  --blue-deep: #112d67;
  --teal: #24b6a6;
  --line: rgba(11, 24, 54, .1);
  --paper: #ffffff;
  --soft: #f6f8fc;
  --coral: #ff765f;
  --max: 1240px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.skip-link {
  position: fixed;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: .75rem 1rem;
  border-radius: .7rem;
  background: var(--ink);
  color: white;
}
.skip-link:focus { top: 1rem; }

.header {
  width: min(calc(100% - 2.5rem), var(--max));
  height: 104px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 10;
}

.mywiai-brand { display: inline-flex; width: 104px; height: 88px; align-items: center; text-decoration: none; }
.mywiai-brand img { display: block; width: 100%; height: 100%; object-fit: contain; }

nav { display: flex; gap: 2.5rem; }
nav a, .header-link { text-decoration: none; font-size: .92rem; font-weight: 560; }
nav a { color: #445069; }
nav a:hover, nav a:focus-visible, .header-link:hover { color: var(--blue); }
.header-link { justify-self: end; }
.header-link span { display: inline-block; margin-left: .4rem; color: var(--teal); }

.hero {
  width: min(calc(100% - 2.5rem), var(--max));
  min-height: calc(100svh - 104px);
  margin: 0 auto;
  padding: clamp(5rem, 12vh, 9rem) 0 4rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero-glow {
  position: absolute;
  z-index: -1;
  width: min(80vw, 950px);
  height: min(70vw, 760px);
  left: 48%;
  top: -9rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 44%, rgba(56,107,220,.26), transparent 34%),
    radial-gradient(circle at 66% 52%, rgba(36,182,166,.24), transparent 34%),
    radial-gradient(circle at 50% 64%, rgba(93,142,225,.1), transparent 52%);
  filter: blur(62px);
}

.eyebrow, .section-label {
  margin: 0 0 1.2rem;
  color: var(--blue);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  max-width: 1000px;
  margin-bottom: 2rem;
  font-size: clamp(4.5rem, 11vw, 10.5rem);
  font-weight: 450;
  line-height: .84;
  letter-spacing: -.07em;
}

h1 span {
  background: linear-gradient(95deg, #142450 8%, #315eb4 55%, #1da99e 110%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.hero-copy {
  max-width: 650px;
  margin-left: min(28vw, 350px);
  color: #56637a;
  font-size: clamp(1.12rem, 1.8vw, 1.38rem);
}

.scroll-cue {
  width: fit-content;
  margin: clamp(3rem, 8vh, 6rem) 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 620;
}
.scroll-cue i { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--teal); font-style: normal; }

.product-intro, .principle, .outlook {
  width: min(calc(100% - 2.5rem), var(--max));
  margin: 0 auto;
  padding: clamp(6rem, 11vw, 10rem) 0;
}

.product-intro {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(2rem, 9vw, 9rem);
  align-items: end;
  border-top: 1px solid var(--line);
}

h2 { margin-bottom: 0; font-size: clamp(3rem, 6.2vw, 6.7rem); line-height: .98; letter-spacing: -.06em; font-weight: 480; }
.product-intro > p, .principle > div > p, .outlook > p { margin-bottom: .4rem; color: var(--muted); font-size: clamp(1.05rem, 1.7vw, 1.3rem); }

.product-grid {
  width: min(calc(100% - 2.5rem), var(--max));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.product-card {
  min-height: 800px;
  padding: clamp(2rem, 4vw, 4rem);
  position: relative;
  border-radius: 2.5rem;
  overflow: hidden;
  isolation: isolate;
}

.product-content { position: relative; z-index: 4; max-width: 520px; }
.product-meta { display: flex; align-items: center; gap: .8rem; margin-bottom: clamp(3.5rem, 8vw, 7rem); font-size: .76rem; font-weight: 720; letter-spacing: .15em; text-transform: uppercase; }
.product-icon { width: 48px; height: 48px; border-radius: 12px; }
.product-card h3 { margin-bottom: 1rem; font-size: clamp(3rem, 6vw, 5.5rem); line-height: 1; letter-spacing: -.06em; }
.product-card h3 sup { font-size: .48em; color: var(--coral); vertical-align: super; }
.product-claim { max-width: 450px; margin-bottom: 1.2rem; font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 680; line-height: 1.3; }
.product-text { max-width: 470px; font-size: 1.02rem; }
.product-action, .product-status { display: inline-flex; align-items: center; min-height: 48px; margin-top: 1rem; padding: .65rem 1.2rem; border-radius: 999px; font-weight: 700; font-size: .9rem; }
.product-action { background: white; color: var(--ink); text-decoration: none; }
.product-action span { margin-left: .5rem; color: var(--teal); }
.product-status { border: 1px solid rgba(11,24,54,.18); color: var(--ink); text-decoration: none; background: rgba(255,255,255,.52); }
.product-status span { margin-left: .5rem; color: var(--coral); }
.product-status:hover { background: white; }

.nucoai-card { color: white; background: linear-gradient(150deg, #132f69, #071a35 62%); }
.nucoai-card .product-text { color: #b7c7dc; }
.device-frame {
  width: 46%;
  min-width: 240px;
  position: absolute;
  right: -4%;
  bottom: -34%;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 48px;
  background: #050b16;
  box-shadow: 0 25px 70px rgba(0,0,0,.38);
  transform: rotate(5deg);
}
.device-frame img { display: block; width: 100%; border-radius: 37px; }

.opair-card { color: var(--ink); background: linear-gradient(145deg, #f9fcff, #eaf5ff); border: 1px solid rgba(56,107,220,.12); }
.opair-card .product-text { color: #53627a; }
.opair-card .product-meta { color: #32435f; }
.opair-aura { position: absolute; width: 110%; aspect-ratio: 1; left: -8%; bottom: -32%; border-radius: 50%; background: radial-gradient(circle at 58% 42%, rgba(255,118,95,.18), transparent 38%), radial-gradient(circle at 32% 42%, rgba(101,183,255,.2), transparent 40%); filter: blur(22px); }
.opair-mini-mark { width: 48px; height: 48px; position: relative; }
.opair-mini-mark i { position: absolute; inset: 8px 18px 8px 0; border: 5px solid #65b7ff; border-radius: 50%; }
.opair-mini-mark i:last-child { inset: 8px 0 8px 18px; border-color: var(--coral); }
.opair-logo-wrap { position: absolute; inset: auto 0 0 0; height: 48%; display: grid; place-items: center; padding: 0 .8rem .8rem; }
.opair-logo-wrap img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }

.principle { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: clamp(3rem, 10vw, 10rem); }
.principle-mark { min-height: 500px; position: relative; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 40% 45%, rgba(56,107,220,.22), transparent 44%), radial-gradient(circle at 62% 58%, rgba(36,182,166,.2), transparent 42%); }
.principle-mark span { position: absolute; color: var(--blue-deep); font-size: clamp(6rem, 12vw, 11rem); font-weight: 720; letter-spacing: -.1em; }
.principle-mark span:last-child { color: var(--teal); transform: translate(16%, 34%); font-size: clamp(2.2rem, 5vw, 4rem); }
.principle > div > p { margin-top: 2rem; }
.principle ul { display: flex; flex-wrap: wrap; gap: .65rem; margin: 2.2rem 0 0; padding: 0; list-style: none; }
.principle li { padding: .6rem 1rem; border: 1px solid var(--line); border-radius: 999px; color: #38465e; font-weight: 620; }

.outlook { text-align: center; border-top: 1px solid var(--line); }
.outlook h2 { font-size: clamp(3.5rem, 8vw, 8rem); }
.outlook > p { max-width: 660px; margin: 2rem auto 0; }

footer {
  width: min(calc(100% - 2.5rem), var(--max));
  margin: 0 auto;
  padding: 2rem 0 3rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .82rem;
}
footer img { width: 92px; }
footer p { margin: 0; }
footer p:last-child { justify-self: end; }

@media (max-width: 900px) {
  .header { grid-template-columns: 1fr auto; }
  .header nav { display: none; }
  .hero { min-height: auto; padding-bottom: 7rem; }
  .hero-copy { margin-left: 0; }
  .product-intro, .product-grid, .principle { grid-template-columns: 1fr; }
  .product-card { min-height: 760px; }
  .principle-mark { min-height: 380px; }
}

@media (max-width: 580px) {
  .header { height: 92px; }
  .mywiai-brand { width: 88px; height: 78px; }
  .header-link { font-size: .8rem; }
  .hero { padding-top: 5rem; }
  h1 { font-size: clamp(4rem, 20vw, 6.2rem); }
  .scroll-cue { margin-left: 0; }
  .product-card { min-height: 720px; padding: 2rem; border-radius: 1.7rem; }
  .product-meta { margin-bottom: 3rem; }
  .device-frame { width: 55%; bottom: -27%; }
  .opair-logo-wrap { height: 43%; }
  footer { grid-template-columns: 1fr; gap: .55rem; text-align: center; }
  footer > * { justify-self: center !important; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-glow { animation: breathe 9s ease-in-out infinite alternate; }
  .product-card { transition: transform .35s ease, box-shadow .35s ease; }
  .product-card:hover { transform: translateY(-6px); box-shadow: 0 28px 80px rgba(26,50,92,.13); }
  @keyframes breathe { to { transform: translate(2%, 2%) scale(1.06); } }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* OPAIR² detail page */
.opair-detail {
  background: #071a35;
  color: white;
}
.opair-detail .header { border-bottom-color: rgba(255,255,255,.14); }
.opair-detail .header nav a, .opair-detail .header-link { color: #d6e4f3; }
.opair-detail .mywiai-brand { padding: .35rem .55rem; border-radius: .8rem; background: white; }
.opair-detail .mywiai-brand img { width: 100%; height: 100%; object-fit: contain; }
.detail-back { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.detail-back:hover { color: white; }
.opair-detail main { overflow: hidden; }

.opair-detail-hero {
  width: min(calc(100% - 2.5rem), var(--max));
  min-height: calc(100svh - 104px);
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 8rem) 0;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: clamp(2rem, 7vw, 7rem);
}
.opair-detail-copy h1 { margin-bottom: 1.5rem; font-size: clamp(4.2rem, 9vw, 8.7rem); }
.opair-detail-copy h1 span { color: var(--coral); background: none; }
.opair-detail-copy .hero-copy { margin-left: 0; color: #bdccdd; }
.detail-status { display: inline-flex; margin-top: 1.5rem; padding: .6rem 1rem; border: 1px solid rgba(101,183,255,.28); border-radius: 999px; color: #b9ddff; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.detail-logo-stage { min-height: 610px; display: grid; place-items: center; position: relative; }
.detail-logo-stage::before { content: ""; position: absolute; width: 92%; height: 82%; border-radius: 2.4rem; background: linear-gradient(145deg, #f9fcff, #eaf5ff); box-shadow: 0 28px 80px rgba(0,0,0,.2); }
.detail-logo-stage img { position: relative; z-index: 1; display: block; width: 92%; height: auto; object-fit: contain; border-radius: 2rem; }

.meaning, .detail-principle, .discovery-detail {
  width: min(calc(100% - 2.5rem), var(--max));
  margin: 0 auto;
  padding: clamp(6rem, 11vw, 10rem) 0;
  border-top: 1px solid rgba(255,255,255,.14);
}
.opair-detail .section-label { color: #65b7ff; }
.detail-intro { display: grid; grid-template-columns: .55fr 1.45fr; gap: 3rem; margin-bottom: 4rem; }
.detail-intro p:last-child { max-width: 700px; color: #bdccdd; font-size: 1.2rem; }
.meaning-grid { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid rgba(255,255,255,.14); border-radius: 2rem; overflow: hidden; }
.meaning-grid article { min-height: 230px; padding: 2rem 1.4rem; }
.meaning-grid article + article { border-left: 1px solid rgba(255,255,255,.14); }
.meaning-grid strong { display: block; color: var(--coral); font-size: 3rem; line-height: 1; }
.meaning-grid h2 { margin: 1.5rem 0 .7rem; font-size: 1.2rem; letter-spacing: -.02em; }
.meaning-grid p { color: #9eb0c5; font-size: .92rem; }

.detail-principle { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 9vw, 9rem); align-items: center; }
.detail-principle h2, .discovery-detail h2 { font-size: clamp(3rem, 6vw, 6rem); }
.detail-principle p { color: #bdccdd; font-size: 1.2rem; }
.equal-team { min-height: 470px; position: relative; display: grid; grid-template-columns: 1fr 1fr; place-items: center; border-radius: 2rem; background: linear-gradient(145deg, #0d3060, #081c39); overflow: hidden; }
.equal-team .member { width: 115px; height: 115px; display: grid; place-items: center; border-radius: 50%; border: 14px solid #65b7ff; font-size: 2rem; font-weight: 800; }
.equal-team .member:last-child { border-color: var(--coral); }
.equal-team::after { content: "ein Team"; position: absolute; bottom: 2.2rem; padding: .65rem 1rem; border-radius: 999px; background: rgba(255,255,255,.1); color: #dce9f6; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }

.discovery-detail .detail-intro { margin-bottom: 3rem; }
.question-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.question-grid article { min-height: 210px; padding: 2rem; border: 1px solid rgba(255,255,255,.14); border-radius: 1.5rem; background: rgba(255,255,255,.025); }
.question-grid span { color: var(--coral); font-size: .78rem; font-weight: 800; }
.question-grid h3 { margin: 2rem 0 .7rem; font-size: 1.3rem; }
.question-grid p { color: #9eb0c5; }
.discovery-boundary { margin-top: 2rem; padding: 1.1rem 1.3rem; border-left: 3px solid var(--coral); color: #bdccdd; }
.opair-detail footer { border-top-color: rgba(255,255,255,.14); }
.opair-detail footer img { padding: .25rem .4rem; border-radius: .5rem; background: white; }

@media (max-width: 900px) {
  .opair-detail-hero, .detail-principle { grid-template-columns: 1fr; }
  .detail-logo-stage { min-height: 430px; }
  .meaning-grid { grid-template-columns: 1fr 1fr; }
  .meaning-grid article + article { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
  .question-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 580px) {
  .opair-detail-hero { min-height: auto; }
  .detail-logo-stage { min-height: 300px; }
  .detail-intro, .meaning-grid, .question-grid { grid-template-columns: 1fr; }
  .equal-team { min-height: 340px; }
  .equal-team .member { width: 85px; height: 85px; border-width: 10px; font-size: 1.35rem; }
}

/* Ergänzungen des lokalen Entwurfs */
.draft{padding:.5rem 1rem;text-align:center;background:#edf5f6;color:#274652;font-size:.75rem;letter-spacing:.04em}.launch-note{display:table;margin:2.4rem 0 0;padding:.7rem 1rem;border:1px solid #c7dedf;border-radius:99px;color:#112d67;font-weight:650;font-size:.9rem}a:focus-visible{outline:3px solid #16877e;outline-offset:5px}.principle li{border-radius:12px}.outlook>p{color:#53627a}.hero-copy{color:#53627a}.product-meta{letter-spacing:.1em}.nucoai-card .product-meta{color:#d7f7f2}@media(max-width:580px){.draft{font-size:.68rem}.launch-note{font-size:.8rem}}

.app-preview{max-width:270px;margin:2.5rem auto 0}.app-preview img{display:block;width:100%;height:auto;border:7px solid #071426;border-radius:29px;box-shadow:0 18px 45px #0005}.app-preview figcaption{text-align:center;color:#d9e6f4;font-size:.72rem;margin-top:.8rem}.nucoai-card{min-height:0}
/* Leichte Neigung wie in der ursprünglichen Produktdarstellung. */
.app-preview img{transform:rotate(5deg)}

.coming-soon{display:table;margin:0 0 1.2rem;padding:.4rem .85rem;border:1px solid #e9b5aa;border-radius:99px;background:#fff4ef;color:#783b2e;font-size:.8rem;font-weight:700;letter-spacing:.06em}

.mystery-card{grid-column:1/-1;min-height:510px;display:flex;align-items:center;background:radial-gradient(ellipse at 86% 50%,#123e54 0,transparent 45%),linear-gradient(120deg,#090e22,#101d39);color:#fff;border:1px solid #234054;padding:clamp(2rem,5vw,5rem)}
.mystery-card .product-content{max-width:680px}.mystery-card h3{font-size:clamp(2.5rem,5.5vw,5rem);line-height:1.05}.mystery-card .product-text{max-width:440px;color:#c0cede}.mystery-label{color:#8cdddb;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:2rem}.mystery-date{display:table;border:1px solid #6aa7ad;border-radius:99px;padding:.65rem 1.1rem;color:#d5ffff;font-weight:650;margin:1.8rem 0 .7rem}.mystery-platforms{font-size:.8rem;color:#b9cadc;margin:0}.mystery-orbit{position:absolute;width:360px;height:360px;right:6%;top:50%;transform:translateY(-50%) rotate(-18deg);border:1px solid #71d0ce55;border-radius:50%;box-shadow:0 0 75px #24b6a615,inset 0 0 60px #24b6a610;display:grid;place-items:center}.mystery-orbit:before{content:"";position:absolute;inset:35px -25px;border:1px solid #8bb9ed33;border-radius:50%;transform:rotate(55deg)}.mystery-orbit span{font-size:190px;font-weight:250;color:#a7e4e129;line-height:1;transform:rotate(18deg)}
@media(max-width:1100px){.mystery-orbit{right:-140px;opacity:.55}}@media(max-width:580px){.mystery-card{min-height:550px}.mystery-orbit{right:-240px}.mystery-card .product-content{max-width:100%}}
/* Korrigierte Kartenproportionen nach Prüfung der Live-Darstellung. */
.product-card{min-height:800px}
.product-meta{margin-bottom:2.2rem}
.nucoai-card{min-height:800px}
.nucoai-card .product-content{max-width:100%}
.app-preview{position:absolute;width:245px;max-width:45%;right:5%;bottom:-185px;margin:0;transform:rotate(5deg)}
.app-preview img{transform:none}
.app-preview figcaption{position:absolute;right:105%;bottom:205px;width:160px;text-align:left;line-height:1.5}
.opair-logo-wrap{height:40%}
.product-intro,.principle,.outlook{padding-top:clamp(4rem,7vw,7rem);padding-bottom:clamp(4rem,7vw,7rem)}
.mystery-card{min-height:440px}
@media(max-width:900px){.product-card,.nucoai-card{min-height:760px}.mystery-card{min-height:440px}.app-preview{width:245px;max-width:44%;bottom:-210px}}
@media(max-width:580px){.product-card,.nucoai-card{min-height:800px}.mystery-card{min-height:510px}.app-preview{max-width:53%;width:230px;right:8%;bottom:-160px}.app-preview figcaption{width:100px;right:105%;bottom:175px;font-size:.65rem}.opair-logo-wrap{height:37%}}
@media(min-width:901px){.app-preview{bottom:-260px}.app-preview figcaption{bottom:280px}}

.review-notice{padding:14px 5%;background:#fff4cf;color:#443300;font:500 14px/1.5 system-ui}footer nav{display:flex;gap:1rem;flex-wrap:wrap}.legal{max-width:860px;margin:auto;padding:clamp(24px,5vw,64px);font:18px/1.7 system-ui;color:#131a48}.legal h1{font-size:clamp(2rem,6vw,3.5rem);line-height:1.15}.legal h2{font-size:1.4rem;margin-top:2rem}.legal p{margin:1rem 0}.legal .open{background:#fff4cf;border-left:4px solid #b67b00;padding:1rem}.legal img{width:180px;max-width:100%;height:auto}.legal a{color:#164eaa;text-decoration:underline;overflow-wrap:anywhere}

.quality-section{padding:clamp(4rem,7vw,7rem) 5%;background:#f4f7fb;color:#131a48}.quality-section>h2{font-size:clamp(2rem,4.5vw,4rem);line-height:1.12;letter-spacing:-.035em}.quality-section>p{max-width:760px;line-height:1.7}.quality-intro{font-size:1.15rem;margin:1.5rem 0 2.5rem}.quality-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-bottom:2rem}.quality-grid article{padding:1.5rem;background:white;border:1px solid #dce4ef;border-radius:18px}.quality-grid h3{font-size:1.2rem;line-height:1.35;margin:0 0 1rem}.quality-grid p{line-height:1.7;margin:0}@media(max-width:800px){.quality-grid{grid-template-columns:1fr}}